HTML5 how to do application cache? Brief description of off-line storage technology

This chapter we introduce to you how to do application cache with HTML5? Brief description of offline storage technology. Have a certain reference value, the need for friends can refer to, I hope to help you.

Before HTML5, we had to connect to the Web to access the page. But with the rise of mobile internet, the location of device terminals is not fixed. While mobile devices rely on wireless signals, wireless network reliability is not stable, such as in the tunnel or signal strength is weak, unable to access the site, which is undoubtedly bad for the user experience, so HTML5 in the offline cache (Applicationcache) to solve the problem.

One: What is offline caching
HTML5 offline Cache aka Applicationcache, as one of the new features of HTML5, a simple understanding is that the first time after loading the data cache, without clearing the cache, the next time no network can be loaded, used in the static data of the Web or game more useful. Of course, HTML5 new features are not supported by all browsers, and offline caching is the same. Anyway IE9 (including) and IE9 below are currently not supported. If used on the mobile side, it should all be supported. It is also easier to detect whether offline caching is supported.

<script>    if (window.applicationcache) {        alert ("Support offline Caching");    }    else{        alert ("Offline cache not supported");    } </script>

Second: How to use

HTML5 offline cache, which is a buffer from the browser's cache, to save data in this cache, use a description file (. manifest) to list the resources that need to be downloaded and cached.

1. Introduction of Manifest files

<! DOCTYPE html>
2. After the introduction, the next step is to write the Test.mainfest file code.

The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).

The manifest file can be divided into three parts:
①cache MANIFEST-Files listed under this heading will be cached after the first download
②network-Files listed under this heading require a connection to the server and are not cached
③fallback-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)

The complete code

The cache manifest//must start with this version 1.0//best definition, update only when the version number is modified cache:    m.png    test.js    test.cssnetwork:    * FALLBACK    online.html offline.html
The manifest file needs to be configured with the correct mime-type, which is "text/cache-manifest", which is configured on the Web server.

To parse:
A line that begins with # represents a comment. The caches below are all cached files, and network indicates that each time a request is from the web and then cached, the specified file always requests the latest from the network. FALLBACK: If the specified file is not found, it will be redirected to the new address. The specifications are all uppercase.

3. Dynamic control update via JS

The app will remain cached until it is offline, unless one of the following occurs:
The user clears the browser's data store for your site.
The manifest file has been modified.

Note: Updating a file listed in the manifest does not imply that the browser will re-cache the resource. The manifest file itself must be changed.

1) Cache Status: The Window.applicationcache object is the programmatic way to access the browser's app cache. Its Status property can be used to view the current state of the cache.

The values of the Applicationcache.status are as follows:
0 = = = Not Cached
1 = = = Idle (cache is up-to-date)
2 = = = Check In
3 = = = Download in
4 = = = Update ready
5 = = = Cache Expires

var appCache = Window.applicationcache; 　　　　Switch (appcache.status) {case appcache.uncached://uncached = = 0 return ' uncached '; 　　Break 　　　　Case Appcache.idle://idle = 1 return ' idle '; 　　Break 　　　　Case appcache.checking://CHECKING = = 2 return ' CHECKING '; 　　Break 　　　　Case appcache.downloading://downloading = = 3 return ' downloading '; 　　Break 　　　　Case Appcache.updateready://Updateready = = 4 return ' Updateready '; 　　Break 　　　　Case Appcache.obsolete://OBSOLETE = = 5 return ' OBSOLETE '; 　　Break 　　　　Default:return ' uknown CACHE STATUS '; 　　Break };
2) Active Update cache: Applicationcache.update ()

<script>    //Use the timer to automatically update the cache    setinterval (function () {applicationcache.update () at a certain time            ;    },50000 );</script>
To update the cache programmatically, call Applicationcache.update () first. This action will attempt to update the user's cache (provided that the manifest file has been changed). Finally, when Applicationcache.status is in the Updateready state, call Applicationcache.swapcache () to replace the original cache with the new cache.

var appCache = Window.applicationcache;appcache.update (); Attempt to update the user ' s cache....if (appcache.status = = Window.applicationCache.UPDATEREADY) {Appcache.swapcache ();  The fetch was successful, swap in the new cache.
4. A simple offline cache application

Build a Web project AppCache, including four files:
Appcache_offline.html


Manifest file: test.manifest

CACHE manifest#version 1.0cache:test.css
Test.css

Output {font:2em Sans-serif;}
Test.js

SetTimeout (function () {document.getElementById (' Test '). Value = new Date ();}, 1000);