English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Application Cache

Using HTML5By creating a cache manifest file, it is easy to create an offline version of a web application, introducing application caching, which means web applications can perform client-side caching and can be accessed offline without a network connection.

What is Application Cache (Application Cache)

HTML5 Provide an application caching mechanism that allows web applications to run offline. Developers can use the Application Cache (AppCache) interface to specify the resources that the browser should cache and make them available to offline users. In offline mode, even if the user clicks the refresh button, the application can still load and work normally.

Application caching brings three advantages to applications:

  • Offline Browsing - Users can use them when the application is offline

  • Speed - Cached resources load faster

  • Reduce Server Load - Browsers will only download updated or changed resources from the server.

Which Browsers Support

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

HTML5 　Cache Manifest Example

The following example demonstrates an HTML document with a cache manifest for offline browsing:

Online Example

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Document content......
	</body>
	</html>
Test and see ‹/›

Cache Manifest Basics

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

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

Each page specified with a manifest will be cached when the user accesses it. If the manifest attribute is not specified, the page will not be cached (unless the page is directly specified in the manifest file).

The recommended file extension for the manifest file is: ".appcache".

Please note that the manifest file needs to be configured with the correct MIME-type, which is "text/cache-manifest" must be configured on the web server.

Manifest File

The manifest file is a simple text file that informs the browser of the content to be cached (and not cached).

The manifest 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 files listed under this heading specify the fallback page when the page cannot be accessed (for example 404 (page)

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

CACHE MANIFEST
/style.css
/logo.png
/main.js

The manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. After the manifest file is loaded, the browser will download these three files from the root directory of the website. Then, these resources are still available regardless of whether the user is disconnected from the network.

NETWORK

The NETWORK section below 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 all other resources/All files require a network connection:

NETWORK:
*FALLBACK

The FALLBACK section below specifies that if a network connection cannot be established, "offline.html" will be used instead /html5/ All files in the directory:

FALLBACK:
/html/　/index.html

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

Update cache

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

  • The user clears the browser cache

  • The manifest file is modified (see the tips below)

  • The application cache is updated by the program

A complete Manifest file example

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html
Tip:Lines starting with "#" are comment lines, but they can also serve other purposes. The application's cache will be 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 lines is a way to make the browser re-cache the files.

Description of Application Cache

Please be aware of the content 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 the cache, you need to update the manifest file.

Note: The capacity limit for cached data may vary between browsers (some browsers set limits per site) 5MB).

HTML5 Web WorkersHTML 5 Local Database