Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use manifest cache in HTML5". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use manifest cache in HTML5" can help you solve your doubts.

Origin

The web pages before html5 are all connectionless and must be accessed on the Internet. In fact, this is also a feature of web. In fact, this is not a big problem for PC. But in the era of mobile Internet, the location of the device terminal is no longer fixed and relies on wireless signals, so the reliability of the network becomes reduced. For example, when you sit on a train and go through a tunnel (15 minutes), you will not be able to access the website, which will do great harm to web. For example, for pages such as "ecmascript Collection", which are created for reading.

Html5 introduces the cache manifest file. So what is cache manifest? we'll talk about it next.

What is Cache Manifest?

First of all, manifest is a file with the suffix minifest, which defines the files that need to be cached in the file. Browsers that support manifest will save the file locally according to the rules of the manifest file, so that the page can be accessed without a network link.

When we configure app cache correctly 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, it will update the corresponding file, and at the same time change the app cache in the browser. If there is no change, the app cache resources will be returned directly. The basic process is like this.

Characteristics of Manifest

Offline browsing: users can browse the content of the website offline.

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

Lighten the load on the server: the browser will only download 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 has added a manifest attribute that can be used to specify the manifest file for 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 Code copies content to the clipboard

Manifest file

Let's go into the details of manifest. A typical manifest file code structure looks like this:

CACHE MANIFEST#version 1.3CACHE: test.cssNETWORK:*

Manifest file, the basic format is three paragraphs: CACHE, NETWORK, and FALLBACK, where NETWORK and FALLBACK are optional.

The first line CACHE MANIFEST is in a fixed format and must be written in front of it.

Comments that begin with the # sign are usually written with a version number on the second line to change the role of manifest when cached files are updated, such as version number, timestamp, MD5 code, and so on.

CACHE: (required)

Identify which files need to be cached, either relative or absolute.

A.css http://yanhaijing.com/a.css

NETWORK: (optional)

This section is the file to be read directly around the cache, using the wildcard character *.

The following code "login.asp" is never cached and is not available offline:

NETWORK:login.asp

You can use an asterisk to indicate that all other resources / files require an Internet connection:

NETWORK:* # # FALLBACK: (optional)

A backup page is specified that will be used by the browser when the resource is not accessible. Each record in this paragraph lists two URI-, the first representing the resource and the second representing the backup page. Both URI must use relative paths and have the same origin as the manifest file. You can use wildcards.

In the following example, if an Internet connection cannot be established, replace all files in the / html5/ directory with "404.html".

FALLBACK:/html5/ / 404.html

In the following example, replace all files with "404.html".

FALLBACK:*.html / 404.html

How to update the cache

You can update the cache in the following three ways:

(1) Update manifest file

(2) operate through javascript

(3) clear browser cache

Add or delete files to manifest, you can update the cache, if we change the js, but not add or delete, the version number in the comments in the previous example can be well used to update the manifest file.

The method of js operation for offline cache is introduced in html5. The following js can update the local cache manually.

Window.applicationCache.update ()

If the user clears the browser cache (manually or with some other tool), the file will be downloaded again.

Matters needing attention

Browsers may have different capacity limits for cached data (the limit set by some browsers is 5MB per site).

If the manifest file, or one of the files listed internally, does not download properly, the entire update process will fail and the browser will continue to use the old cache.

The html that references manifest must have the same origin as the manifest file and be in the same domain.

Resources in FALLBACK must be of the same origin as the manifest file.

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

Even if the manifest property is not set for other pages in the site, the requested resource is accessed from the cache if it is in the cache.

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

Automation tool

Cache part of the manifest file can not use wildcards, must be specified manually, this is too incomprehensible, files, a lot of physical work, the grunt-manifest introduced here can automatically generate manifest files for the purpose. Grunt-manifest relies on grunt,grunt as an automated build tool, so if you don't know grunt, please move here.

The following command installs grunt-manifest and adds it to the dependent file.

Copy the code

The code is as follows:

Npm install grunt-manifest-save-dev

The following code loads grunt-manifest in grunt and then uses it.

Copy the code

The code is as follows:

Grunt.loadNpmTasks ('grunt-manifest')

A typical configuration file for using grunt-manifest is as follows:

Copy the code

The code is as follows:

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"

}

}

});

Where options defines some custom parameters for generating 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 files

Cache manually add cache files

Network manually add network files

Fallback manually add backup files

Exclude sets files that are not added to cache

Whether to add copyright information to verbose

Whether to add a timestamp to 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 the code

The code is as follows:

CACHE MANIFEST

# I am the comment, this file is called test.manifest

CACHE:

/ test.css

/ test.js

This is a simple manifest file. At first, it must be "CACHE MANIFEST" to declare that this is an manifest file. The latter "CACHE:" is the operation type, and the next two files are the files acted by the operation type "CACHE:" by path, indicating that these files need to be cached. Of course, CACHE is not the only type of operation, which will be discussed later. First of all, let's talk about the issues that people are most concerned about. How to use this manifest file?

To use manifest files, you can simply add the attribute "manifest=" manifest file path "" to the HTML tag of the page, such as

XML/HTML Code copies content to the clipboard

Cobalt subcarbonate

This page uses the manifest file written above. If we open this page with Chrome, we can find the work information of the manifest in the console.

As you can see from this information, both of the files we set up to be cached have been cached. And the page that references manifest is also cached. This is important. This is the mechanism of manifest. In addition to caching the set files, it also caches pages that currently reference manifest files (even if you want to). Therefore, it is very inconvenient to use, which requires attention.

In addition, things after manifest caching are updated only when the manifest file changes (it seems to be updated when the md5 of the file changes). The browser will not get the new file when the cached file is updated. In other words, the test.css has been cached on that page, and now that I have modified the test.css, the page will not change at all. Unless I modify the contents of the manifest file itself (note that it is the content, not the modification time). In general, 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 troublesome.

Having said these questions, let's go back to the way manifest itself is written. In addition to the "CACHE:" above, there are several types of operations. Here are the types and descriptions of these operations

CACHE: set the following files to cache

NETWORK: set the following files to be not cached (cannot set their own pages)

FALLBACK: use another file when the following file is wrong or does not exist

SETTINGS: you can set either fast or prefer-online mode

CACHE is to set the cache, which has been said before.

NETWORK is set not to cache. Because the mechanism of manifest is to store the entire page (or Web application) locally. Therefore, all resources used by the current page must have a setting. If you don't set it, you won't find it after the page cache, so you usually need to use NETWORK to match all resources that don't need to be cached, as shown below.

Copy the code

The code is as follows:

CACHE MANIFEST

NETWORK:

*

FALLBACK does not exist is to use another file instead, here is an example

Copy the code

The code is as follows:

CACHE MANIFEST

# test.manifest

FALLBACK:

/ x.css / test.css

XML/HTML Code copies content to the clipboard

Since x.css does not exist, test.css is used to replace it when caching.

SETTINGS can be set to two modes, and the default is fast. But I didn't feel any difference between the two modes in my test, so I won't talk about it for the time being.

These are the most basic things about manifest caching, and another big problem is Firefox's warning. When using manifest, a warning appears under Firefox.

After reading this, the article "how to use manifest cache in HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.