HTML5 offline cache

Offline storage. We can store the documents in a local off-line in a column configuration manifest file, so that even in the case of off-line, the user can normally use those files.

First you need to add a page header manifestproperty:

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifestWriting style file, like this:

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

Offline storage manifest typically consists of three parts:

CACHE: represents a list of resources needed for offline storage, because the page that contains the manifest file will be automatically stored offline, so do not put the page itself is also listed.
NETWORK: it represents the resources listed below can only be accessed in the case of online, they will not be stored offline, you can not use these resources in offline situations. However, if there is a resource in the same CACHE and NETWORK, then the resources will still be stored offline, which means higher CACHE priority.
FALLBACK: represents the first resource if access fails, then replacing him use a second resource, such as on top of the file indicated that if access to the root directory of any resource fails, then went to visit offline.html.

The browser is how to manage the resources offline and loading it? It should be discussed in two cases:

Under 1 online, the browser html head have found the manifest attribute, it will request the manifest file, if it is the first visit app, then the browser will download the appropriate resources based on the contents of the manifest file and offline storage. If you have visited the app and offline resources have been stored, then the browser will use the resource loading pages offline, then the browser will compare the old with the new manifest file manifest file, if the file has not changed, do not do anything If the file has changed, it will re-download the file resource and offline storage.

Under 2 off-line, the browser will direct the use of offline storage resources:

This process there are several issues that need attention.

1 If the server off-line resources were updated, then you must update the manifest file these resources in order to be re-downloaded browser, if only to update the resource without updating the manifest file, the browser will not re-download resources, that is to say or use the original off-line storage resources.

2 need to be very careful about when the manifest file caching, because there may be a case that you have been updated to the manifest file, but http caching rule tells the browser local cache manifest file has not expired, the browser or this case use the original manifest file, so it is best not to set the cache manifest file.

3 browser resources in the manifest file download time, it will download all the resources, a resource if for some reason the download fails, then all of the update even if a failure, the browser will still use the original resources.

4 After updating resources, new resources needed to take effect next time you open the app, if needed resources can immediately take effect, you can use window.applicationCache.swapCache()reason to make it effective method, this phenomenon is that the browser will first use offline resource loading the page, and then go check for updates manifest, so it is necessary to take effect next time you open the page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Original: https://www.cnblogs.com/shoestrong/p/6435169.html

Guess you like

Origin www.cnblogs.com/xjy20170907/p/11609391.html