Html5 offline cache details, html5 offline Cache

Html5 offline cache details, html5 offline Cache

Offline cache is one of the new Html5 features. It is easy to understand that after the first loading, data is cached. Without clearing the cache, data can be loaded without a network, web pages or games used for static data are relatively easy to use. Of course, none of Html5's new features are supported by all browsers, and the same is true for offline caching. Internet Explorer 9 (included) and Internet Explorer 9 (earlier than Internet Explorer 9) are currently not supported. It should be supported on mobile terminals. It is easy to check whether offline caching is supported.

<Script> if (window. applicationCache) {alert ("offline cache supported");} else {alert ("offline cache not supported") ;}</script>

It is easy to use.

①: First introduce the manifest file.

<! DOCTYPE html> 
②: After the introduction, the code of the test. mainfest file is compiled.
 
Parse: The line starting with # indicates the annotation. The CACHE contains cached files. NETWORK indicates that each request is sent from the NETWORK, and then cached. the specified file is always requested to be up-to-date from the NETWORK. FALLBACK: if the specified file cannot be found, it will be redirected to the new address. The specifications are in uppercase.
So far, the offline cache has been implemented, and there is no need to worry about the traffic consumption for the second visit. It is useful for static mobile phone webpages or games.
③ Cache status: the window. applicationCache object is a programmatic access method to the browser's application cache. Its status attribute can be used to view the current status of the cache.
The applicationCache. status value is as follows:
0 === not cached
1 === idle (the cache is in the latest status)
2 === checking
3 === downloading
4 === Update ready
5 === cache expiration
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; 　　}; 
④ Actively update cache: applicationCache. update ()
<Script> // use the timer to automatically update the cache at intervals. setInterval (function () {applicationCache. update () ;}, 50000); </script>
⑤: Describes cache-related events.
1. updateready event: this event is triggered when a new cache is available and the update is complete.
Example code:
ApplicationCache. addEventListener ("updateready", function () {alert ("cache Update completed") ;}, false );
2. progress event: this event is continuously triggered when a new cache is in the process of downloading. The event objects in progress include loaded and total. Loaded indicates the files already loaded. total indicates the total number of files to be updated.
ApplicationCache. addEventListener ("progress", function () {alert (applicationCache. status); // 3... 3 indicates downloading}, false );
3. Other events:
Checking event: checking
Downloading event: downloading
Updatereadey event: update complete
Obsolete event: cache expiration
Cached event: idle, the cache is in the latest status
Error Event: error
Noupdate event: Check that the update is complete and no update is required.
In addition, if your page has a cache, you can open the developer tool and view the cached data on the console.

By the way, respect originality. If you need to reprint it, please state the source.