I’ve been playing with offline web applications this afternoon. Generally, it’s pretty straightforward:
- Reference your manifest file in the
<html>
tag of each page. - Fill out your
.manifest
file with the relevant resources you want to be cached and available offline. - Configure your server to serve
.manifest
files attext/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!