Html Offline Application Cache, Listing Downloaded Files

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 fi

Solution 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:

functiondownloadProgress(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.

Solution 2:

This is a few years late, but maybe it'll help someone else who's researching this. It doesn't list the files or anything, but it shows an accurate(ish) progress bar based on the total number of files loaded. It may still need a little work... https://github.com/joelabeyta/app-cache-percent-bar