Sample code for HTML5 manifest offline caching-H5 Tutorial-php.cn

Offline access is becoming more and more important for network-based applications. This article mainly introduces the relevant information about the sample code of HTML5 manifest offline caching. It has certain reference value. Friends in need can refer to it. I hope it will be helpful. You guys helped.

Introduction

Offline access is increasingly important for web-based applications. While all browsers have caching mechanisms, they are unreliable and may not always work as expected. HTML5 uses the ApplicationCache interface to solve some of the problems caused by offline.

Using the cache interface brings the following three advantages to your application:

Offline browsing - users can browse your complete website while offline
Speed - The cached resources are local resources, so they load faster.
Less server load - the browser will only download resources from servers that have changed.

Application Cache (also known as AppCache) allows developers to specify which files the browser should cache for offline users. Even if the user presses the refresh button while offline, your app will load and run normally.

Refer to the manifest file

To enable application caching for an application, add the manifest attribute to the document's html tag:

The manifest attribute can point to an absolute URL or a relative path, but the absolute URL must be from the same origin as the corresponding web application. The manifest file can use any file extension, but must be served with the correct MIME type (see below).

<html manifest="/cache.manifest">
  ...
</html>

Copy after login

<html manifest="http://www.example.com/example.mf">
  ...
</html>

Copy after login

You should add the manifest attribute on every page of your web app that you want to cache. If a web page does not contain the manifest attribute, the browser will not cache the page (unless the attribute is explicitly listed in the manifest file).

This means that every web page that the user browses that contains a manifest will be implicitly added to the application cache. Therefore, you don't need to list every page in your inventory.

Manifest files must be provided as text/cache-manifest MIME type. The file suffix name can be customized (.manifest is recommended), so we need to declare the file type with the .manifest suffix as text/cache-manifest on the server side.
Taking apache as an example, we need to add in httpd.conf: AddType text/cache-manifest .manifest

Manifest file structure

A simple manifest format is as follows:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

Copy after login

This example will cache four files on the web page that specifies this manifest file.

You need to pay attention to the following points:

The CACHE MANIFEST string should be on the first line and is essential.
The website's cached data size must not exceed 5 MB. However, if you're writing an app for the Chrome Web Store, you can use unlimitedStorage to remove this restriction.
If the manifest file or the resources specified in it cannot be downloaded, the entire cache update process cannot proceed. In this case, the browser will continue to use the original application cache.

Let's look at a more complex example:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached &#39;master entries&#39;.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

Copy after login

Lines starting with "#" are comment lines, but can be used for other purposes. For example, update cache

The application cache will only be updated when its manifest file changes. For example, if you modify an image resource or change a JavaScript function, those changes will not be recacheed. You must modify the manifest file itself to allow the browser to refresh the cache file. Creating comment lines with generated version numbers, file hashes, or timestamps ensures users have the latest version of your software.
You can also programmatically update the cache after a new version appears, as described in the Updating the cache section.

If the page introduces a cache manifest file, the manifest file must contain all the files required by the current page (css, js, image...), otherwise it will not be loaded, so the files that need to be cached are removed. It is recommended to add an asterisk * to the NETWORK item in the file to indicate that the list of all other files can include the following three different parts: CACHE, NETWORK and FALLBACK.

CACHE:

This is the default part of the entry. Files listed under this header (or the files immediately following CACHE MANIFEST) are explicitly cached the first time they are downloaded.

NETWORK:

The files listed under this section are whitelisted resources that need to be connected to the server. All requests for these resources bypass the cache regardless of whether the user is offline. Wildcards can be used.

FALLBACK:

This section is optional and is used to specify a fallback web page if the resource cannot be accessed. The first URI represents the resource and the second represents the fallback web page. Both URIs must be related and must have the same origin as the manifest file. Wildcards can be used. Please note: The sections can be arranged in any order, and each section can appear repeatedly in the same list.

The following list defines the "comprehensive" page (offline.html) that is displayed when a user attempts to access the root of the site offline, and also indicates that all other resources (such as those on remote sites) require an Internet connection.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Copy after login

请注意：系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中，但我们建议您这样做。

请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。

更新缓存

应用在离线后将保持缓存状态，除非发生以下某种情况：