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

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

##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
/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" 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).

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

HTML5 application caching

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]