Principle and implementation of HTML5 offline storage

Find an introduction to the offline cache, feeling more thorough than previously seen explanations, the new knowledge points are recorded as follows:

Everyone knows that Web apps are accessed through a browser, so it's not possible to use apps offline. Some of the resources in the Web app do not change frequently, and you do not need to send requests to the server every time. At this time the emergence of the offline cache is particularly prominent. Let's go. The files that need to be stored offline are listed in a manifest configuration file. Jiangzi can also use the app when offline.

How to use

Just add a manifest attribute to the head and it's OK.

1 <! DOCTYPE html>2 
The Cache.manifest file is then written in the following way:
CACHE manifest#v0.11cache:js/app.jscss/style.cssnetwork:resourse/logo.pngfallback://offline.html
Code Description:
The manifest of offline storage is generally made up of three parts:
1.CACHE: Represents a list of resources that need to be stored offline, since pages containing manifest files will be automatically stored offline, so there is no need to include the page itself.
2.NETWORK: The resources listed below it can only be accessed online, they will not be stored offline, so they cannot be used offline. However, if there is an identical resource in the cache and network, the resource is stored offline, which means that the cache has a higher priority.
3.FALLBACK: If access to the first resource fails, then use the second resource to replace him, such as the above file indicates that if any of the resources in the root directory fails, then access to offline.html.
Updated on 2016.9.23
Objective:
With HTML5, you can easily create an offline version of your Web app by creating a cache manifest file.
HTML5 introduces application caching, which means that Web apps can be cached and accessed without a network.
Application caching brings three benefits to your app:
Offline Browsing-users can use them when they are offline.
Speed-the resources that have been cached are loaded faster.
Reduce server load-The browser will download only the changed resources from the server.
Principles and environment
As mentioned above, the offline storage of HTML5 is based on a new .appcache file  解析清单  , and through the offline storage resources on the file, these resources will be stored as cookies. Then, when the network is offline, the browser will display the page with data that is stored offline.
Like cookies, HTML5 's offline storage also requires a server environment.
Here is a gadget-simple IIS server, put it in the project directory, double-click Run to simulate the server environment.
Link: http://pan.baidu.com/s/1jG86UV0 Password: ja9h
Parse List
Before you start, you need to know manifest what to write about (that is .appcache , the file) 解析清单 .

 
 

  
  
 
   
The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).
 
   
The manifest file can be divided into three parts:
 
   
 
    
Cache MANIFEST-Files listed under this heading will be cached after the first download
 
    
NETWORK-Files listed under this heading require a connection to the server and are not cached
 
    
FALLBACK-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)
 
   
 
   
In the case of online, every time the user agent visits the page, he will read the manifest once. If the change is found, reload the resources in the entire list.
 
  
 
 
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
1 CACHE manifest/theme.css/logo.gif/main.js
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.
NETWORK
 
 

  
  
 
   
Whitelist, use the wildcard character "*". Will enter the open state of the white list. In this state. All URLs that do not appear in the relevant cache zone are used by default with the HTTP-related cache header policy.
 
  
 
 
The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:
1 NETWORK:login.asp
You can use * to indicate that all other resources/files require an Internet connection:
NETWORK: *
FALLBACK
The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html":
allback:/html5//404.html
Note: The first URI is a resource and the second is a substitute.
Update cache
Once the app is cached, it remains cached until the following happens:

 
 

  
  
 
   
User empties browser cache
 
   
Manifest file is modified
 
   
App Cache updated by program
 
  
 
 
Demo
case/|--index.html | |--Demo.appcache | |--simple IIS server. exe | '--Image |--01.jpg '--02.jpg
Index.html
<! DOCTYPE html> 
Demo.appcache
CACHE MANIFEST #v01 image/01.jpg   network:*fallback:/
The Image folder stores the
01.jpg

02.jpg
OK, then 简易IIS服务器.exe try it out.
When IIS is turned on

When IIS shuts down (is off, the pause does not see the effect)
You can see 图片1 that the success has been shown offline, 图片2 as it does in normal situations.
Now I want to 图片2 图片1 change the position.
<body>           </body>
At this time to find the problem, HTML clearly modified why the picture has not been replaced, I am not in the demo.appcache file of the asterisk? In addition to the NETWORK CACHE MANIFEST files are used in the online mode. Data learned: the introduction of manifest pages, even if not included in the cache list, will still be cached by the user agent. 
OK, so I'll .appcache update the file, so I'll change the version number of the head #v02 . Refresh next page or no response! Re-refresh, got it! Why?
For browsers, manifest load is later than other resources. This results in a lag in the check manifest process. Found manifest change. All browsers are implemented with a silent update resource. To ensure that the next PV is applied to the update.
Through the console we were able to spy on one or two:

 
  

  
   
 
    
The first refresh, the application Cache update Readiness Events,
 
    
The second refresh will not see the effect.
 
   
 
  
Cache immediate Execution
Our products have been updated users but the second time to be able to see, so the user experience is too bad, what can be solved? Fortunately, HTML5 provides JavaScript with the relevant APIs.
API too much space to see for yourself, here I bask in the code of my test success:
1/*code1, Simple rough */2 Applicationcache.onupdateready = function () {3 Applicationcache.swapcache (); 4 location.reload (); 5}; 6/*code2, Cache common method */7//var Eventutil = {8//Addhandler:function (element, type, handler) {9//if (Element.addeventlis Tener) {ten//Element.addeventlistener (type, handler, false), one//} else if (element.attachevent) {n//Element.attachev ENT ("On" + type, handler), +//} else {//element["on" + type] = handler;15//}16//}17//};18//Eventutil.addhand Ler (Applicationcache, "Updateready", function () {//cache update and downloaded, to be effective on next entry page//Applicationcache.update (); Check that the cache manifest file is updated, PS: page load default check once. //Applicationcache.swapcache (); Swap to the new cache entry, swap the next entry to the page to take effect//location.reload (); Reload page 22//});
Code1 is generally used when the page is loaded directly, while the Code2 method can be later checked for updates.
Precautions
 
  

  
   
 
    
The capacity limit for site offline storage is 5M
 
    
If the manifest file, or one of the internal enumeration files is not downloaded properly, the entire update process will be considered a failure, the browser continues to use the old cache
 
    
The HTML that references manifest must be the same as the manifest file, under the same domain
 
    
Relative path used in manifest, relative reference is manifest file
 
    
The CACHE manifest string should be on the first line and must be
 
    
The HTML file that references the manifest file is automatically cached
 
    
The cache in the manifest file has no relation to the position order of the network,fallback, and if it is implicitly declared, it needs to be in the front
 
    
The resources in the fallback must be the same as the manifest file
 
    
When a resource is cached, the browser directly requests that the absolute path also accesses the resources in the cache.
 
    
Other pages in the site if the manifest property is not set, the requested resource is also accessed from the cache in the cache
 
    
When the manifest file changes, the resource request itself triggers the update
 
   
 
  
Article Source: http://www.codeceo.com/article/html5-cache.html
Infringement deletion
Principle and implementation of HTML5 offline storage