HTML 5 application caching-HTML Tutorial-php.cn

HTML 5 application caching

黄舟

Release： 2016-12-27 14:48:43

Original

1319 people have browsed it

HTML 5 Application Cache

Introduction

With HTML5, you can easily create an offline version of a 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:

Offline browsing - users can use the app while they are offline

Speed - Cached resources load faster

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

Browser Support

Application caching is supported by all major browsers except Internet Explorer.

HTML5 Cache Manifest Example

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

Example

<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>

Copy after login

Cache Manifest Basics

To enable application caching, include the manifest attribute in the document's tag:

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

Copy after login

Each page with a manifest specified will be cached when the user accesses it. cache. 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 - under this heading Outgoing files require a connection to the server and will not be cached

FALLBACK - The files listed under this heading specify the fallback page (such as a 404 page) when the page cannot be accessed

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

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

Copy after login

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.asp" will never be cached and is not available offline:

NETWORK: login.asp

Copy after login

You can use asterisks to Indicates that all other resources/files require an Internet connection:

NETWORK: *

Copy after login

FALLBACK

The FALLBACK subsection below specifies that if an Internet connection cannot be established, "offline.html" in the /html5/ directory is replaced All files:

FALLBACK: /html5/ /404.html

Copy after login

Comments: The first URI is the resource, the second is the substitute.

Update cache

Once an application is cached, it will remain cached until the following occurs:

The user clears the browser cache

The manifest file is modified (See tips below)

Updating application cache by program

Example - Complete Manifest file

CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html

Copy after login

Important note: Lines starting with "#" are comments , but may also 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 cached again. Updating the date and version number in the comment line is a way to cause the browser to re-cache the file.

Notes on application caching

Please be careful about 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).

The above is the content of HTML 5 application cache. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!