Check if my pages are cached

Question

I have a page that links to a manifest file. The manifest file has many urls in it. Usually it takes a few minutes to load everything.

How can I check if my pages have finished caching so I can tell the user "Your files are cached. It is safe to go offline now"?

Answer 1

The applicationCache global fires several events you can check for to handle this. There are a few cases that need to be considered.

The very first time the manifest is downloaded by a user's browser (or the first time they revisit the site after they delete the appcache record), the applicationCache will fire a cached event once all resources have been downloaded.

If the user has visited the site before, and the browser determines that the manifest hasn't changed since their last visit, the applicationCache will fire a noupdate event, indicating that the user is ready to go offline.

If, on the other hand, the manifest file has changed, then it will re-download all of the files in the manifest. Once done, it will trigger a updateready event. However:

The new version is not yet in use. To “hot-swap” to the new version without forcing the user to reload the page, you can manually call the window.applicationCache.swapCache() function.

In this case, once the updateready event is fired and (optionally) application.swapCache() is called, the user is ready to go offline.

source