Home > Mobile Web Development > HTML5 and Browser Caching: Part 1

HTML5 and Browser Caching: Part 1

HTML5 brings us three flavours of local browser side caching to investigate:

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

Advertisements
  1. No comments yet.
  1. February 3, 2011 at 1:10 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: