What is h5 offline cache? h5 manifest offline caching application (with code)

What is manifest? Manifest is a file with the suffix name minifest. The files that need to be cached are defined in the file. Browsers that support manifest will save the files locally according to the rules of the manifest file, so that even if there is no network link, Can access the page.

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:

1. Offline browsing - users can browse your complete website while offline

2. Speed ​​- The cached resources are local resources, so they load faster.

3. 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 html tag of the document:
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).

  ...


或


  ...

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

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 'master entries'.
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

Lines starting with "#" are comment lines, but can also 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.

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.

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.

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.

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

Please note: HTML files that reference manifest files will be automatically cached. So you don't need to add it to your list, but we recommend that you do.

Please note: HTTP cache headers and cache limits set on pages served over SSL will be replaced with cache manifests. Therefore, web pages served over https can run offline.

Update cache

Apps will remain cached after being offline unless one of the following occurs:

1. Cleared by user Remove the browser's data storage of your website.

2. The manifest file has been modified. Note: Updating a file listed in the manifest does not mean that the browser will re-cache the resource. The manifest file itself must be changed.

3. The application cache is updated programmatically.

Recommended related articles:

What is HTML5 offline cache Manifest_html5 tutorial skills

H5 application cache-Manifest specific introduction

The above is the detailed content of What is h5 offline cache? h5 manifest offline caching application (with code). For more information, please follow other related articles on the PHP Chinese website!