Follow these three steps for making an Offline Web Application:
1. Create a cache.manifest file.
2. Ensure that the manifest file is served with the correct content type.
3. Point all your HTML files to the cache manifest.
The cache.manifest File
file is a text file that adheres to a certain format. There should be only one cache.manifest
file for the entire application.
The manifest tells the browser when and what to get from offline, from the Web, or to fall back onto if assets are missing. Once the manifest is loaded or updated, it triggers an update on the applicationCache object.
Here’s an example of a simple cache.manifest file:
- The first line of the cache.manifest file must read CACHE MANIFEST.
- After this line, we enter CACHE:
- List all the files we’d like to store on our visitor’s hard drive.
To make any files that should never be stored offline should be placed under NETWORK section. Any files specified in the NETWORK section will always be reloaded when the user is online, and will never be available offline.
We can use a shortcut: the wildcard *. This asterisk tells the browser that any files or URLs not mentioned in the explicit section (and therefore not stored in the application cache) should be fetched from the server.
- FALLBACK section
This section can also be specified, which allows us to define what the user will see when a resource fail to load.
Each line in the fallback section requires two entries.
i.The first is the file for which
you want to provide fallback content. You can specify either a specific file, or a
partial path like media/, which would refer to any file located in the media folder.
ii.The second entry is what you would like to display in case the file specified fails
We can load a still image of the film’s first frame, if the the files are unable to load.
we can specify /, which will match any page on the site. If any page fails to load or not available from the application cache, we’ll fall back to the offline.html page.
Every URL in your website must be accounted for in the cache.manifest file, even URLs that you simply link to. If it’s unaccounted for in the manifest file, that resource
or URL will fail to load, even if you’re online. To avoid this problem, you should use the * in the NETWORK section.
You can also add comments to your cache.manifest file by beginning a line with #.
# version 0.1