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
The
cache.manifest 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:
snippet
CACHE MANIFEST
CACHE:
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
FALLBACK:
server-time.js fallback-server-time.js
NETWORK:
*
Explanation:-
- 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.
-
NETWORK Section:-
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.
Example
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.
Example
-
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
to load.
We can load a still image of the film’s first frame, if the the files are unable to load.
Example
FALLBACK:
media/ images/ford-plane-still.png
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.
FALLBACK:
media/ images/video-fallback.jpg
/ /offline.html
Note:
Note
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.
Adding Comments
You can also add comments to your cache.manifest file by beginning a line with #.
CACHE MANIFEST
# version 0.1
CACHE:
index.html
NETWORK:
*
