HTML5 offline cache (application cache)

HTML5 offline cache aka Application cache, is a buffer from the browser's cache, in order to save data in this cache, you can use a description file (manifest file), lists the resources to download and cache.

Manifest file

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)

Related JavaScript APIs

The core is the Applicationcache object, which has a status property that represents the current state of the app cache:

0 (uncached): No cache, no page-related app cache

1 (Idle): idle, that is, the app cache has not been updated

2 (CHECKING): Check that the profile is being downloaded and check for updates

3 (Downloading): downloaded, that is, the application cache is downloading the resource specified in the profile

4 (Updateready): Update complete, all resources have been downloaded

5 (IDLE): deprecated, i.e. the application cache profile no longer exists, so the page cannot access the app cache

Related events

Represents a change in the application cache state:

Checking: Triggered when the browser looks for updates for the app cache

Error: Triggered when an error is sent while checking for updates or downloading resources

Noupdate: Triggers when checking the description file for no changes to the file

Downloading: triggered when the app cache resource is started downloading

Progress: Continuously download and trigger during file download application cache

Updateready: Trigger on page new app cache download completed

Cached: Triggers when the application cache is fully available

Browser support

ie10+, firefox3+, safari4+, Opera10.6, Chrome, ios3.2+, Android Webkit

Precautions

1. The manifest file needs to be configured with the correct mime-type, or "text/cache-manifest", which must be configured on the Web server.

For example, Tomcat needs to modify the Web. xml file to add the following:

< mime-mapping >     < extension >manifest</extension>     <Mime-type >text/cache-manifest</mime-type></  Mime-mapping>

2. After you update the version, you must refresh it once to start the new version (where the page will be re-brushed).

So the page needs to add this JS, monitor to hear the version update, refresh the page:

function (e) {    if (applicationcache.status = = Applicationcache.updateready)               {// working with new version Resources        // Refresh Page false);     

3. The browser's capacity limit for cached data may be different (some browser settings are limited to 5MB per site).

4. The browser automatically caches the HTML file that references the manifest file, which results in the need to update the version if the HTML content is changed.

5. When a resource is cached, the browser directly requests that the absolute path also accesses the resources in the cache, and the other pages even if the manifest property is not set, the requested resource is also accessed from the cache in the cache.

6. If the manifest file, or one of the files listed in the file is not downloaded properly, the entire update process will be considered a failure and the browser continues to use the old cache.

Offline Caching Benefits

1. Reduce server load and increase resource load speed

2. Offline browsing, users can use when the app is offline

Offline Cache Disadvantage

1. After the version has been updated, it must be refreshed one time to start the new version (the situation will occur when the page is re-brushed)

2. Go to the Offline storage page, if you do not update the version, it will be treated as a static page does not request.

3. Policies such as grayscale publishing are not possible.

PS: Grayscale Publishing, part of the use of the old version, some people with the new version.

4. Cannot be incrementally updated.

PS: A small amount of code modification, full-volume update.

Offline caching differs from traditional browser caching

1. Offline caching is for the entire application, and the browser cache is a single file

2. Offline cache off the screen or can open the page, browser cache does not

3. Offline cache can proactively notify the browser to update resources

Offline Cache Example

Manifest

CACHE manifest#v1.0.1cache:js/app.jscss/app.cssnetwork:*fallback:404.html

Demo.html

<!DOCTYPE HTML><HTMLManifest= "App.manifest"><Head><title>Demo</title><MetaCharSet= "Utf-8"><Linkrel= "stylesheet"type= "Text/css"href= "Css/app.css" /><Linkrel= "stylesheet"type= "Text/css"href= "Css/demo.css" /><Scripttype= "Text/javascript"src= "Js/app.js"></Script><Scripttype= "Text/javascript"src= "Js/demo.js"></Script></Head><Script>Applicationcache.addeventlistener ('Updateready', function(e) {if(Applicationcache.status==applicationcache.updateready) {Applicationcache.swapcache ();//working with new version Resourceswindow.location.reload ();//Refresh Page        }    }, false);</Script><Body>Bow Jiangzoo ~</Body></HTML>

App.css

{color: blue;}  

Demo.css

{font-size: 60px;}  

App.js

Alert (' I am app.js ');  

Demo.js

Alert (' I am demo.js ');

Example effects

Local direct open no effect, offline cache is invalid.

Deploy the Web server for the first time access:

Second visit:

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/5021992.html

HTML5 offline cache (application cache)