Application Cache with manifest file

This test page includes a manifest file, which explicitly loads the page itself, the associated JavaScript and the general stylesheet into the browser's application cache. Once loaded for the first time, you can try disconnecting your machine from the network, emptying your regular cache, and reloading the page...it should still display offline.

For demonstration purposes, the page's manifest also specifies a stylesheet that is only available from the network and turns this paragraph dark grey with white text. Once offline, with an empty regular cache, this stylesheet will not be loaded, and this paragraph will be red with white text.

Lastly, the manifest lists the image here on the left to be cached. The other image won't be available when offline, but because of the FALLBACK specified for any files in the images/ location, it will instead be replaced with a placeholder (which, for this reason, is also cached automatically).

manifest file

CACHE MANIFEST
# version 0.1
index.html
appCache.js
styles.css
images/keep-calm.jpg

NETWORK:
onlineonly.css

FALLBACK:
images/ images/not-offline.png

window.applicationCache events

To illustrate the various event handlers associated with the window.applicationCache object, this message window shows what's happening behind the scenes. You'll notice that the first time this page loads, the various resources referenced in the manifest are downloaded. On subsequent loads (even when offline), these are pulled directly from the application cache.