Category Archives: HTML5

Cache manifests and Firefox

Posted on

20 March 2011

by Andrew Ramsden

I’ve been playing with offline web applications this afternoon. Generally, it’s pretty straightforward:

  1. Reference your manifest file in the <html> tag of each page.
  2. Fill out your .manifest file with the relevant resources you want to be cached and available offline.
  3. Configure your server to serve .manifest files at text/cache-manifest.

Most browsers picked this up fine (tested: Opera 11, Chrome 7, Mobile Safari iOS 4.3), but unfortunately I ran into…

Firefox issues

Firefox (tested: 3.6.13 and 4.0b11) refused to pull resources back from appCache—even though it reported successfully caching 175kB of data—or request any resources that weren’t cached. Firefox just presented the plain HTML for each pages without loading images, stylesheets, scripts or any other assets.

After much searching and trial and error, I came across a recommendation on stackoverflow to use http://* within the NETWORK section of the manifest for the sake of Firefox, and sure enough…

It works!

Final code samples as follows…

HTML (/index.html)

<!DOCTYPE HTML>
<html manifest="/path/to/my.manifest">
<body>
...
</body>
</html>

Manifest (/path/to/my.manifest)

CACHE MANIFEST
#ver0.08

CACHE:
images/bg-noise-tile.png
images/site-name-bg.png
images/menu-bar-divide.png
# etc ...

NETWORK:
http://*
*

Apache configuration (/.htaccess)

# Ensure manifests are served using the correct mime type
AddType text/cache-manifest .manifest

Thank you

Thanks to dalibor for pointing out that http://* is required for Firefox.

One other handy resource is Mark Pilgrim‘s Let’s take this offline, and if it had mentioned http://* it would have been perfect!

Posted in

Leave a comment