HTML5 Application Cache
Using HTML5, you can easily create offline versions of web applications by creating a cache manifest file.
Note: The manifest technology has been deprecated by web standards and is no longer recommended for use.
What is Application Cache?
HTML5 introduced application caching, which means web applications can be cached and accessed without an internet connection.
Application caching offers three advantages:
- Offline browsing - Users can use the application when offline.
- Speed - Cached resources load faster.
- Reduced server load - Browsers will only download updated or changed resources from the server.
Browser Support
Internet Explorer 10, Firefox, Chrome, Safari, and Opera support application caching.
HTML5 Cache Manifest Example
The following example shows an HTML document with a cache manifest (for offline browsing):
Example
Cache Manifest Basics
To enable application caching, include the manifest attribute in the document's <html> tag:
Each page that specifies a manifest will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless directly specified in the manifest file).
The recommended file extension for the manifest file is: ".appcache".
Manifest File
The manifest file is a simple text file that tells the browser what to cache (and what not to cache).
The manifest file can be divided into three sections:
- CACHE MANIFEST - Files listed under this header will be cached after their first download.
- NETWORK - Files listed under this header require a connection to the server and will not be cached.
- FALLBACK - Files listed under this header specify fallback pages if a page is inaccessible (e.g., a 404 page).
CACHE MANIFEST
The first line, CACHE MANIFEST, is mandatory:
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. After the manifest file is loaded, the browser will download these three files from the website's root directory. Then, regardless of when the user disconnects from the internet, these resources will still be available.
NETWORK
The following NETWORK section specifies that the file "login.php" will never be cached and will not be available offline:
An asterisk can be used to indicate that all other resources/files require an internet connection:
FALLBACK
The following FALLBACK section specifies that if an internet connection cannot be established, "offline.html" will replace all files in the /html5/ directory:
Note: The first URI is the resource, the second is the substitute.
Updating the Cache
Once the application is cached, it will remain cached until one of the following happens:
- The user clears the browser cache.
- The manifest file is modified (see the note below).
- The application cache is updated programmatically.
Example - Complete Manifest File
Tip: Lines starting with "#" are comment lines, but they can serve other purposes as well. The application cache will be updated when its manifest file changes. Editing an image or modifying a JavaScript function will not trigger a re-cache. Updating the date and version number in the comment lines is a way to make the browser re-cache the files.
Notes on Application Cache
Be mindful of what you cache.
Once a file is cached, the browser will continue to display the cached version even if you modify the file on the server. To ensure the browser updates the cache, you need to update the manifest file.
Note: Browser limits on cache data capacity may vary (some browsers set a limit of 5MB per site).