Developing offline applications with HTML5-cache manifest (5)

Back to top of page

Offline Application Examples

Finally, an example is used to illustrate the basic method of developing offline applications using HTML5. This example uses the previously mentioned offline resource cache, online status detection, and DOM Storage
and other functions. Suppose we develop a note-managed Web
Application in which users can add and remove notes. It supports offline functionality, allows users to add and remove notes offline, and can be synced to the server later on-line.

1. Application Page
   

   The interface of this program is very simple, as shown in 1. The user clicks the "New Note" button to create a new note in the pop-up box, and double-click on a note to delete it.

   
   
   Figure 1. Application Page
   
   
   
   

   The source file for this page is index.html, and its code is shown in Listing 8.

   
   
   Listing 8 Page
   HTML Code
   
   
   
   
   
   
   

   A button and an unordered list are declared in the body. When the "New Note" button is pressed, the Newnote
   The function is called, and it is used to add a new note. The unordered table is initially empty, and it is the list used to display the notes.

1. Cache manifest File
   

   Defining the cache Manifest
   file that declares the resource that needs to be cached. In this example, you need to cache "index.html", "Server.js", "Data.js" and "ui.js", etc. 4
   A file. In addition to the "Index.html" listed earlier, "Server.js", "Data.js", and "Ui.js" contain server-related, data-store, and user-interface code, respectively. Cache
   The manifest file is defined as follows.

   
   
   Listing 9 Cache Manifest
   File
   
   
   
   
   

   CACHE MANIFEST index.html server.js data.js

   
   

1. User Interface Code
   

   The user interface code is defined in Ui.js.

   
   
   Listing 10 user interface code
   Ui.js
   
   
   
   
   

   function Newnote () { var title = Window.prompt ("New Note:"); if (title) { Add (title); } } function Add (title) { //Add Adduiitem (title) to the interface; Add Adddataitem (title) to the data; } function remove (title) { //Remove Removeuiitem (title) from the interface; Remove Removedataitem from the data (title); } function Adduiitem (title) { var item = document.createelement ("li"); Item.setattribute ("ondblclick", "Remove ('" +title+ "')"); Item.innerhtml=title; var list = document.getElementById ("list"); List.appendchild (item); } function Removeuiitem (title) { var list = document.getElementById ("list"); for (var i = 0; i < list.children.length; i++) { if (list.children[i].innerhtml = = title) { List.removec Hild (List.children[i]); } }

   
   
   

   The code in Ui.js contains interface actions for adding notes and deleting notes.

   
   
   
3. Add a note

1. The Newnote function is called when the user taps the "New Note" button.

1. The Newnote function pops up the dialog box and the user enters the new note content. Newnote calls the Add function.

1. The Add function calls Adduiitem and Adddataitem, respectively, to add page elements and data. The Adddataitem code will be listed later.

1. The Adduiitem function adds an item to the list of pages. and indicates that the handler function for the ondblclick event is
   Remove to allow the double-click to delete the note.

• Delete a note

1. When the user double-clicks a note, the Remove function is called.

1. The Remove function calls Removeuiitem and Removedataitem, respectively, to delete page elements and data. Removedataitem
   will be listed later.

1. The Removeuiitem function deletes the corresponding item in the page list.

1. Data storage Code
   

   The data store code is defined in Data.js.

   
   
   listing 11 data storage code
   Data.js
   
   
   
   
   

   var storage = window[' Localstorage ']; function Adddataitem (title) {if (navigator.online)//Online status {addserveritem (title); } else//offline status {var str = storage.getitem ("Toadd"); if (str = = null) {str = title; } else {str = str + "," + title; } storage.setitem ("Toadd", str); }} function Removedataitem (title) {if (navigator.online)//Online status {removeserveritem (title); } else//offline status {var str = storage.getitem ("Toremove"); if (str = = null) {str = title; } else {str = str + "," + title; } storage.setitem ("Toremove", str); }} function Syncwithserver () {//If it is currently offline, there is no need to do any processing if (Navigator.online = = false) return; var i = 0; and server Sync add operation var str = Storage.getitem ("Toadd"); if (str = null) {var additems = Str.spliT (","); for (i = 0; i<additems.length; i++) {Adddataitem (additems[i]); } storage.removeitem ("Toadd"); }//and server sync delete operation str = Storage.getitem ("Toremove"); if (str! = null) {var removeitems = Str.split (","); for (i = 0; i<removeitems.length; i++) {Removedataitem (removeitems[i]); } storage.removeitem ("Toremove"); }//Delete all notes in the interface var list = document.getElementById ("list"); while (list.lastchild! = list.firstelementchild) list.removechild (list.lastchild); if (list.firstelementchild) list.removechild (list.firstelementchild); Get all the notes from the server and show in the interface var AllItems = Getserveritems (); if (AllItems! = "") {var items = Allitems.split (","); for (i = 0; i<items.length; i++) {Adduiitem (items[i]); } } }

   
   
   

   Window.addeventlistener ("online", Syncwithserver,false);

   
   

   The code in Data.js contains data operations such as adding notes, deleting notes, and synchronizing with the server. The Navigator.online attribute, OnLine event, DOM
   Storage and other HTML5 new features.

   
   
   
3. Add Note: Adddataitem

1. Determine whether online through Navigator.online.

1. If online, then call Addserveritem to store the data directly on the server. The Addserveritem will be listed later.

1. If offline, add the data to the Localstorage "Toadd" item.

• Delete Note: Removedataitem

1. Determine whether online through Navigator.online.

1. If online, then call Removeserveritem to delete the data directly on the server. The Removeserveritem will be listed later.

1. If offline, add the data to the Localstorage "Toremove" item.

• Data synchronization: Syncwithserver

In the last line of Data.js, the online event handler function Syncwithserver for window is registered. When online
When an event occurs, Syncwithserver is called. Its functions are as follows.

1. If navigator.online indicates that it is currently offline, no action is taken.

1. Add all the data for the "Toadd" item in Localstorage to the server and delete the "Toadd" entry.

1. Remove all data from the Localstorage "Toremove" item from the server and remove the "Toremove" entry.

1. Deletes all the notes in the current page list.

1. Call Getserveritems to get all the notes from the server and add them in the page list. The Getserveritems will be listed later.

1. Server-related code
   

   The server-related code is defined in Server.js.

Developing offline applications with HTML5-cache manifest (5)