Detailed description of manifest Cache Usage in HTML5, html5manifest
This article describes how to use the manifest cache in HTML5. It also describes some related automation tools. For more information, see
Origin
Web pages before html5 are non-connected and can only be accessed through the Internet. This is actually a feature of the web. In fact, PC is not a big problem in the era, but in the mobile Internet era, the device terminal location is no longer fixed and relies on wireless signals, reducing the network reliability. For example, if you sit on a train and pass through a tunnel (15 minutes), you will not be able to access the website, this is very harmful to the web, for example, for reading pages such as the ecmascript collection.
Html5 introduces the cache manifest file. So what is cache manifest.
What is Cache Manifest?
First, manifest is a file suffixed with minifest. It defines the files to be cached in the file. browsers that support manifest will save the file locally according to the rules of the manifest file, in this way, you can access the page without a network connection.
After we correctly configure the app cache for the first time, when we access 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 is changed. If there is no change, the app cache resources will be directly returned. The basic process is as follows.
Features of Manifest
Offline browsing: users can browse website content offline.
Faster speed: because data is stored locally, the speed is faster.
Server Load Reduction: the browser only downloads the changed resources on the server.
Browser support
All mainstream browsers support application caching, except Internet Explorer. Shows the answer provided by caniuse.
How to Use
A new manifest attribute is added to html to specify the manifest file on the current page.
Add the following attributes to the html Tag of tags:
Copy XML/HTML Code to clipboardManifest File
Next, let's talk about the details of manifest. The code structure of a typical manifest file is as follows:
Cache manifest # version 1.3 CACHE: test.css NETWORK :*
The basic format of the manifest file is three sections: CACHE, NETWORK, and FALLBACK. NETWORK and FALLBACK are optional.
The first line of cache manifest is in a fixed format and must be prefixed.
A comment starts with #. a version number is usually written in the second line to change the manifest when the cached file is updated. It can be a version number, timestamp or md5 code.
CACHE: (required)
Identifies which files need to be cached, which can be relative or absolute paths.
A.css http://yanhaijing.com/a.css
NETWORK: (optional)
This part is the file to be read directly without the cache. wildcard * can be used *.
The following code "login. asp" will never be cached and is unavailable offline:
NETWORK: login. asp
You can use asterisks to indicate that all other resources/files require Internet connection:
NETWORK: * ### FALLBACK :( optional)
A backup page is specified. When resources cannot be accessed, the browser will use the page. Each record in this section lists two Uris-the first one indicates the resource, and the second one indicates the backup page. Both Uris must use relative paths and are the same as the list files. Wildcard characters can be used.
In the following example, if you cannot establish an Internet connection, use limit 404.html to replace all files in the/html5/directory.
FALLBACK:/html5 // 404.html
In the following example, the replacement of all files is 404.html.
FALLBACK: *. html/404.html
How to update Cache
You can update the cache in the following three ways:
(1) Update the manifest File
(2) javascript operations
(3) Clear browser cache
To add or delete a file to or from a manifest file, you can update the cache. if Javascript is changed but not added or deleted, the version number in the preceding example can be used to update the manifest file.
Html5 introduces the js offline cache operation method. The following js can manually update the local cache.
Window. applicationCache. update ();
If you clear the browser cache (manually or using other tools), the file will be downloaded again.
Notes
The browser may not have the same size limit on the cached data (Some browsers set a limit of 5 MB for each site ).
If a manifest file or an internal file cannot be downloaded normally, the update process will fail and the browser will continue to use the old cache.
The html that references manifest must be the same as the manifest file in the same domain.
The resources in FALLBACK must be the same as the manifest file.
When a resource is cached, the browser directly requests this absolute path to access the resources in the cache.
Even if the manifest attribute is not set for other pages on the site, the requested resources are also accessed from the cache.
When the manifest file changes, the resource request itself also triggers an update.
Automated Tools
In the cache part of the manifest file, wildcards cannot be used and must be manually specified. This is too confusing. If there are more than one file, it becomes a physical activity, the purpose of grunt-manifest to automatically generate a manifest file is described here. Grunt-manifest depends on grunt. grunt is an automated build tool. If you do not know grunt, go here.
Run the following command to install grunt-manifest and add it to the dependent file.
The Code is as follows: npm install grunt-manifest -- save-dev
The following code can load grunt-manifest in grunt and then use it.
The Code is as follows: grunt. loadNpmTasks ('grunt-manifest ');
A typical configuration file using grunt-manifest is as follows:
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 custom parameters for generating manifest. src is the file to be generated and dest is the output file.
There are many parameters in options. The main parameters are as follows:
BasePath
Manually add cache files
Manually add network files
Fallback manually add backup files
Exclude settings do not add files to the cache
Whether verbose adds copyright information
Whether timestamp is added
Example
To use the manifest cache, we first need to write a manifest file. This file has strict format requirements. The following is an example.
The Code is as follows: </p> <p> CACHE MANIFEST
# I'm a comment. The file name is 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 a manifest file. The following "CACHE:" indicates the operation type, and the other two files follow the path "CACHE:" indicates that these files need to be cached. Of course, the operation type is more than CACHE. Let's talk about the most important issues. How to use this manifest file?
To use a manifest file, you only need to add the "manifest =" manifest file path "attribute to the HTML tag of the page. For example
This page uses the manifest file written above. We can use Chrome to open this page and find the work information of this manifest in the console.
From this information, we can see that the two files to be cached are cached. The page that references manifest is also cached. This is very important. This is the manifest mechanism. In addition to caching the set files, it also caches the pages that currently reference the manifest files (you cannot close them if you want ). Therefore, it is inconvenient to use.
In addition, what is cached after manifest will be updated only when the manifest file changes (it seems that the md5 of this file is updated ). When the cached file is updated, the browser does not obtain the new file. In other words, the page has been slowly stored in test.css. now I have modified test.css, and the page will not change. Unless I modify the content of the manifest file (note the content, not the modification time ). Generally, to update the cache, you can add the modification time in the comment to update it. I can't do this. It's troublesome.
Now let's look at the manifest statement. In addition to the above "CACHE:", there are several operation types. The following are the operation types and descriptions.
CACHE: sets the file to CACHE.
NETWORK: Leave the following files Uncached (you cannot set your own page)
FALLBACK: Use another file when an error occurs or the file does not exist.
SETTINGS: You can set the fast or prefer-online modes.
CACHE is used to set the CACHE.
NETWORK is set to not cache. Manifest stores the entire page (or Web application) locally. Therefore, all resources used on the current page must have a setting. If this parameter is not set, the page cannot be cached. Therefore, you need to use NETWORK to match all resources that do not need to be cached, as shown in the following figure.
The Code is as follows: CACHE MANIFEST
NETWORK:
*
If FALLBACK does not exist, it is replaced by another file. The following is an example.
The Code is as follows: CACHE MANIFEST
# Test. manifest
FALLBACK:
/X.css/test.css
Because x.cssdoes not exist, test.css is replaced by test.css.
SETTINGS can be set to two modes. The default mode is fast. But I didn't feel the difference between the two models in my test, so I won't talk about it for the moment.
These are the most basic things of manifest cache, and a major problem is Firefox's warning. When manifest is used, Firefox will receive a warning.
This is the most painful part of this thing, so now I want to know a little bit about it and do not study it in depth. After that, all these problems will be solved. Let's look back at this product. In fact, manifest is used to localize Web applications. It can be used only for "Web application localization. However, this is not powerful in other aspects. Therefore, none of the current projects will consider using this troublesome item. The above is only an entry-level test, and there are many things to test. However, because I cannot use it now, I will not study it for the moment.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
