2

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?

Peder Rice
  • 1,764
  • 3
  • 28
  • 51

2 Answers2

3

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.

ggutenberg
  • 6,880
  • 8
  • 39
  • 48
  • That's in line with what I've been reading. I'll keep my fingers crossed that this makes its way to a future spec – Peder Rice Feb 25 '11 at 19:10
  • I hope so to, but I wouldn't bet on it. From what I have read about the path they went down in HTML5, they wanted to leave it to the browsers to do a progress bar and show files etc, and have a sort of file browser for the different sites that you could manually delete. – Myforwik Nov 03 '12 at 07:59
  • For me it Chrome also provided an `e.loaded` which is very convenient. Note that is you bind the event with JQuery like `$( appCache ).bind("progress",function( event ){});`. The loaded and total is lost. – jpprade Apr 30 '15 at 22:16
1

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

Joel Abeyta
  • 43
  • 5