When the user is not connected to the Internet, the site or application can be accessed normally, and the cache file on the user's machine is updated when the user is connected to the Internet.
principle:
HTML5 offline storage is based on a newly created .appcache file caching mechanism (not a storage technology). Through the parsing list on this file, offline storage of resources
, these resources will be stored like cookies. Later, when the network is offline, the browser will
display the page based on the data stored offline .
how to use:
(1) Create a manifest file with the same name as html, and then add a manifest attribute to the head of the page as shown below.
(2) Write offline storage resources in the following cache.manifest file.
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
CACHE: Indicates the list of resources that need to be stored offline. Since the page containing the manifest file will be automatically stored offline, there is no need to list the page itself
.
NETWORK: It means that the resources listed under it can only be accessed when online, and they will not be stored offline, so these
resources cannot be used offline . However, if there is the same resource in CACHE and NETWORK, then this resource will still be stored offline, which means that
CACHE has a higher priority.
FALLBACK: Indicates that if access to the first resource fails, then use the second resource to replace it. For example, the above file means that if access to
any resource in the root directory fails, then go to offline.html.
(3) When offline, operate window.applicationCache to perform offline caching.
How to update the cache:
(1) Update the manifest file
(2) Operate via javascript
(3) Clear the browser cache
Precautions:
(1) The browser's limit on the capacity of cached data may be different (the limit set by some browsers is 5MB per site).
(2) If the manifest file or one of the files listed inside cannot be downloaded normally, the entire update process will fail and the browser will continue to use all the old caches.
(3) The html quoting the manifest must be of the same source as the manifest file and under the same domain.
(4) The resources in FALLBACK must be the same source as the manifest file.
(5) When a resource is cached, the browser directly requests this absolute path and will also access the resource in the cache.
(6) Even if the manifest attribute is not set for other pages in the site, the requested resource will be accessed from the cache if it is in the cache.
(7) When the manifest file changes, the resource request itself will also trigger an update.