Detailed description of HTML5 Application Cache, html5application

Detailed description of HTML5 Application Cache, html5application
What is Application Cache?

HTML5 introduces the application caching technology, which means that web applications can be cached and used without a network. By creating a cache manifest file, you can easily create offline applications.

Application Cache has three advantages:

① Offline browsing

② Increase page loading speed

③ Reduce server pressure

In addition, the main browsers support Application Cache, which does not affect the program even if it is not supported.

Offline Storage Technology

HTML5 proposes two offline storage technologies: localstorage and Application Cache, which have their own Application scenarios. The traditional offline storage technology is Cookie.

After practice, our task localstorage should store some non-critical ajax data for the icing on the cake;

Application Cache is used to store static resources. It is still a icing on the cake;

However, cookies can only store a small segment of text (4096 bytes). Therefore, they cannot store big data. This is one of the differences between cookies and the preceding caching technology, because HTTP is stateless, the server needs an identifier string to identify whether the request comes from the same server. This task is completed by cookie. This text is transmitted between the server and the browser each time, to verify the user's permissions.

Therefore, the Application Cache Application scenarios are different, so they are used differently.

Application Cache Overview

Application Cache is used in two aspects:

① The server needs to maintain a manifest list

② You only need a simple setting on the browser.

Here is an example:
Cache manifestcache: # Slow storage of style1.css1.jpg 01. jshttp: // localhost/applicationcache/02. jshttp: // localhost/applicationcache/zepto. jsNETWORK: # 4.jpg FALLBACK: # The standby resource to be accessed after access to the cache fails. The first is the access source, and the second is the replacement file *. html/offline.html2.jpg/3.jpg
First, I reported an error:
 Application Cache Error event: Manifest fetch failed (404)
The cause of this error is that the manifest file needs to be configured with the correct MIME-type, that is, "text/cache-manifest ". It must be configured on the web server. Different servers are different.

\APPLICATIONCACHE    01.js    02.js    1.jpg    2.jpg    3.jpg    4.jpg    demo.appcache    index.html    style1.css    style2.css    web.config    zepto.js
In this way, the application can be used offline. Even if the network is disconnected, the files can still be accessed.

It is worth noting that, for example, if/index.html is not included here, it will save "applicationcache/plugin". In fact, this plugin index.html
The manifest file can be divided into three parts: cache manifest-files listed under this title will be cached after the first download-files listed under this title need to be connected to the server, and will not be cached FALLBACK-the files listed under this title stipulate that the page will be rolled back when the page cannot be accessed (such as the 404 page)

HTML5 defines several event points, but we generally do not take the initiative to use js to operate on anything. In most cases, we simply rely on the processing of browsers.
Size Limit
The Application Cache size is limited to 5 MB. Here is a test:

As shown in, when the two css files still exceed 5 MB
Document was loaded from Application Cache with manifest http://localhost/applicationcache/demo.appcacheindex.html:1 Application Cache Checking eventindex.html:6 GET http://localhost/applicationcache/style2.css net::ERR_FAILEDindex.html:1 Application Cache NoUpdate eventindex.html:11 GET http://localhost/applicationcache/2.jpg net::ERR_FAILEDindex.html:12 GET http://localhost/applicationcache/3.jpg net::ERR_FAILED
As shown in, style2 cannot be cached. What problems does this cause?
For example, if Channel A maintains its own Application Cache and channel B maintains its own Cache, if Channel A reaches A peak value, all the caches of channel B will become invalid, therefore:
We recommend that you use Application Cache to store public resources instead of business resources.
Some Problems
For the update mechanism, when the manifest is updated for the first time, the browser still uses expired resources because the page loading has started or even completed, and the cache update has not been completed; when the Application Cache is updated, the browser does not use new resources for this time. In this case, the window. reload event is executed in the update event.
window.applicationCache.addEventListener("updateready", function(){    window.location.reload()});
As you can see from the previous example, the cached file is not just a display definition file. For example, the applicationcache in the previous example may save index.html as the ing data and contain demo. the appcache file is often not updated online when a file is updated. In this case, modify the manifest configuration file to update the file.
For example, we will change the code here:
If you do not update demo.appcacheat at this time, it will not be updated. The reason is that index.html is cached and the check is still the original manifest list.
Manage your manifest list on each page, which means that the common configuration is configured on page. common is also configured on js and B pages. js, which means that after page a is updated, if the manifest of page B is not changed, page B still reads files of the old version, which is reasonable but also a waste, public pages are required for processing.
Summary
In terms of availability and ease of use, Application Cache is worth using, but it is best to Cache static resources. It takes more effort to implement offline applications!
Reference: http://www.w3school.com.cn/html5/html_5_app_cache.asp