Shulou(Shulou.com)05/31 Report--

This article mainly explains "Application Cache instance Analysis in html5". The explanation in this article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "Application Cache instance Analysis in html5".

Offline storage technology

HTML5 proposed two major offline storage technologies: localstorage and Application Cache, both of which have their own application scenarios, and the traditional offline storage technology is Cookie.

After practice, we think that localstorage should store some non-critical ajax data to add icing on the cake.

Application Cache is still the icing on the cake when it is used to store static resources

While cookie can only save a small piece of text (4096 bytes); therefore, it cannot store big data, which is one of the differences between cookie and the above caching technology, and because HTTP is stateless, the server needs an identification string in order to distinguish whether the request comes from the same server, and this task is accomplished by cookie. This piece of text is passed between the server and the browser each time to verify the permissions of the user.

Therefore, the application scenario of Application Cache is different, so its use is not consistent.

Introduction to Application Cache

The use of Application Cache requires two aspects of work:

The ① server needs to maintain a manifest list

Only a simple setting is needed on the ② browser

Give an example to illustrate:

CACHE MANIFESTCACHE:# need caching list style1.css1.jpg01.js http://localhost/applicationcache/02.jshttp://localhost/applicationcache/zepto.jsNETWORK:# does not need caching 4.jpgFALLBACK:# access cache fails, the first is the access source, the second is the replacement file * .html / offline.html2.jpg/3.jpg

First of all, I reported a mistake here:

Application Cache Error event: Manifest fetch failed

The reason for this error is that the manifest file needs to be configured with the correct MIME-type, "text/cache-manifest". 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, it can be applied offline, and even if the network is cut off, those files can still be accessed.

There is one thing worth noting here. For example, without / index.html here, he will cache "applicationcache/". In fact, this is index.html.

The manifest file can be divided into three parts:

CACHE MANIFEST-the files listed under this heading will be cached after the first download

NETWORK-the files listed under this heading require a connection to the server and will not be cached

FALLBACK-the file listed under this heading specifies the fallback page (such as 404 page) if the page is inaccessible.

As shown in the figure, HTML5 defines several event points, but we generally don't take the initiative to use js to manipulate anything. In most cases, we rely entirely on the browser's processing.

Size limit

The size limit of Application Cache is 5m. Let me do a test here:

As shown, the two css files are still more than 5m at this time

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, style2 can no longer be cached, so what's the problem with this?

For example, Channel A maintains its own Application Cache,B channel as well as its own. At this time, if the use of Channel A reaches a peak, it will cause all caches of Channel B to become invalid, so:

It is recommended that Application Cache store public resources, not business resources.

Some questions.

As far as the update mechanism is concerned, when the manifest is updated for the first time, because the page loading has already started or even completed, and the cache update has not been completed, the browser will still use the expired resources; when the Application Cache is updated, the new resources will not be used this time, and the second time will be used. The window.reload event is executed in the update event at this time.

Window.applicationCache.addEventListener ("updateready", function () {_ window.location.reload ()})

As you can see from the above example, the cache is not only the file that displays the definition, such as applicationcache/ in the example above, the data whose index.html is mapped is saved by default, and the demo.appcache file is included. Very often, you will encounter a file update that is not always updated online. At this time, you can update it by making some changes in the manifest configuration file.

For example, let's make a change to the code here:

= >

At this time, if the demo.appcache is not updated, the cache will not be updated because the index.html is cached and the original manifest list is still detected.

Each page uniformly manages its own manifest list, which means that page an is configured with common.js,b and common.js, meaning that after page an is updated, page b still reads the old version of the file if the manifest of page b is not changed, which is reasonable but also wasteful and needs to be dealt with on public pages.

Thank you for reading, the above is the content of "Application Cache instance Analysis in html5". After the study of this article, I believe you have a deeper understanding of the problem of application cache instance analysis in html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.