HTML5 Offline Cache

What is Cache?

HTML5 Application Cache (aka "App Cache") allows browers to cache remote page resources locally in order to provide an offline experience. Users who return to the cached page can continue to use and browse this content even when they are offline.

In the context of a WebWorks application, App Cache should only be used when accessing remote content. If you already have application assets (e.g. HTML, JS, CSS) embedded locally within the application, the App Cache is unecessary (and in fact does not work since the content is already localy).

Demo

Open this page from a desktop browser that supports App Cache. You should see a series of updates listed below indicating the progress of the caching events.

If this same page were to be opened from within a WebWorks application, you would not see any caching events (since this page and its corresponding resources are already local assets).

Change the network connectivity of your device, and reload this page. When the browser is online, this content should be blue. When the browser is offline, this content should be red.


More Info

How to test (BlackBerry 6):

  1. Load this page in the browser.
  2. Keep the browser application open, and switch to the home screen.
  3. Open the Manage Connections icon, and disable all connections (disable all checkboxes and save)
  4. Return to browser and refresh the page by clicking the button below

Troubleshooting:

  1. The cache manifest file must be configured on your web server to be served as a "text/cache-manifest" content type. Recommend using *.cache extensions.
  2. Make sure your web server (e.g. IIS, Apache) is delivering this MIME type over whichever domain you use (e.g. "localhost" versus "yourcomputer.localnetwork.net").

How it works:

As soon as your page starts using a cache manifest file, all cached content specified in the manifest becomes permanently cached offline. The only way to load new content is by changing the manifest file. Even if you make updates to the web content specified in the manifest file and hit refresh in you browser, you won't see any changes until you update the manifest file. The best way of managing this is have a version / timestamp value at the top of the manifest file and change that value when you want to tell your users' browsers to update their cache.
  1. Make a change to this web page
  2. Update the manifest.cache file (e.g. increase version or timestamp value)
  3. Click "Update Cache" button (or refresh the page)

How to remove items from the application cache?

  1. Remove the manifest file from the file system (e.g. rename it to something else, or delete it completely). Removing the "<html manifest="manifest.cache">" attribute is not sufficient.
  2. Refresh the page
The application cache will raise an obsolete event, and the cached data will be removed when the page is refreshed. The status should then change to UNCACHED.