When you’re developing a web application, you would need to consider browser compatibility issues. The problem I faced was an android in-app browser issue, which didn’t test while in development but launched in production, causing many thousands of failure transaction. There were no clear logs to troubleshoot the root cause and took me some time to figure out, so let me document this in hope to save you some time in the future.
When your end-users view your web app from a third party android in-app browser, you have no control over this webView, since it was provided by this third party. If they setJavaScriptEnabled(false) then it's pretty much end game for you. If luckily the frontend code still able to load, notice that, by default, setDomStorageEnabled is false. If you look at the documentation:
https://developer.android.com/reference/android/webkit/WebSettings#setDomStorageEnabled(boolean)
This boolean flag is to sets whether the DOM storage API is enabled. The default value is false, so the WebView should disable the DOM storage API. This would cause a problem in your code execution, stopped and froze running at the line to include localStorage when you try to read the storage object in the browser.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
The solution is simply to add a condition checking if (localStorage) {... available before you proceed with the code. This particular issue doesn't throw a meaningful error and you would have a hard time to troubleshooting log from the android in-app web view anyway as you would need to simulate this problem.
One tip to share is to download this tooling app to help you replicate the issue:
https://play.google.com/store/apps/details?id=com.snc.test.webview2
It is really useful and you can get a console log from this android in-app web view.
Another tip for you if you’re troubleshooting via server log, you can check the request header User-Agent Strings. You can differentiate the WebView by looking for the wv field in the example header below:
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
Hope this article help and save you time on this caveat.
Originally published at https://victorleungtw.com on September 7, 2020.
Top comments (0)