HTML5 application cache
What is the Application Cache?
HTML5 introduces application caching, which means web applications can be cached and accessed without an Internet connection.
Application caching brings three advantages to the application:
1. Offline browsing - users can use them when the app is offline
2. Speed - cached resources load faster
3. Reduce server load - The browser will only download updated or changed resources from the server.
HTML5, by creating a cache manifest file, makes it easy to create offline versions of web apps.
Internet Explorer 10, Firefox, Chrome, Safari, and Opera support application caching.
HTML5 Cache Manifest instance
The following example shows an HTML document with a cache manifest (for offline browsing):
Cache Manifest basics
To enable application caching, include the manifest attribute in the document's <html> tag:
Each page that specifies a manifest is cached when the user accesses it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).
The suggested file extension for the manifest file is: ".appcache".
Note that the manifest file needs to be configured with the correct MIME-type, which is "text/cache-manifest". Must be configured on the web server.
The manifest file is a simple text file that tells the browser what is being cached (and what is not cached).
The manifest file can be divided into three parts:
CACHE MANIFEST - Files listed under this heading will be cached after first download
NETWORK - The files listed under this heading need to be connected to the server and will not be cached
FALLBACK - The files listed under this heading specify the fallback page (such as a 404 page) when the page is inaccessible.
The first line, CACHE MANIFEST, is required:
The following NETWORK section states that the file "login.php" is never cached and is not available when offline:
An asterisk can be used to indicate that all other resources/files require an internet connection:
The following FALLBACK section states that if an Internet connection cannot be established, replace all files in the /html5/ directory with "offline.html":
Note : The first URI is a resource and the second is a substitute.
Once the app is cached, it will remain cached until:
User clears browser cache
The manifest file has been modified (see the tips below)
Update the app cache by the program
Instance - complete Manifest file
# 2012-02-21 v1.0.0
Description of application caching
Please pay attention to the contents of the cache.
Once the file is cached, the browser will continue to display the cached version, even if you modified the file on the server. In order to ensure that the browser updates the cache, you need to update the manifest file.
Note: Browsers may have different capacity limits for cached data (some browser settings are limited to 5MB per site).