HTML5 practice and analysis: offline applications

HTML5 practice and analysis: offline applications

Offline Web applications can run when devices cannot access the Internet. HTML5 focuses on offline applications and focuses on developers' wishes. The steps for Offline Application Development are as follows: First, you should know whether the device can access the Internet, and then you should be able to access certain resources (such as CSS and JavaScript). Only in this way can you work normally.

Offline Detection

To develop an offline Web application, you must first know the Internet access of your device. HTML5 defines a navigator. onLine attribute for this purpose. If the attribute value is true, the device can access the Internet, and false indicates that the device cannot access the Internet. The key to this attribute is that the browser must know that the device can access the network and return the correct value. In actual applications, navigator. onLine varies with different browsers.

IE6 + and Safari 5 + correctly detect that the network is disconnected and convert the value of navigator. onLine to false.

Firefox 3 + and Opera 10.6 + support the navigator. onLine attribute, but you must manually select the menu item "file-Web developers (settings)-offline work" to make the browser work properly.

Chrome 11 and earlier versions always set the navigator. onLine attribute to true.

Because navigator. onLine still has compatibility issues, the connectivity of the network cannot be determined by using the navigator. onLine attribute separately. Therefore, it is necessary to detect this attribute when a request error occurs. The following is a small example of detecting this attribute.

　　JavaScript code

If (navigator. onLine) {// normal internet access} else {// task in offline status}

In addition to the navigator. onLine attribute, there are two events: online and offline. When the network changes from offline to online, or from online to offline, these two events are triggered respectively. The following is a small example of online and offline events:

　　JavaScript code

window.addEventListener('online',function(){alert("online")}, false);window.addEventListener('offline',function(){alert("offline")}, false);

To check whether the page is offline, you can obtain the initial status through the navigator.. onLine attribute after loading the page. Then, the online and offline events are used to determine whether the network connection status changes. When the online and offline events change, the navigator. onLine attributes also change. You must manually poll this attribute to detect changes in the network status.

Browsers that support offline detection include Firefox 3 +, Opera 10.6 +, Chrome, IE6 + (only navigator. onLine attributes are supported), Android Webkit, and iOS Safari.

Application Cache

Application cache (appcache) for HTML5. Appcache is designed specifically for the development of offline Web applications. Appcache is a cache area derived from the browser cache. To save data in this cache area, you can use a description file to list the resources to be downloaded and cached. The following is a simple example of describing small files.

In the simplest case, all the resources listed in the description file need to be downloaded for offline use. There are many options to set the description file. Here, they are just included. For more information, visit http://html5doctor.com/go-offline-with-application-cache.

The description file must be associated with the page. You can add the manifest attribute to the html Tag and specify the file path. The following is a small example.

　　HTML code

　　Offline. manifest code

Cache manifest # CACHE file clock.html clock.css clock. js

The above code tells the page that/offline. manifest contains a description file. The MIME type of this file must be text/cache-manifest.

Although the purpose of application cache is to ensure that resources can be used offline, there are also corresponding JavaScript APIs to let developers know what they are doing. The core of this API is the applicationCache object. This object has a status attribute. The attribute value is a constant and the State is as follows.

0: no cache, that is, no page-related application cache.

1: The application cache is not updated.

2: Check. The description file is being downloaded and the update is checked.

3: The application cache is downloading the specified resource in the description file.

4: The update is complete, that is, the application cache has updated the resource, and all resources have been downloaded. You can use the swapCache () method.

5: deprecated. That is, the description file stored in the application cache does not exist. Therefore, the page cannot access the application cache.

There are many related events in the application cache, indicating that the status of the application changes. The related events are as follows:

　　Checking: Triggered when the browser finds updates for the Application cache.

　　Error: Triggered when an error occurs while checking for updates or downloading resources.

　　Noupdate: Triggered when no change is found in the description file.

　　Downloading: Triggered when the application cache resource is downloaded.

　　SS: The cache of the file download application is continuously triggered.

　　Updateready: The New Application cache on the page is downloaded and can be triggered when it is used by swapCache.

　　Cached: Triggered when the application cache is fully available.

Generally, these events are triggered in order of page loading. However, you can also Manually intervene by calling the update () method to enable the application cache to trigger the above events to detect updates.

　　JavaScript code

applicationCache.update();

When Update () is called, the application cache checks whether the description file is updated (triggering the checking event) and continues to perform subsequent operations just like loading the page. If the updateready event is triggered, the new version of the application cache is available, and you need to call the swapCache () method to enable the new application cache.

　　JavaScript code

applicationCache.addEventListener('updateready',function(){applicationCache.swapCache();}, false);

Browsers that support HTML5 offline storage include iOS 3.2 + Safari, Chrome, Android Webkit, Firefox 3 +, Safari 4 +, and Opera 10.6 +. If you call the swapCache () method in Firefox 4 or earlier versions, an error is returned.

The Offline Application of HTML5 practice and analysis is described. This section describes the application of offline navigator. onLine attribute detection and the Appcache application of offline cache. More HTML5-related updates are available at Menglong xiaozhan.