Android WebView WebArchive freeze after loading

822 Views Asked by At

I'm currently developping an android app for a tablet and I want to cover the use case : "if there is no internet connection, I want the app to run as normal".

I used a webview to load a survey in the app so once installed inside our stores, I won't have to install a new version each time we need a new makeover or add questions.

To cover the case where there is no connection, I save a webArchive that I load if there is no wifi when I need to load the webpage.

private void setMainView() {
    mainview = (WebView) findViewById(R.id.wvMain);

    WebSettings webSettings = mainview.getSettings();
    webSettings.setLightTouchEnabled(true);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);
    mainview.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

    if (DetectConnection.checkInternetConnection(this)){
        mainview.setWebViewClient(new WebViewClient() {

            public void onPageFinished(WebView view, String url) {
                File webpage = new File(context.getExternalFilesDir(Environment.DIRECTORY_DCIM).getAbsolutePath()+  File.separator +"home.mht");

                mainview.saveWebArchive(webpage.toString());
                editor.putString(BuildConfig.HOME_PAGE_WEB_ARCHIVE_FILE,webpage.toString() );
                editor.commit();
            }
        });


        mainview.loadUrl(BuildConfig.SERVER_URL + BuildConfig.HOME_PAGE);
    }
    else{
        String filename = getSharedPreferences(BuildConfig.PREFERENCES_NAME, 0).getString(BuildConfig.HOME_PAGE_WEB_ARCHIVE_FILE,null);
        mainview.setWebChromeClient(new WebChromeClient());
        mainview.loadUrl("file:///"+filename);

    }
}    

The only problem is that the webarchive froze as soon as it is loaded. I tried many thing to make it works but the solution is escaping me.

When I set my application to plane mode and I reload the app, I see the home page fine but the click events don't work. My Android Javascript interface is also not working as I tested to send Toast to debug when the app is finished loading so I'm guessing the javascript is not working in my webarchive or maybe the webarchive is not including the CSS and Javascript that are from other website such as W3.css and JQuery?

Maybe if I used a local version of these asset they will be included in the webarchive.

Any suggestions would be welcome.

Thanks

1

There are 1 best solutions below

0
user3507410 On

I ended up using the cache of my webview instead of loading a web archive.

I first added a cache.appcache a the root of my webpage linking my main page to it.

<html manifest="cache.appcache">

At the root (wwww/http_doc) I added this file :

CACHE MANIFEST
/home
/thank-you
/css/w3.css
/js/jquery-3.3.1.min.js
/images/happy1.png
/images/happy2.png
/favicon.ico

#NETWORK
NETWORK:
/home
/thank-you

#FALLBACK
FALLBACK:
/home /offline.html
/thank-you /offline_thankyou.html

The fallback section allowed to have a html file to fall to if the network is available. I then activated the cache of my webview :

WebSettings webSettings = mainview.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setAppCachePath(
         getApplicationContext().getCacheDir().getAbsolutePath());

And now each time, I modified the file "cache.appcache" and reload the application, it take a copy of the current "offline.html" files and reload a working site according to the cache. A good thing I had a very static website to load from so it's 100% functionnal without an internet connection.