Categories
HTML5 Mobile

mobile: cache offline apps and cache-manifest files

A manifest file indicates the browser what files are needed to run the app offline, so the browser will store them locally for when there is no internet connection.

Example, if you create demo.manifest and put it on your web root, and the content of the file is as below, the files listed will be set locally so the app can run when no internet connection available:

CACHE MANIFEST

index.html

logo.jpg

scripts/demo.js

styles/screen.css

The paths can be absolute or relative.

Then the manifest link should be added to your html document as follows:

<html manifest="demo.manifest">

This file must be served with a specific MIME type in order to be ok, here are the apache settings for it:
AddType text/cache-manifest .manifest

In addition to your apache settings, if you want to stop caching the actual “demo.manifest” file, you can do the following:

<Files offline.manifest>
ExpiresActive On
ExpiresDefault “access”
</Files>

 

You can also specify files that will always be fetch in the NETWORK section, and FALLBACK will indicate what to do if the networks is not available:

NETWORK:
logo.jpg
FALLBACK:
logo.jpg offline.jpg

Another Network / Fallback example:

NETWORK:
*
FALLBACK:
/ /offline.html

In this case, we indicate we want all the files to be pulled from the network, when the network is available, and if we have to fallback for the root file, we want to pull offline.html

Leave a Reply

Your email address will not be published. Required fields are marked *