Android: Web App Works in Chrome, but not Webview

Question

I am using ng-hide and ng-show in my web app to handle what gets displayed based on the user's login status. This works completely fine if I go to the Chrome browser on my phone and run the site.

However, when I try to display it in a webview on my app or on the default phone non-Chrome browser, it does not work. None of the contents are hidden and the buttons which are binded to angularJS functions do not work. Note that I do have setJavaScriptEnabled(true) set.

When I looked this issue up, I noticed that some AngularJS features do not work on certain browsers (especially IE), thus it may be possible that AngularJS is incompatible with the default Webview. So is there a workaround or some way for me to make the webview emulate the Chrome browser?

App on Chrome Browser: http://gyazo.com/8a8a56bdac1eb7e91753bc4745433a42 App on Webview: http://gyazo.com/a58de6192aa822af05a2885560e66f91

There are the following errors in the logcat, which I have investigated and make no sense since both variables have no issues in non-webview environments.

E/Web Console﹕ Uncaught SyntaxError: Unexpected identifier:103
E/Web Console﹕: Uncaught Error: No module: AuthApp:17

The uncaught syntax error corresponds to the below, where results is the query results I am getting from Parse. Note that I have checked the contents of results in other browsers and it is in fact returning the results to my query.

 for (var result of results){
...
}

Answer 1

try these settings on your webview. i have had success in the past with these

mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setDomStorageEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());