All browsers have their own caching mechanisms, but those mechanisms are unreliable and difficult to control, and may often be bothered by browser cache problems when you do Web development. HTML5 solves some problems through the Applicationcache interface and makes offline storage possible, so that your web app can be accessed offline by the user.
This technique clearly has at least three benefits:
How do I implement offline file storage?
Your server has to support html5! first. Yes, it looks like the "My server does not support DIV+CSS" joke that was previously said in the CSS Forest group. But I am serious to tell you that to achieve offline storage applications, you do need server support! Let me take a closer look at HTML5 's offline file storage application What is required for your code, you need to refer to a manifest file in the HTML tag of the page via the manifest property to make your app cacheable. Simply put, the manifest file is a text file that lists the list of files needed for offline access to the application (note: The page that references the manifest file is cached regardless of whether you have listed it), but not only. The code looks like this:
Of course, this manifest file path can be used with absolute and relative paths, and can even refer to manifest files on other servers. The file corresponding to the Mime-type should be text/cache-manifest, so you need to configure the server to send the corresponding MIME type information, the server configuration is not within the scope of the discussion, please yourself to understand it. The next thing to look at is the structure of the manifest file, its structure is simple, let's take a look at the following example:
MANIFESTxml/html Code copy content to clipboardThis is the simplest form of a MANIFEST file, as mentioned earlier, the file lists the list of files that need to be cached, the cache MANIFEST in the first row is required, and each site has 5MB of space to store the data. If the files listed in the manifest file or file cannot be loaded, the entire cache update process will not work and the browser will use the last successful cache. As I said earlier, the manifest file is not just a list of files to cache, so what else does it do? Let's take a look at a slightly more complicated example:
MANIFEST
xml/html Code copy content to clipboardExperienced students must be able to see that the # is used to annotate a line, but it also has a small effect. The Web app's cache is updated only if the manifest file is modified, so if you just modify the cached file, the user's local cache will not be updated, but you can modify the manifest file to tell the browser that it needs to update the cache. Using this, you can write a file version of this comment as in the example above:
xml/html Code copy content to clipboardThere are three benefits to this writing:
As you can see, the manifest file has three nodes, each of which has the following meanings:
CACHE:
This is the default entry for the manifest file, and the files listed after this entry (or files written directly after the cache manifest) are cached when they are downloaded locally
NETWORK:
Optionally, the files listed later in this section require access to the network, even if the user accesses the server offline and skips the cache directly.
FALLBACK:
Optional, used to specify the callback page when the resource is unreachable. Each row consists of two URIs, the first is the resource file Uri, and the second is the callback page URI.
Note: These sections described above are not sequential, and can appear multiple times in the same manifest
So far, you should know how to implement offline file storage, only three steps: 1, configure the server manifest file MIME type, 2, write manifest file; 3, Reference the written manifest file in the manifest property of the HTML tag of the page.
How do I update my offline storage?
You do, even if you unplug the network cable you can also access the page you make. So you start to enrich your page, modify JavaScript code and CSS to achieve a more stunning page effect, and then upload them to the server, you will find that: even if you refresh the page to explode, clear the history of access to the record will not see the new page you want to effect. That's because you haven't updated the HTML5 offline storage file at all. Now the question is how do I update the HTML5 offline cache? Here are three things you can do:
The first two ways is very simple, self-toss it. Let's look at the third, first you need to know about the relevant API, detailed go to view: http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
The following Applicationcache and its several key properties and methods are briefly introduced:
The relationship between the Applicationcache object and the cache host corresponds to one by one, and the Applicationcache property of the Window object returns the Applicationcache object of the active document that is associated with the Window object. When the status property is obtained, it returns the state of the current Applicationcache, which has the following States:
C + + Code copy content to clipboardIf the Update method is called, the browser user agent must invoke the app cache download process in the background, and if the Swapcache method is called, the browser user agent performs the following steps:
Assuming that you have written the demo page of the offline file store, you can check the status of the current page cache by following the code:
JavaScript Code to copy content to clipboardThe implementation of an update is probably like this: First call Applicationcache.update () allows the browser to start trying to update, if your manifest file is updated (as mentioned earlier, modified version number) When Applicationcache.status is Updateready, you can call Applicationcache.swapcache () to update the old cache to new.
JavaScript Code to copy content to clipboardYes, the update process can be very simple, but a good application without fault-tolerant processing, like Ajax technology, you need to monitor the update process, handle a variety of exceptions or prompt waiting state to make your application stronger, the user experience is better, So you need to understand the events triggered by the Applicationcache update process, which are: Onchecking,onerror,onnoupdate,ondownloading,onprogress,onupdateready, Oncached and Onobsolete. Listen to the code of the event you should also be pro, assuming you want to handle the update error, you can write:
JavaScript Code to copy content to clipboardEither the manifest file or the resource file download fails, the entire update process terminates, and the browser uses the latest cache. For more information about the event, go to: http://www.whatwg.org/specs/web-apps/current-work/#event-handlers
After a period of testing, I recommend that you do experiments under Chrome, because the implementation of Firefox is like excrement, there is this function is smelly! , and finally presents an offline app Demo: Meatballs ' Neighbors
Offline storage Getting Started basics
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
