Offline Caching(HTML5)

Question

I am facing some difficulty to update cache information from the server by using HTML 5 offline caching method.

Here is the list of steps,

1- Created one cache.manifest file with following entries

   CACHE MANIFEST 
   # Version 1.0
   CACHE:
   /loading.js
   /images/pan-icon.png
   NETWORK:
   *

Then i jest add following event binder to load updated information from the server

window.addEventListener('load', function (e) {
    window.applicationCache.update();
    window.applicationCache.addEventListener('updateready', function (e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            // Browser downloaded a new app cache.
            window.applicationCache.swapCache();
            console.log('Updated');
        } else {
            console.log('No Update');
        }
    }, false);

}, false);

But it alwayes failed to get latest 'loading.js' from the server. I need to clear the cache to get update from the server.

Is there any way to update this forefully.

Please help me

I am using ASP .NET MVC framework to build my web application

Answer 1

When ever you change the content of a file that is defined in your manifest, you must update the manifest file as well in order for the browser to pull down the latest content of that file.

From the gotchas section from MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)

When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using window.applicationCache.swapCache(), though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.