Alert upon completion of Manifest cache with javascript

StackOverflow https://stackoverflow.com/questions/12068892

Question

How do I alert a success message when cache.manifest has download all the files in a html5 app? (Bascially success alert on complete cache download)!

Thanks

Was it helpful?

Solution

Well thanks to the very well thought article from Garden Gnome http://gardengnomesoftware.com/wiki/Cache_Manifest_File

I found the answer. All you have to do it create a div which will display the status of cache by adding this to your page:

<div id="cachestatus" style="position:fixed;left: 2px;top: 2px; width: 150px;height:18px;color: #ff0000;padding: 1px 3px; opacity:1; z-index:100; font-family:Arial, Helvetica, sans-serif; opacity:0.2;"></div>

and just right after this div add the following java-script:

<script type="text/javascript">

    var cacheStatus  = document.getElementById('cachestatus');
    cacheStatus.innerHTML="cache status";


    if (navigator.onLine) {
        window.applicationCache.addEventListener('updateready', function(e) {
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                cacheStatus.innerHTML="update ready!";
                if (confirm('A new version of this page is available. Reload?')) {
                    window.location.reload();
                }
            }
        }, false);
        window.applicationCache.addEventListener('cached', function(e) {cacheStatus.innerHTML="cache is ready!"; },false);
        window.applicationCache.addEventListener('noupdate', function(e) { cacheStatus.innerHTML="cache is up to date!"; },false);
        window.applicationCache.addEventListener('downloading', function(e) { cacheStatus.innerHTML="downloading..."; },false);
        window.applicationCache.addEventListener('error', function(e) { cacheStatus.innerHTML="error"; },false);
        window.applicationCache.update();
    } else {
        cacheStatus.innerHTML="offline";
    }
</script>

status of the cache will be displayed in the DIV.

OTHER TIPS

You can bind to various events in the window.applicationCacheobject. One of them is the updateready event.

You will also have to make sure that any cache update is reloaded correctly for the user. Refer to the following article that covers Application Cache basics, its events and how to handle the updates in a programmatic way.

Some other articles that you should refer to while dealing with AppCache are:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top