Explain the use of manifest cache in HTML5

Time:2021-12-1

origin
The web pages before HTML5 have no connection and must be connected to the Internet to access. This is actually a feature of the web. In fact, it is not a big problem for the PC era. However, in the era of mobile Internet, the location of device terminals is no longer fixed and depends on wireless signals. The reliability of the network becomes lower. For example, when you sit on a train and pass a tunnel (15 minutes), you can’t access the website, This does great harm to the web, such as the ECMAScript collection, which is designed for reading.

HTML5 introduces the cache manifest file. So what is cache manifest? I’ll talk about it next.

What is cache manifest
Firstly, manifest is a file with the suffix “manifest”. 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 they can access the page without network links.

After we correctly configure the app cache for the first time, when we visit the application again, the browser will first check whether the manifest file has changed. If there is any change, the corresponding changes will be updated. At the same time, the app cache in the browser will be changed. If there is no change, the resources of the app cache will be returned directly. The basic process is as follows.

Characteristics of manifest
Offline browsing: users can browse website content offline.

Faster speed: because the data is stored locally, the speed will be faster

Reduce the load on the server: the browser will only download the resources that have changed on the server.

Browser support
All major browsers support application caching, except Internet Explorer. The answer given by caniuse is shown in the figure below.

How to use
HTML adds a new manifest attribute, which can be used to specify the manifest file of the current page.

Create a manifest file with the same name as HTML. For example, if the page is index.html, you can create an index.manifest file, and then add the following attributes to the HTML tag of index.html:

XML/HTML CodeCopy contents to clipboard
  1. <html lang=“en” manifest=“index.manifest”>  

Manifest file
Next, let’s talk about the details of the manifest in detail. The code structure of a typical manifest file is as follows:

CACHE MANIFEST#version 1.3CACHE:    test.cssNETWORK:*
The basic format of the manifest file is three segments: cache, network, and fallback, where network and fallback are optional.

The first line of cache manifest is in fixed format and must be written in front.

Comments begin with # numbers. Generally, a version number is written on the second line to change the role of the manifest when the cached file is updated. It can be version number, timestamp or MD5 code.

Cache: (required)
Identify which files need to be cached, which can be relative paths or absolute paths.

a.csshttp://yanhaijing.com/a.css
Network: (optional)

This part is to bypass the cache and read the file directly. You can use the wildcard *.

The following code “login. ASP” will never be cached and will not be available offline:

NETWORK:login.asp
An asterisk can be used to indicate that all other resources / files require an Internet connection:

Network: * ###fallback: (optional)
A fallback page is specified, which will be used by the browser when the resource is inaccessible. Each record in this paragraph lists two URIs – the first represents a resource and the second represents a fallback page. Both URIs must use relative paths and have the same origin as the manifest file. Wildcards can be used.

In the following example, if the Internet connection cannot be established, replace all files in the / HTML5 / directory with “404. HTML”.

FALLBACK:/html5/ /404.html
In the following example, “404. HTML” is used instead of all files.

FALLBACK:*.html /404.html
How to update cache
There are three ways to update the cache:

(1) Update manifest file

(2) Operate through JavaScript

(3) Clear browser cache

Adding or deleting files to the manifest can update the cache. If we change JS without adding or deleting, the version number in the comments in the previous example can be used to update the manifest file.

The method of JS operating offline cache is introduced in HTML5. The following JS can manually update the local cache.

window.applicationCache.update();
If the user clears the browser cache (manually or with some other tools), the file will be downloaded again.

matters needing attention
The browser’s capacity limit for cached data may be different (the limit set by some browsers is 5MB per site).

If the manifest file or one of the internal listed files cannot be downloaded normally, the whole update process will fail, and the browser will continue to use the old cache.

The HTML referencing the manifest must be homologous with the manifest file and in the same domain.

The resources in fallback must be homologous to the manifest file.

When a resource is cached, the browser directly requests this absolute path and will also access the resources in the cache.

Even if the manifest attribute is not set for other pages in the site, the requested resources will be accessed from the cache if they are in the cache.

When the manifest file changes, the resource request itself triggers an update.

Automation tools
The cache part of the manifest file cannot use wildcards and must be specified manually, which is too incomprehensible. A large number of files become manual work. The purpose of the grunt manifest introduced here is to automatically generate the manifest file. Grunt manifest depends on grunt. Grunt is an automatic build tool. If you don’t know about grunt, please move here.

The following command can install the grunt manifest and add it to the dependent file.

Copy code

The code is as follows:

npm install grunt-manifest –save-dev

The following code, you can load the grunt manifest in the grunt, and then use it.

Copy code

The code is as follows:

grunt.loadNpmTasks(‘grunt-manifest’);

A typical configuration file using grunt manifest is as follows:

Copy code

The code is as follows:

</p>
<p>grunt.initConfig({
manifest: {
generate: {
options: {
basePath: “../”,
cache: [“js/app.js”, “css/style.css”]
network: [“http://*”, “https://*”],
fallback: [“/ /offline.html”],
exclude: [“js/jquery.min.js”],
preferOnline: true,
verbose: true,
timestamp: true
},
src: [
“some_files/*.html”,
“js/*.min.js”,
“css/*.css”
],
dest: “index.manifest”
}
}
});

Options defines some custom parameters for generating the manifest, SRC is the file to be generated, and dest is the output file.

There are many parameters under options. The main parameters are as follows:

Basepath sets the root directory of the access file

Cache add cache files manually

Network add network files manually

Fallback add fallback file manually

The exclude setting does not add files to the cache

Does verbose add copyright information

Timestamp whether to add timestamp

Example

To use the manifest cache, we first need to write a manifest file. This file has strict format requirements. Here is an example

Copy code

The code is as follows:

</p>
<p>CACHE MANIFEST
#I am a comment. This file is called test.manifest
CACHE:
/test.css
/test.js

This is a simple manifest file. At the beginning, it must be “cache manifest” to declare that this is a manifest file. The following “cache:” is the operation type, and the next two files are the files used by the operation type “cache:” according to the path, indicating that these files need to be cached. Of course, there is more than cache, which will be discussed later. Let’s talk about the issues you are most concerned about first. How to use this manifest file?
To use the manifest file, just add an attribute “manifest =” manifest file path “to the HTML tag of the page, such as

XML/HTML CodeCopy contents to clipboard
  1. <html manifest=“test.manifest”>  
  2. <head>  
  3.   <link href=“test.css” rel=“stylesheet” />  
  4.   <script src=“test.js”></script>  
  5. </head>  
  6. <body>  
  7.   <div>Cobalt hypocarbonate</div>  
  8. <body>  
  9. </html>  

This page uses the manifest file written above. When we open this page with chrome, we can find the working information of the manifest in the console.

From this information, we can see that the two files we set to cache are cached. The page that references the manifest is also cached. This is very important. This is the mechanism of manifest. In addition to caching the set files, it also caches the current page referencing the manifest file (you can’t close it if you want to). Therefore, it is inconvenient to use, which requires attention.
In addition, things after the manifest cache are updated only when the manifest file changes (it seems that the MD5 of the file changes). When the cached file is updated, the browser will not get the new file. In other words, test.css has been cached on that page just now. Now I modify test.css, and the page will not change. Unless I modify the content of the manifest file itself (note that it is the content, not the modification time). Generally, in order to update the cache, you can put the modification time in the comments to update it. I won’t take a screenshot of this. It’s so troublesome.
Having said these questions, let’s go back to the way manifest itself is written. In addition to “cache:” above, there are several operation types. The following are the types and descriptions of these operations
Cache: set the following files as cache
Network: set the following file as not cached (unable to set its own page)
Fallback: use another file when the following file is wrong or does not exist
Settings: you can set fast or prefer online modes
Cache is to set the cache, as mentioned earlier.
Network is set not to cache. Because the mechanism of manifest is to store the whole page (or web application) locally. Therefore, all resources used by the current page must have a setting. If it is not set, it will not be found after page caching, so you usually need to use network to match all resources that do not need caching, as shown below.

Copy code

The code is as follows:

CACHE MANIFEST
NETWORK:
*

Fallback does not exist. It is replaced by another file. The following is an example

Copy code

The code is as follows:

CACHE MANIFEST
#test.manifest
FALLBACK:
/x.css /test.css

XML/HTML CodeCopy contents to clipboard
  1. <html manifest=“test.manifest”>  
  2. <head>  
  3.   <link href=“x.css” rel=“stylesheet” />  
  4. </head>  
  5. </html>  

Since x.css does not exist, test.css is used to replace it when caching.
Settings can be set to two modes. The default is fast. But I didn’t feel any difference between the two modes in my test, so I won’t say it for the time being.
These are the most basic things of the manifest cache. Another big problem is the warning of Firefox. When using manifest, a warning will appear under Firefox.

This is the most painful part of this thing, so now let’s understand it a little and don’t study it in depth. After these problems are solved, let’s look back at the goods. In fact, the function of manifest is to localize web applications. If you only do “web application localization”, it can be used. But this thing suck up in other ways. So the current project will not consider using this painful thing. So many of the above are just entry-level tests, and there are still a lot of things to test. However, since it is not available now, it will not be studied for the time being.