HTML5 application caching
What is 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 apps:
1. Offline browsing - users can use apps when they are offline
2. Speed - cached resource loading Get faster
3. Reduce server load - the browser will only download updated or changed resources from the server.
HTML5, you can easily create an offline version of a web application by creating a cache manifest file.
Browser support
##HTML5 Cache Manifest ExampleThe following example shows an HTML document with a cache manifest (for offline browsing):
<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>
Cache Manifest Basics To enable application caching, include the manifest attribute in the document's <html> tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Each page with a specified manifest will be cached when the user accesses it. If the manifest attribute is not specified, the page will not be cached (unless it is specified directly in the manifest file).
The recommended file extension for manifest files is: ".appcache".
Please note that the manifest file needs to be configured with the correct MIME-type, that is, "text/cache-manifest". Must be configured on the web server.
Manifest files
Manifest files are simple text files that tell the browser what is cached (and what is not) content).
Manifest files can be divided into three sections:
CACHE MANIFEST - Files listed under this heading will be cached after the first download
NETWORK - The files listed under this heading require a connection to the server and will not be cached
- ##FALLBACK - The files listed under this heading require a connection to the page Fallback page when inaccessible (such as 404 page)
##CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST/theme.css/logo. gif
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file loads, the browser downloads these three files from the root directory of the website. Then, whenever the user disconnects from the Internet, these resources are still available.
/main.js
NETWORK
The following NETWORK section specifies that the file "login.php" will never be cached and is not available offline:
NETWORK:
login.php
An asterisk can be used to indicate that all other resources/files require an Internet connection:
NETWORK:
*
FALLBACK
The following FALLBACK subsection specifies that if If the Internet connection cannot be established, replace all files in the /html5/ directory with "offline.html":
FALLBACK:
/html/ /offline.html
Note: The first URI is the resource, the second one is the substitute.
Update cache
Once the app is cached, it It will remain cached until the following occurs:
The user clears the browser cache
The manifest file is modified (see tips below)
Update application cache by program
Example - complete Manifest file
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
##Tips : Lines beginning with "#" are comment lines, but can serve other purposes. The application's cache is updated when its manifest file changes. If you edit an image, or modify a JavaScript function, these changes will not be re-cached. Updating the date and version number in the comment line is a way to cause the browser to re-cache the file.
Instructions on application caching
Please pay attention to the contents of the 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 that the browser updates its cache, you need to update your manifest file. Note: Browsers may have different capacity limits for cached data (some browsers set a limit of 5MB per site).