A brief introduction to HTML5-Offline APIs

1. Browser support detection
##

if
(window.application
Cache
) { 
      // this browser supports offline applications 
   }

2. Online and offline

status detection and events

// When the page loads, 
set
 the status to online or offline 
   function loadDemo() { 
      if (navigator.onLine) { 
         log("Online"); 
      } 
else
 { 
         log("Offline"); 
      } 
   } 
   // Now add event 
list
eners to notify a change in online status 
   window.addEventListener("online", function(e) { 
     log("Online"); 
   }, true); 
   window.addEventListener("offline", function(e) { 
     log("Offline"); 
   }, true);

3.manifest

To use the offline function, you need to specify which resources are offline
cache. This is specified through the manifest attribute of the tag. A manifest file with a .manifest extension. Resources that need to be cached offline, resources that are not cached, and failed request replacement pages are all listed in the manifest file. Moreover, the MIME type of the manifest file must be text/cache-manifest, and this MIME type must be defined from the server side. The first line of the manifest cannot be commented . The failed request part includes two aspects. The first is the content to be requested, which can be a folder; the second is the replacement content of the failed request.
If you need to
update the cache, just update the manifest file and the browser will automatically update all caches. However, provided the manifest file is not cached (it is by default), this can be resolved by modifying the server's cache settings. Examples are as follows:

CACHE MANIFEST

## Behavior comment. The following "CACHE:" can be omitted CACHE:

  # 
file
s to cache 
   about.html 
   
html5
.css 
   index.html 
   happy-trails-rc.gif 
   lake-tahoe.JPG

#do not cache signup page

#You can use an asterisk (*), so that everything is not explicitly cached None of the resources will be cached
NETWORK
signup.html

 FALLBACK 
   signup.html     offline.html 
   /app/ajax/      default.html
   media/          images/video-fallback.jpg
   /               /offline.html

4.applicationCache

Object window.applicationCache object is a Web offline application## The core object of #API
, which includes the cache status attribute window.applicationCache.status and some event attributes related to the cache status. 5. Cache status and events

window.applicationCache.status has six values, as follows:

•0(UNCACHED): Corresponds to the oncached event attribute, no cache
•1(IDLE ): Corresponding to the oncached event attribute, all resources in the cache list are in the cache state.
•2(CHECKING): Corresponds to the onchecking event attribute and checks the cache.
•3(DOWNLOADING): Corresponds to ondownloading event attribute, download cache.
•4(UPDATEREADY): Corresponds to the onupdateready event attribute and prepares to update the cache.
•5(OBSOLETE): Corresponding to the onobsolete event attribute, a resource has been cached but is not in the list.
There are also three event attributes:
•onerror: An error occurs.
•onnoupdate: No updates available.
•onprogress: The cache is being updated.

6.window.applicationCache.update() method

Call this method to request the browser to update the cache, including checking the new version of the manifest file and downloading necessary new resources. If there is no cache, or the cache is obsolete, an error will be generated.

The above is the detailed content of A brief introduction to HTML5-Offline APIs. For more information, please follow other related articles on the PHP Chinese website!