HTML5 introduces application cache technology, which means that web applications can be cached and used without a network. By creating the Cache Manifest file, you can easily create offline applications.
The three advantages brought by Application Cache are:
① offline browse
② Increase the facial income speed of the page
③ Reduce server pressure
And the main browser is supported by supporting Application Cache. Even if it does not support
Offline storage technologyHTML5 proposes two major offline storage technology: LocalStorage and Application Cache, each with its own application scenarios; traditional and offline storage technology is Cookie.
After practice, we believe that LocalStorage should store some non -critical AJAX data and do the cake;
Application Cache is still used to store static resources, and it is still a matter of dry icing;
And cookies can only save a small paragraph text (4096 bytes); so you cannot store big data. This is one of the differences between cookies and the above cache technology. Because HTTP is not state It requires a identifier string, and this task is done by cookies. This text will pass between the server and the browser each time to verify the user's permissions.
Therefore, the application scenario of Application Cache is different, so use is not consistent.
Application Cache IntroductionApplication Cache uses two aspects:
① The server needs to maintain a manifest list
② There is only one simple setting on the browser
<html manifest = demo.appcache>
To explain the example:
Cache ManifestCache:# The list of cache style1.css1.jpg01.jshttp: //localHost/applicationCache/02.jshttp: //localhost/Application/zepto.jsNetw Ork:# 4.jpgFallback:# After the access cache fails , The resource of spare access, the first is the source of access, the second is to replace the file*.html /offline.html2.jpg/3.jpg
First of all, I reported a mistake here:
Application Cache Error Event: Manifest FETCH FAILED (404)
The reason for this error is that the Manifest file needs to configure the correct MIME-TYPE, that is, 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, you can apply it offline. Even if the Internet is disconnected at this time, those files can still be accessed
It is worth noting here. For example, there is no /index.html here. He will take the ApplicationCache/cache. In fact, this is index.html
Manifest files can be divided into three parts:
Cache Manifest -The file listed on this title will cache after the first download
Network -The files listed in this title need to be connected to the server without being cached
Fallback -The files listed on this title stipulate that the pages of retreating pages when the page cannot be accessed (such as page 404)
As shown in the figure, HTML5 defines several event points, but we generally do not actively use JS to operate something. In most cases, we can completely depend on the processing of the browser.
DimensionThe size limit of Application Cache is unified at 5m, I do a test here:
As shown, the two CSS files still exceed 5M at this time
Document was loaded from application cache with manifest http://localHost/applicationCache/demo.appcacheindex.html: 1 Application cache Checking dex.html: 6 get http://localHost/applicationCache/style2.css net :: err_fairdindex.html: 1 Application Cache Noupdate EventINDEX.HTML: 11 get http://localHost/applicationCache/2.jpg net :: err_fairdInDex.html: 12 getp: // localhost/appl icationCache/3.jpg Net :: Err_faird
As shown, style2 can no longer cache, what problems will this cause?
For example, Channel A maintains its own Application Cache, and Channel B also maintains itself. At this time, if Channel A uses a peak, it will cause all the cache of Channel B to fail, so:
It is recommended that Application Cache, store public resources, do not store business resources
Some problemsFrom the perspective of the update mechanism, when updated the manifest for the first time, because the page loading has begun or even completed, the cache update is not completed, and the browser will still use expired resources; the browser is when the Application Cache is updated. Resources will be used for the second time. At this time, the Window.reload event was executed in the update event.
Window.ApplicationCache.addeventListener (UpdateReady, Function () {Window.Location.Reload ()});From the above example, it can be known that the cache is not just the definition file, such as the ApplicationCache/time in the above example, the data of Index.html as the mapping is saved by default, and it contains the demo.appcache file. In many cases, it will encounter a file update. The online is always not updated. At this time, you can make a modification in the MANIFEST configuration file to update.
For example, we make a change here:
<html manifest = demo.appcache> => <html manifest = demo1.appcache>
At this time, if you do not make Demo.appcache updates, the cache will not be updated because index.html is cached, and the detection is still the original manifest list
Each page uniformly manage its own manifest list, which means that the page A is configured with Common.js, and the B page is also configured with Common.js, which means that after the Page is updated, if the Manifest on the B page will not be changed, the page B is still read. The old version of the document has a certain sense but also a certain waste, which requires the public page for processing.
SummarizeIn terms of availability and ease of use, the Application Cache is worth using, but it is best to cache for static resources. To truly achieve offline applications, it has to spend more effort!