HTML5 application caching


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

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 benefits to apps:

  1. Offline browsing - users can use them when the app is offline

  2. Speed ​​- Cached resources load faster

  3. Reduce server load - The browser will only download updated or changed resources from the server.

Browser support

Internet Explorer

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

HTML5 Cache Manifest Example

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

Example

<!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="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="#" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

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 File

Manifest files are simple text files that tell the browser what is cached (and what is not cached).

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 specify the fallback page when the page is inaccessible (such as a 404 page)

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

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

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.

NETWORK

The following NETWORK section specifies that the file "login.php" is never 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 an Internet connection cannot be established, all files in the /html5/ directory are replaced with "offline.html":

FALLBACK:
/html/ /offline.html

Note: The first URI is the resource, the second is the fallback.

Update Cache

Once an app is cached, it remains 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

RemarkTips:The lines starting with "#" are comment lines, but they can also be used for 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 your 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).