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
.manifestfile with the relevant resources you want to be cached and available offline.
- Configure your server to serve
Most browsers picked this up fine (tested: Opera 11, Chrome 7, Mobile Safari iOS 4.3), but unfortunately I ran into…
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…
Final code samples as follows…
<!DOCTYPE HTML> <html manifest="/path/to/my.manifest"> <body> ... </body> </html>
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 (
# Ensure manifests are served using the correct mime type AddType text/cache-manifest .manifest