Question

As part of a loading screen for an offline-enabled web application I’m building (using a cache manifest), I’d like to display an accurate progress bar that lets users know which files has thus far been downloaded and which are still pending. Something like the following:

Loading...
/assets/images/logo.png: loaded
/assets/images/splashImage.png: pending

I know that I can use the cache “pending” event, but I don’t see that the event arguments have any data associated with them.

Is there any way to do this?

Answer 1

There is a progress event that gets triggered when each file downloads, however its payload does not include the file name in any browser that I’ve tested with (Chrome, Safari, FF beta). Chrome displays the file name in the Console (though as far as I know it’s inaccessible to JS), but neither Safari nor FF even go that far. And from what I’ve seen, the files do not download in the same order that they’re listed in the manifest, so there’s not even a way to generate an ordered list then knock them off one at a time.

So in answer to your question, no, there isn’t any way to do this right now. It’s possible that in the future the progress event will include the filename – at least in some browsers – but right now this isn’t possible.

I should add that in Chrome (not in Safari or FF) you can at least get a count of files to be downloaded, allowing you to at least calculate an accurate progress bar. To get this in Chrome you’d use the following:

function downloadProgress(e) {
    totalfiles = Number(e.total);
}
window.applicationCache.addEventListener("progress", downloadProgress, false);

However this will error out in other browsers, so you need to wrap a try/catch or some other method (typeof(e.total)) to avoid the error.