HTML5 and Browser Caching: Part 1
HTML5 brings us three flavours of local browser side caching to investigate:
- Application Cache (uses manifest files): http://dev.w3.org/html5/spec/Overview.html#offline
- Web SQL Database: http://dev.w3.org/html5/webdatabase/
- Web Storage: http://dev.w3.org/html5/webstorage/
Part 1: Application Cache
Application Cache uses the manifest file to store a list of resources that you want to cache locally on the users browser.
The cache is updated when the manifest file is changed, independent of whether or not the resources it references have changed. For this reason the manifest file includes a version comment which can be updated to force a refresh.
The includes within the manifest file the ability to fallback to a specified alternative resource should the specified one be unavailable.
Apache Configuration
The apache used will need to be reconfigured to allow the correct mime type to be
returned for manifest files used. For example:
AddType text/cache-manifest .manifest
Would mean that all files that end in .manifest would return the cache-manifest mime type. It also needs a change to prevent the apache itself from caching the manifest file, causing problems when debugging as changes are not picked up.
# Prevent the manifest file from being cached
<Files ~ “^\.*.manifest”>
ExpiresActive On
ExpiresDefault “access”
</Files>
This marks any files ending in .manifest as expired in the apache cached so they are fetched from the server every time. This is important to ensure that when you change the manifest file these changes are picked up by the application so it can make the correct decision about updating the other resources.
Testing
If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.
The HTML file that references the manifest file is automatically cached, so any changes to it will require an update to the manifest file to be picked up.
Useful Resources
Dive into HTML5 – http://diveintohtml5.org/offline.html
Toolbar for Firefox to clear your Application Cache – http://sites.google.com/site/keigoattic/home/webrelated#TOC-Firefox-HTML5-Offline-Cache-and-Loc
