우리나라의 대표적인 웹뷰(WebView)를 활용한 회사 중 하나는 토스다. 토스에서는 앱의 뒤로 가기 버튼을 두 번 눌러 앱을 종료하는 UX를 제공하고 있다. 이를 본 우리 회사 DOF 실무진 중 한 명이 지나가며 이렇게 말했다…
"짜치게 팝업으로 알려주지 말고, 이거 해줘요."
그 말 한마디가 나를 또 한 번 새로운 도전으로 이끌었다.
뒤로가기 버튼 클릭 시간 확인
DateTime currentTime = DateTime.now();현재 시간을 기록하여 두 번의 뒤로가기 클릭 사이 간격을 계산한다… 이유는 그냥 막 종료 시키면 안되지 않을까?… ㅎㅎ 3초간의 유지를 하고 한 번 더 요청하면 그때 💀
WebView 초기화 확인
if (webViewController == null) {
Fluttertoast.showToast(
msg: "WebView is not ready. Try again later.",
);
return Future.value(false);
}WebView가 초기화되지 않았을 경우 사용자에게 토스트 메시지를 보여줍니다. 그냥 막 종료할 수 없으니 그리고 앱이던 웹이던 초기화는 프로그래밍의 기본중에 기본이니깐…?
현재 URL 확인 및 특정 URL 목록 처리
dart
코드 복사
WebUri? currentUrlUri = await webViewController?.getUrl();
String? currentUrl = currentUrlUri?.toString();
List<String> allowedUrls = [
"https://web.dev.smdof.com/map",
"https://web.dev.smdof.com/route",
"https://web.dev.smdof.com/ticket",
"https://web.dev.smdof.com/profile",
"https://web.dev.smdof.com/login",
];
bool isAllowedUrl = currentUrl != null &&
allowedUrls.any((url) => currentUrl.startsWith(url.split('?').first));WebView의 현재 URL을 가져와 특정 URL 목록(allowedUrls)에 포함되는지 확인합니다 이 부분은 추후에 vue3에서 js 핸들러로 요청하는 것으로 바꾸려구한다.. url 바뀌면 다 무용지물이라서..?
startsWith를 사용해 URL 파라미터가 포함된 경우에도 기본 URL을 비교 그 후에 로직을 처리한다!특정 URL에서 뒤로가기 버튼 동작
if (isAllowedUrl) {
if (currentBackPressTime == null ||
currentTime.difference(currentBackPressTime!) >
const Duration(seconds: 3)) {
currentBackPressTime = currentTime;
Fluttertoast.showToast(
msg: "Do you want to quit the app? Press Back once more.",
);
return Future.value(false);
} else {
currentBackPressTime = null;
SystemNavigator.pop(); // 앱 종료
return Future.value(true);
}
}첫 번째 클릭 시 토스트 메시지로 알림 3초 내에 다시 클릭하면 앱 종료 진짜 얼마나 아름…? 다운가
이리하여 우리 앱에서는 두 번 눌러서 종료되는 기능이 안드로이드에서만 가능하게 되었다. iOS는 특유의 제한적인 시스템 정책으로 인해 현재로선 구현할 수 없지만, 추후에 더 깊이 공부하고 연구하여 iOS에서도 지원할 예정…일까? 아니, 반드시 지원해 보일 것이다.
Share article
