How to ensure that all application cache resources are downloaded? - html

Question

I've been experiencing what initially appeared to be an intermittent issue where my application wouldn't work offline.
A few details regarding my application:
The entry point into my application is a Login page
All of the pages in my application, w/ the exception of the Login page, display dynamic data. And to ensure the pages that display dynamic data aren't cached, I chose to only have the Login page include the manifest attribute in it's html element.
The total size of the assets listed in my manifest file is roughly 1MB.
The steps I take to reproduce the issue (assume I do not have the applicationCache resources cached on my browser/device):
Navigate to the Login Page (applicationCache resources will begin downloading)
Immediately Login to the application
Go offline and request an offline resource
Notice the browser failed to serve the resource from applicationCache
While I do not have any concrete proof, what I ultimately discovered is navigating away from the Login page, while the browser is in the process of retrieving applicationCache assets, interrupts the download of appCache assets and leads to offline resources not being served up when offline. Is this expected browser behavior? If I wait a sufficient amount of time and give the browser a chance to download assets, offline functionality works.
In order to insure offline functionality, do I need to prevent the user from navigating away from the Login page until the applicationCache cache event is fired?

Answer 1

Is this expected browser behavior?
It is indeed intended behaviour. See http://diveintohtml5.info/offline.html#debugging
if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was.
One solution I could think of would be to check on beforeunload if the the window.applicationCache.status is either checking or downloading.
Or you might be able to set a flag in the users localStorage, indicating that the last attempt was not successfull, using the error event (see below) and try to refetch the files until everything was loaded successfully.
If you've got lots of stuff to cache, you can show a progress bar and some text asking the user to be patient while the page is loading. For the progress bar you can use event.loaded and event.total in the progress event of your cache handling function.
var appCache = window.applicationCache;
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
function handleCacheEvent(e){
if(e.type && (e.type=='progress' || e.type=='ProgressEvent')){
console.log('percent:', Math.round(e.loaded/e.total*100)+'%', 'total:', e.total, 'loaded:',e.loaded);
}
}