Detailed explanation of the use of manifest cache in HTML5

This article mainly introduces the detailed explanation of the use of manifest cache in HTML5. The article also introduces some related automation tools. Friends who need it can refer to the origin.

Web pages before html5 were all connected without connections and had to be connected to the Internet to access. This is actually a feature of the web. This is actually not a big problem for PCs. However, in the era of mobile Internet, the terminal location of the device is no longer fixed and relying on wireless signals, and the reliability of the network has become less reliable. For example, sitting on a train and passing a tunnel (15 minutes), you cannot access the website, which is very harmful to the web, such as pages born for reading like "Ecmascript Collection".

html5 introduces the cache manifest file. So what is cache manifest? I will talk about it next.

First of all, manifest is a file with the suffix name minifest. In the file, the files that need to be cached are defined. The browser that supports manifest will save the file locally according to the rules of the manifest file, so that the page can be accessed without network links.

When we configure the app cache correctly for the first time, when we access the app again, the browser will first check whether there is any change in the manifest file. If there is any change, it will change the corresponding one and change the app cache in the browser. If there is no change, it will directly return the app cache resources. The basic process is like this.

Offline browsing: Users can browse website content offline.

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

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

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

HTML has added a 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, the page is index.html, then you can create an index.manifest file, and then add the following attributes to the index.html html tag: