11.46. HTML5 application cache

With HTML5, you can easily create an offline version of a web application by creating a cache manifest file.

11.46.1. What is application caching? ¶

HTML5 introduces application caching, which means that web applications can be cached and accessed when there is no Internet connection.

Application caching brings three advantages to applications:

Offline browsing-users can use them when applying offline
Speed-cached resources load faster
Reduce server load-the browser will download only updated or changed resources from the server.

11.46.2. Browser support ¶

Internet Explorer 10, Firefox, Chrome, Safari and Opera support application caching.

11.46.3. HTML5 Cache Manifest instance ¶

The following example shows an HTML document with cache manifest (for offline browsing):

Example ¶

   document content......

11.46.4. Cache Manifest Foundation ¶

To enable application caching, include it in the < html > tag of the document manifest attributes:

...

Each designated manifest pages are cached when the user accesses them If not specified manifest property, the page will not be cached unless in the manifest the page is specified directly in the file).

manifest the recommended file extension for the file is:”.appcache”。

Remark Attention please, manifest the file needs to be configured correctly MIME-type that is, “text/cache-manifest”. Must be configured on the web server.

11.46.5. Manifest file ¶

manifest a file is a simple text file that tells the browser what is cached (and what is not cached).

manifest the file can be divided into three parts:

CACHE MANIFEST -the 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 file listed under this heading specifies the fallback page (such as 404 page) when the page is inaccessible.

CACHE MANIFEST ¶

First line CACHE MANIFEST is required:

CACHE MANIFEST /theme.css /logo.gif /main.js 

Above. manifest the file lists three resources: a CSS file, a GIF image, and a JavaScript file. When manifest after the files are loaded, the browser downloads the three files from the root directory of the website. Then, whenever the user is disconnected from the Internet, these resources are still available.

NETWORK ¶

Below. NETWORK the section states that the file “login.php” is never cached and is not available offline:

NETWORK: login.php 

You can use an asterisk to indicate that all other resources / files require an Internet connection:

NETWORK: \* 

FALLBACK ¶

The following FALLBACK section states that if an Internet connection cannot be established, replace all files in the / html5/ directory with “offline.html”:

FALLBACK: /html/ /offline.html 

Note: the first URI is a resource and the second is a backup.

11.46.6. Update cache ¶

Once the application is cached, it maintains the cache until the following occurs:

User empties browser cache
manifest the file has been modified (see hint below)
The application cache is updated by the 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 

Remark Tip: comment lines begin with “#”, but can also be used for other purposes. The cache of the application will be found in its manifest The file is updated when it is changed. If you edit a picture 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 get the browser to re-cache the file.

11.46.7. Instructions on application caching ¶

Please pay attention to the content of the cache.

Once the file is cached, the browser continues to display the cached version, even if you modify the file on the server. To ensure that the browser updates the cache, you need to update the manifest Files.

Note: browsers may have different capacity limits for cached data (the limit set by some browsers is 5MB per site).