Home > Article > Web Front-end > 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 100db36a723c770d327fc0aef2ce13b1 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.html4.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
•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
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!