Turn off caching on Android for WebApps

Question

Honestly, I'm unsure whether I should post this on SO; either way, let's help each other out.

I'm building a web app which I regularly check on my Android phone, at this point. Instead of uploading it to Phonegap or something all the time, i've configured a simple page with an iFrame pointing to the content of the web app (hosted online).

The bad thing of this: In order to see the changes, I have to clean the app cache. Else, the 'previous' version is still showing (because it's stuck in the cache).

So I was hoping if there was an option to turn on/off on Android/Configure within the page that turns off caching for ALL the objects and files?

Thanks a lot guys!

To give an idea of how I work..

 -------------------------------------------------
|                   My Phone                    |
|                   With a                      |
|                                               |
|   -----------------------------------------   |
|   |           Cordova/Phonegap            |   |
|   |           Application  which          |   |
|   |           loads a                     |   |
|   |                                       |   |
|   |   --------------------------------    |   |
|   |   |       Website with            |   |   |
|   |   |       iFrame                  |   |   |
|   |   |       height:100%             |   |   |
|   |   |       width:100%              |   |   |
|   |   |                               |   |   |
|   |   |   -------------------------   |   |   |
|   |   |   |                       |   |   |   |
|   |   |   |       HTML5           |   |   |   |
|   |   |   |       Responsive      |   |   |   |
|   |   |   |       Webpage         |   |   |   |
|   |   |   |   (The WebApp itself) |   |   |   |
|   |   |   |                       |   |   |   |
|   |   |   -------------------------   |   |   |
|   |   |                               |   |   |
|   |   |                               |   |   |
|   |   ---------------------------------   |   |
|   |                                       |   |
|   ----------------------------------------    |
|                                               |
-------------------------------------------------

Answer 1

There are two ways to disable caching on Cordova/Phonegap apps.

1. First one is configuring the webview settings while loading your content.
2. Second one is adding a timestamp value to your url everytime you want to refresh the page. This is more likely a workaround.

I'll describe both options in detail.

First Solution

For new version of Cordova (5.3.3)

Add below imports

import android.webkit.WebSettings;
import android.webkit.WebView;

Override onResume like this-

@Override
protected void onResume() {
    super.onResume();
    // Disable caching .. 
    WebView wv = (WebView) appView.getEngine().getView();
    WebSettings ws = wv.getSettings();

    ws.setAppCacheEnabled(false); 
    ws.setCacheMode(WebSettings.LOAD_NO_CACHE);
    loadUrl(launchUrl); // launchUrl is the default url specified in Config.xml
}

=======

For older versions of Cordova

Assuming that you're loading your content on your Activity class.

You are able to configure your webview while it's loaded on your Activity class.

Here is the sample code snippet that you can understand how to disable browser caching in Phonegap/Cordova apps.

public class MainActivity extends DroidGap {
    @Override
    protected void onResume() {
        super.onResume();
        // Disable caching .. 
        super.appView.getSettings().setAppCacheEnabled(false); 
        super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        super.loadUrl("http://blabla.com");
    }
}

As you can see, this code block will load content whenever onResume() event is triggered which means that your web content will be reloaded whenever your app is in the foreground.

Following piece of code prevents caching on webview.

super.appView.getSettings().setAppCacheEnabled(false); 
super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

Second Solution

This solution is really silly but behaves as expected. For your situation, it may be helpful.

You can simply add timestamp value at the end of the url. Here is the sample code snippet.

public class MainActivity extends DroidGap {

    @Override
    protected void onResume() {
        super.onResume();

        StringBuilder urlBuilder = new StringBuilder("http://blabla.com");
        urlBuilder.append("?timestamp=");
        urlBuilder.append(new Date().getTime());
        super.loadUrl(urlBuilder.toString());

    }
}

It appends timestamp value at the end of your url everytime and loads the content as it's new.

These are the two ways to avoid caching in web apps in Phonegap/Cordova.

Hope this may be helpful.