앱 브라우저에서 Android에 대한 경고

웹 애플리케이션을 개발할 때 브라우저 호환성 문제를 고려해야 합니다. 제가 직면한 문제는 Android 인앱 브라우저 문제였습니다. 개발 중에는 테스트하지 않았지만 프로덕션에서는 출시되어 수천 건의 트랜잭션 실패를 일으켰습니다. 근본 원인을 해결하기 위한 명확한 로그가 없었고 알아내는 데 시간이 걸렸으므로 나중에 시간을 절약할 수 있도록 문서화하겠습니다.

최종 사용자가 타사 Android 인앱 브라우저에서 웹 앱을 볼 때 이 타사에서 제공했기 때문에 이 webView를 제어할 수 없습니다. 그들이JavaScriptEnabled(false)를 설정하면 거의 최종 게임입니다. 운 좋게도 프런트엔드 코드를 계속 로드할 수 있으면 기본적으로 setDomStorageEnabled가 false입니다. 문서를 보면:

https://developer.android.com/reference/android/webkit/WebSettings#setDomStorageEnabled(boolean)

이 부울 플래그는 DOM 스토리지 API가 활성화되었는지 여부를 설정하는 것입니다. 기본값은 false이므로 WebView는 DOM 스토리지 API를 비활성화해야 합니다. 이렇게 하면 코드 실행에 문제가 발생하고 브라우저에서 저장소 개체를 읽으려고 할 때 localStorage를 포함하는 줄에서 실행이 중지되고 정지됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

해결책은 코드를 계속 진행하기 전에 if (localStorage) {... available 여부를 확인하는 조건을 추가하는 것입니다. 이 특정 문제는 의미 있는 오류를 발생시키지 않으며 이 문제를 시뮬레이트해야 하므로 어쨌든 Android 인앱 웹 보기에서 로그 문제를 해결하는 데 어려움을 겪을 것입니다.

공유할 한 가지 팁은 문제를 재현하는 데 도움이 되는 이 도구 앱을 다운로드하는 것입니다.

https://play.google.com/store/apps/details?id=com.snc.test.webview2

정말 유용하며 이 Android 인앱 웹 보기에서 콘솔 로그를 얻을 수 있습니다.

서버 로그를 통해 문제를 해결하는 경우 또 다른 팁으로 요청 헤더 User-Agent Strings를 확인할 수 있습니다. 아래 예제 헤더에서 wv 필드를 찾아 WebView를 구별할 수 있습니다.

Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36

이 문서가 이 경고에 대한 시간을 절약하고 도움이 되기를 바랍니다.

2020년 9월 7일 https://victorleungtw.com에 원래 게시되었습니다.