HTML5 application caching to implement offline Web pages or applications

HTML5 the difference between the application cache and the browser cache.
(some) browsers proactively save their own cached files to speed up Web site loading. However, to implement browser caching 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 one site. Only one error message is received. With offline Web applications, 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 HTML5 application caching.
Implementing the HTML5 application cache is simple, takes three steps, and does not require any APIs. Only need to tell the browser needs offline cached files, and the server and Web page to do some simple settings can be achieved.

• Create a Cache.manifest file and make sure that the file has the correct content
• Set content types on the server
• All HTML files point to Cache.manifest
First we need to create a file called Cache.manifest, with Notepad under the Windows platform (as well as other Ides). The contents of the document are as follows:

CACHE MANIFEST
#v1-2013-09-09

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

Network: *
Where cache: The next section is to list the files we need cached. Network: You can then specify the online whitelist, which lists the files that we don't want to store offline, because their content is usually meant to be accessed on the Internet. In addition, we can use shortcuts in this section: wildcard *. This tells the browser that the application server gets any files or URLs that are not mentioned in the display section. It is important to note that the annotation v1 in the above example is necessary. The browser will update the application cache only if the Cache.manifest file changes. If you want to change the cached resources, you must modify the contents of the 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 with is to fix the version number (ie v*).

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

If you're 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:

The issues to be noted:

• Each HTML page of the site must set the manifest attribute of the HTML element. Be sure to do so;
• In your entire Web application, there can be only one cache.manifest file (recommended in the site root directory);
• Some browsers (such as ie8-) do not support HTML5 offline caching;