Home > Developer > JavaScript
HTML5 offline storage and HTML5 offline storage
When a user is not connected to the Internet, the user can normally access the site or application and update the cached files on the user's machine when the user is connected to the Internet.
Principle: HTML5 offline storage is based on a new one. the cache mechanism of appcache files (not the storage technology). By using the resolution list on this file to store offline resources, these resources will be stored like cookies. Then, when the network is offline, the browser displays the page through offline stored data.
How to use:
1. Add a manifest attribute to the page header as below;
<!DOCTYPE HTML>
2. Write offline storage resources in the cache. manifest file;CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
How does the browser parse manifest?
3. In the offline status, perform the window. applicationCache Operation to implement the requirement.How does the browser manage and load offline resources? We need to discuss it in two cases.
When the browser is online, it finds that the html header has the manifest attribute, and it will request the manifest file. If it is the first time to access the app, then, the browser downloads corresponding resources and stores them offline based on the content of the manifest file. If you have accessed the app and the resources are stored offline, the browser loads the page using the offline resources. Then, the browser compares the new manifest file with the old manifest file, if the file is not changed, no operations will be performed. If the file is changed, the resources in the file will be downloaded again and stored offline.
When it is offline, the browser directly uses the resources stored offline.
There are several issues to note in this process.
If the server updates offline resources, you must update the manifest file before these resources can be re-downloaded by the browser. If only the resources are updated but the manifest file is not updated, the browser does not re-download resources, that is, it still uses the original offline storage resources.
Be careful when caching the manifest file, because you may update the manifest file, however, the http cache rule tells the browser that the locally cached manifest file has not expired. In this case, the browser still uses the original manifest file, so it is best not to set the cache for the manifest file.
When the browser downloads Resources in the manifest file, it will download all resources at a time. If a resource fails to be downloaded for some reason, all updates will fail, the browser will still use the original resources.
After the resource is updated, the new resource takes effect only after you open the app next time. If you need the resource to take effect immediately, you can usewindow.applicationCache.swapCache()The reason for this phenomenon is that the browser first loads the page with offline resources, and then checks whether the manifest has been updated, so it takes effect until the next page is opened.
For detailed usage, see [interesting HTML5: offline storage] (http://segmentfault.com/a/1190000000732617) HTML5 offline storage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
