In recent days, WeX5 small series with some mobile application practitioners chatted, many are ready to embrace the full HTML5. But WeX5 small compiled also found that there are still a considerable part of the practitioners, still HTML5 skeptical, still reluctant to the original app technology. Small codec intentionally forwarded share below, HTML5 technology rise, from off-line storage technology is visible .
(text) with the development of web apps, more and more mobile apps are being developed using HTML5, and in addition to some hybrid apps, other parts of the Web app are accessed directly through the browser. Browser access requires networking to send requests, which makes it impossible for users to use the app offline, while some of the resources in the Web app do not change frequently and do not need to make requests to the server every time, for these reasons, HTML5 proposes a new feature: Offline storage. With offline storage, we can list the files that need to be stored offline locally in a manifest configuration file, so that users can use the app even when offline.
HTML5 Offline storage This concept is similar to a cookie, except that it is designed for larger capacity storage. The storage limit of the cookie is within 4k, compared to the session storage has a larger storage space, but as to the specific size, this should refer to the specific implementation of the browser manufacturer.
How to useFirst of all to explain the use of offline storage, it is very simple to say. Just add a property to the head of your page as follows manifest .
<!DOCTYPE HTML>
cache.manifest The file is then written in such a way as follows:
CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK:/ /offline.html
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.
So how does the browser manage and load the offline resources? There are two kinds of situations that need to be discussed here.
In the case of online, the browser found that the HTML header has the Manifest property, it will request the manifest file, if it is the first time to access the app, then the browser will be based on the contents of manifest files to download the appropriate resources and offline storage. If the app has been accessed and the resource has been stored offline, the browser will load the page with an offline resource, then the browser will compare the new manifest file with the old manifest file, and if the file does not change, do nothing, if the file changes, Then the resources in the file will be downloaded again and stored offline.
Offline, the browser directly uses resources that are stored offline.
There are several issues to be aware of in this process.
If the server updates the offline resources, the manifest files must be updated before they can be re-downloaded by the browser, and if the resources are updated only without updating the manifest file, the browser will not re-download the resources, that is, the original offline storage resources.
You need to be very careful about caching manifest files, because there may be a situation where you update the manifest file, but the HTTP cache rule tells the browser that the local 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 the resources in the manifest file, it downloads all the resources at once, and if a resource fails to download for some reason, the browser will still use the original resource if it fails.
After updating the resources, the new resources need to be opened the next time the app will take effect, if the need for resources to take effect immediately, then you can use the window.applicationCache.swapCache() method to make it effective, this phenomenon occurs because the browser will first use the offline resources to load the page, and then to check whether manifest is updated , so you need to open the page next time to take effect.
If you say so much, you might as well try it yourself. It is necessary to note that if you need to see the effect of offline storage, then you need to deploy your Web page to the server, whether local or production environment server, open the Web page through local files is not able to experience offline storage.
I ran a local node server on my computer, accessed via localhost. My manifest file goes to the following:
CACHE MANIFEST#v0.11CACHE:lib/ionic/js/ionic.bundle.jslib/angular-ui-router.jsjs/app.jslib/ionic/css/ionic.csscss/style.cssviews/login_header.htmlviews/login.htmllib/ionic/fonts/ionicons.ttf?v=1.5.2lib/ionic/fonts/ionicons.woff?v=1.5.2NETWORK:lib/ionic/fonts/ionicons.ttf?v=1.5.2lib/ionic/fonts/ionicons.woff?v=1.5.2css/style.css
Then we can visit the Web page to see the effect.
The browser downloads the appropriate resources based on the manifest file and caches them locally.
Then, let's try what happens offline, which is the play for offline storage. Refresh the page by setting up offline status via Chrome.
Because it is offline, the browser cannot access the manifest file, but the Web page can still be accessed normally, which is the power of offline storage.
In order to feel the role of manifest, we now do an additional first step, we can update some of the resources on the server, such as I just modified app.js；然后设置Chrome为在线状态， can be found, once again through the browser access, the updated resources are not effective, not in the browser access to appear;
Now continue to do the second step, we update the next manifest file, such as the version to 0.12，此时因为 update the manifest file, through the browser access, the offline resources can be updated on the browser to take effect.
There are several events for offline storage objects in HTML5 that window.applicationCache require our attention:
1. oncached : This event is triggered when the offline resource store is complete, and this is the document saying that I did not trigger this event when I tested it on chrome.
2. Span style= "FONT-SIZE:14PX;" >onchecking 3. ondownloading : This event is triggered when the browser starts downloading offline resources
4. onprogress : This event is triggered when the browser downloads each resource, and is triggered once per download.
5. onupdateready This event is triggered when the browser is finished updating the offline resource
6. onnoupdate
Text Reference article:
Https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
Http://diveintohtml5.info/offline.html
I as a reprint of the WeX5 of this article, a liberal arts students, editing the format of this article actually quickly learned! WeX5 Small series and thus even more do not understand, so powerful and simple, why a lot of people still in HTML5 this matter still indecisive?
"As simple as possible, more convenient," This is the eternal direction of technological change.
The flood of HTML5 is coming or coming, can't stop.
Scare Cry native app HTML5 offline storage technology, but surprisingly easy! "Low-Key reprint"
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
