HTML5 Application Cache
Use HTML5, by creating a cache manifest file, you can easily create offline versions of web applications.
What is the application cache (Application Cache)?
HTML5 introduces application cache, which means that web applications can be cached, and can be accessed without an Internet connection.
Application cache application brings three advantages:
- Offline browsing - users can use them in the application offline
- Speed - cached resources load faster
- Reduce server load - the browser will only download updated or changed resources from the server.
Browser Support
Internet Explorer 10, Firefox, Chrome, Safari and Opera support the application cache.
HTML5 Cache Manifest examples
The following example shows the HTML document with a cache manifest (for offline viewing):
Examples
<html manifest="demo .appcache ">
<body>
文档内容......
</body>
</html>
try it"
Cache Manifest basis
To enable application cache, the label contains the manifest attribute in the document <html>:
<html manifest="demo .appcache ">
...
</html>
Each manifest specified page when users access their will be cached. If the manifest attribute is not specified, the page will not be cached (unless directly specify the page in the manifest file).
Suggested manifest file extension: ". Appcache".
Please note, manifest files need to configure the correct MIME-type, namely "text / cache-manifest". You must be configured on the web server.
Manifest file
manifest file is a simple text file that tells the browser contents of the cache (and does not cache content).
manifest files can be divided into three parts:
- CACHE MANIFEST - in the heading of this document will be cached after the first download
- NETWORK - In this title the following documents need to connect to the server, and will not be cached
- FALLBACK - In this listed under the heading documents rollback pages (eg page 404) when the page is inaccessible
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
/theme.css
/logo.gif
/main.js
The above manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of your site. Then, whenever the user disconnects from the Internet, these resources are still available.
NETWORK
The following provisions of subsections NETWORK file "login.php" is never cached and available offline is unavailable:
login.php
You can use an asterisk to indicate all other other resources / files require an Internet connection:
*
FALLBACK
FALLBACK sections defined below If you can not establish an Internet connection, with "offline.html" alternative / html5 / directory of all files:
/html/ /offline.html
Note: The first URI is the resource, the second is a substitute.
refresh cache
Once the application is cached, it will remain cached until the following occurs:
- Users Clear your browser cache
- manifest file is modified (see tips below)
- By the program to update the application cache
Example - Complete Manifest file
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
Tip: The "#" at the beginning of the comment line, but also to meet other purposes.Caching application will be updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes will not be re-cached. Update comment line is a date and version number of the browser to re-cache file approach.
About application cache instructions
Please pay attention to the contents of the cache.
Once the files are cached, the browser will continue to display the cached version, even if you edit the file on the server. To make sure your browser to update the cache, you need to update the manifest file.
Note: The browser capacity limit for cached data may not be the same (some restrictions browser settings is that each site 5MB).