Issues in loading Angular JS website in Android Webview

Question

Hi EveryOne I am trying to load GTV into Android WebView.It loads in Mobile browser quite well but not in webview. Here is my Code.

  WebView theWebPage  = new WebView(this);
    theWebPage.getSettings().setJavaScriptEnabled(true);

    theWebPage.getSettings().setPluginState(WebSettings.PluginState.ON);
    super.onCreate(savedInstanceState);
    getSupportActionBar().hide();
    setContentView(theWebPage);
    WebViewClient client = new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return false;
        }
    };
    theWebPage.setWebViewClient(client);

// client.onPageStarted(theWebPage);

    theWebPage.loadUrl("http://gtvqa.com/#!/");

Answer 1

I found this function helpful

this.webView.getSettings().setDomStorageEnabled(true);

Answer 2

AngularJS requires an HTML5-compliant browser and I don't think that the default Android WebView is. Unless you are the developer of that website and can add modernizer to the page to attempt to account for older, non-compliant browsers, you might not be able to solve this.

Answer 3

By default android webview doesn't support HTML5 features, therefore sometimes there are issues with a AngularJS site.

You have to enable the HTML5 in webview to solve that issue.

Follow this method, you will be fine.

private void initWebView(View view) {
    webView=findViewById(R.id.webView);
    loadWebViewDatafinal(webView, webURL);
}

private void loadWebViewDatafinal(WebView wv, String url) {
        WebSettings ws=wv.getSettings();

        ws.setJavaScriptEnabled(true);
        ws.setAllowFileAccess(true);


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ECLAIR) {
            try {
                Log.e("WEB_VIEW_JS", "Enabling HTML5-Features");
                Method m1=WebSettings.class.getMethod("setDomStorageEnabled", new Class[]{Boolean.TYPE});
                m1.invoke(ws, Boolean.TRUE);

                Method m2=WebSettings.class.getMethod("setDatabaseEnabled", new Class[]{Boolean.TYPE});
                m2.invoke(ws, Boolean.TRUE);

                Method m3=WebSettings.class.getMethod("setDatabasePath", new Class[]{String.class});
                m3.invoke(ws, "/data/data/" + getActivity().getPackageName() + "/databases/");

                Method m4=WebSettings.class.getMethod("setAppCacheMaxSize", new Class[]{Long.TYPE});
                m4.invoke(ws, 1024 * 1024 * 8);

                Method m5=WebSettings.class.getMethod("setAppCachePath", new Class[]{String.class});
                m5.invoke(ws, "/data/data/" + getActivity().getPackageName() + "/cache/");

                Method m6=WebSettings.class.getMethod("setAppCacheEnabled", new Class[]{Boolean.TYPE});
                m6.invoke(ws, Boolean.TRUE);

                Log.e("WEB_VIEW_JS", "Enabled HTML5-Features");
            } catch (NoSuchMethodException e) {
                Log.e("WEB_VIEW_JS", "Reflection fail", e);
            } catch (InvocationTargetException e) {
                Log.e("WEB_VIEW_JS", "Reflection fail", e);
            } catch (IllegalAccessException e) {
                Log.e("WEB_VIEW_JS", "Reflection fail", e);
            }
        }

        wv.loadUrl(url);
    }