HTML5 application caching for offline Web pages or apps

HTML5 the difference between the application cache and the browser cache.
(some) browsers proactively save their own cache files to speed up site loading. But to implement a browser cache must satisfy the premise that the network must remain connected. If the network is not connected, the site cannot be opened even if the browser has enabled caching for a site. You will only receive an error message. Using an offline Web application, we can proactively tell the browser which files should be fetched or cached from the Web server and still be able to access the site while the network is offline.

How to implement the HTML5 application cache.
Implementing the HTML5 application cache is as simple as three steps and does not require any APIs. Just tell the browser that you need to cache the files offline and make some simple settings for the server and the Web page.

• Create a Cache.manifest file and make sure the file has the correct content
• Set the content type on the server
• All HTML files point to Cache.manifest
First we need to create a file named Cache.manifest, which can be used in Notepad under the Windows platform (other Ides are available as well). The contents of the file are as follows:

CACHE MANIFEST
#v1-2013-09-09

CACHE:
Index.html
Favicon.ico
Css/main.css
...

NETWORK: *
Where the cache: The following section lists the files we need to cache. NETWORK: You can then specify an online whitelist, which lists the files that we don't want to store offline, because it's often meaningful for their content (www.111cn.net) to require Internet access. In addition, in this section we can use the shortcut: wildcard character *. This tells the browser that the application server gets no files or URLs that are mentioned in the display section. It is important to note that the annotations V1 in the example above are necessary to exist. The browser does not update the app cache until the Cache.manifest file changes. If you want to change the cache resource, you must modify the contents of this file at the same time so that the browser knows that they need to update the cache. You can make any changes to the manifest file, but the best practice that everyone agrees on is the revision number (that is, v*).

Next you need to set the content type on the server:

If you are using the Apache server, add the following code to the. htaccess file:

AddType text/cache-manifest. manifest Finally, we need to point the HTML page to the manifest file. Complete this step by setting the manifest property of the HTML element in each page:

Issues to be aware of:

• Each HTML page of the site must have the manifest attribute set for the HTML element. Be sure to do so;
• There can only be one cache.manifest file in your entire site application (recommended in the root directory of the website);
• Some browsers (such as ie8-) do not support HTML5 offline caching;
From:http://www.111cn.net/wy/html5/52979.htm

HTML5 application caching for offline Web pages or apps