Create offline Web applications on mobile devices with HTML5

Writing applications for multiple operating systems and a wide range of mobile devices can be challenging. The high demand for sophisticated mobile applications requires significant hardware. One solution is to provide Web applications, because they can run cross-platform on mobile devices. You don't need to use proprietary technology (such as Objective-C with Cocoa on the iPhone); you can use common Web technology. In essence, just one version of the application is needed. The main hardware power is provided by servers. In this article, explore the use of Web development in the mobile application space with a simple example that taps into the HTML5 standard.

Dietmar Krueger (dietmar.krueger@de.ibm.com), IT Architect, IBM

Photo of Dietmar KruegerDietmar Krueger works for Application Innovation Services, a Service Line of IBM Global Business Services. He has developed object-oriented software for 17 years. Dietmar has a passion for agile software development, lightweight architectures, and dynamically-typed programming languages.



18 May 2010

Also available in Chinese Russian Japanese Portuguese

Introduction

The use of Web development in mobile applications is an increasing trend. However, intermittent network availability is a big obstacle to using Web technology as part of a cloud infrastructure. A traditional Web application simply doesn't work without a network. One solution to this problem is to use two features of the HTML5 Standard (see Resources):

  • Offline Web applications
  • Client-side database storage

The user can use cloud functions on a mobile device, work offline with a locally deployed application on a local database, and share data with the rest of the cloud when going online again.

In this article, learn the technical details for a typical usage scenario. A prototype of a simple inventory management application demonstrates the HTML5 technology.

Download the source code for the example application in this article from the Download table below.

Overview

Figure 1 shows an overview of the major components of the sample application architecture.

Figure 1. Core elements of an offline Web application
A diagram showing a user with an arrow to a box labeled 'HTML.' The 'HTML' box is pointing to 'CSS,' 'Manifest,' 'JavaScript,' and 'DB' boxes. The 'HTML' and 'JavaScript' boxes also point to the 'Server,' and the 'JavaScript' box also points to the 'DB' box.
HTML page
The HTML page, the core of the application, has the model role. It contains the displayed data and the (default) render information. The HTML elements of the page are organized in a hierarchy of the HTML Document Object Model (DOM) tree. User-initiated events cause a conventional request-response cycle with a page load and the execution of associated JavaScript functions.

Remarkably, this application consists of a single HTML page without the need for loading of further HTML pages through the request-response cycles. The whole action is on one page.

JavaScript
The JavaScript element contains the controller functions of the application. HTML elements are bound via event handlers to JavaScript functions. JavaScript can access the HTML DOM tree of the application with all user interface (UI) elements and use it as data input for computation. The results of the processing can be presented to the user by modifying the HTML page.
Cascading Style Sheet
The Cascading Style Sheet (CSS) describes how the HTML page is rendered. The view task is omitted here to simplify the solution. In this stage of expansion, only the default rendering behavior of the HTML elements are used.

For mobile devices, there are various JavaScript/CSS libraries and frameworks to deliver a near native user experience with Web applications (for example, iUi for the iPhone). See Resources for more information. Though necessary to increase the user acceptance, this approach has the disadvantage of platform dependency.

Database
The HTML5 standard introduced local database storage. It is implemented in current versions of the Apple® Safari browser. The browser provides an embedded database, with SQLite, that can be accessed from the JavaScript by processing SQL queries. The business data of the application model is stored here.
Manifest
The manifest file is the mandatory deployment descriptor component for an offline Web application. It simply lists all the files that need to be loaded.

Sample application

This section provides an overview of the sample application, called MyHomeStuff. It is a simple inventory management application that lets you keep track of items you own. Figure 2 shows the application on the iPhone.

Figure 2. iPhone view
A screen shot of the 'MyHomeStuff' application on the iPhone. There are three bold headings in the view, with information under each. The headings are 'Overview,' 'Details,' and 'Status.'

For simplicity, the synchronization of data with the server is omitted. Figure 3 shows the MyHomeStuff inventory management application in the Palm Pre Web browser.

Figure 3. Palm Pre view
Same sceen shot as the previous image, but in a Palm Pre Web browser.

The list in the upper part of the screen gives an overview of all entered items (books, computer, and so on).

When a user selects an item in the list, the details (Id, Quantity, Name) of the item are shown in the middle of the form. The details of the selected item can be changed using the Update button. The selected item can also be deleted from the application using the Delete button. New items can be created by entering the item's quantity and name in the form and selecting the Create button.

The application Status is displayed in the lower part of the screen.

HTML details

The HTML page contains declarations, meta tags for a mobile-optimized display, references to external files (manifest, JavaScript, css), and essential HTML elements that form the basic structure of the application. Listing 1 shows the code.

Listing 1. HTML code
                <!DOCTYPE HTML>
                <html manifest="MyHomeStuff.manifest">
                <head>
                <meta name="viewport" content="width=device-width; 
                initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
                <title>MyHomeStuff</title>
                <script type="text/javascript" src="MyHomeStuff.js" ></script>
                </head>
                <body onload="onInit()">
                <h3>Overview</h3>
        <ul id="itemData" ></ul>
    <h3>Details</h3>
        <form name="itemForm">
            <label for="id">Id: </label>
            <input type="text" name="id" id="id" size=2 disabled="true"/>
            <label for="amount">Amount: </label>
            <input type="text" name="amount" id="amount" size = 3/>
            <label for="name">Name: </label>
            <input type="text" name="name" id="name" size=16 /> <br>
            <br>
            <input type="button" name="create" value="create"
                onclick="onCreate()" />
            <input type="button" name="update" value="update"
                onclick="onUpdate()" />
            <input type="button" name="delete" value="delete"
        </form>
    <h4>Status</h4>
        <div id="status"></div>
   </body>
</html>

Event handler attributes of the HTML elements specify which JavaScript functions are executed when the page is initially loaded (onload) and button elements are clicked (onclick).

The HTML page of an offline Web application starts with the tag <!DOCTYPE HTML>. The manifest is referenced through the manifest attribute in the tag <html manifest="MyHomeStuff.manifest">.

As mentioned, the manifest specifies the required files that need to be loaded into the cache. This application consists of an HTML file and a JavaScript file. The HTML file with the reference to the manifest is automatically included in the application cache. The manifest contains only the following:

Listing 2. Manifest file
CACHE MANIFEST

MyHomeStuff.js

JavaScript details

The JavaScript code consists of three main blocks:

  • Initialization functions
  • db (crud) and view update functions
  • Some little utility functions

The first block contains the event handler to initialize the application (onload) and the initialization of the database, as shown in Listing 3.

Listing 3. JavaScript init code
function onInit(){
    try {
        if (!window.openDatabase) {
            updateStatus("Error: DB not supported");
        }
        else {
            initDB();
            createTables();
            queryAndUpdateOverview();
        }
    } 
    catch (e) {
        if (e == 2) {
            updateStatus("Error: Invalid database version.");
        }
        else {
            updateStatus("Error: Unknown error " + e + ".");
        }
        return;
    }
}

function initDB(){
    var shortName = 'stuffDB';
    var version = '1.0';
    var displayName = 'MyStuffDB';
    var maxSize = 65536; // in bytes
    localDB = window.openDatabase(shortName, version, displayName, maxSize);
}

In the code above:

  • The onInit function first checks the existence of the mandatory openDatabase function, whose absence signals that the browser doesn't support a local database.
  • The initDB function opens the database of the HTML5 browser.
  • After successfully opening the database, the SQL DDL to create the database table is executed. Lastly, the functions that query the existing records and populate the HTML page with the data are called.

Each function of the second JavaScript block has a part for DB access and presentation logic. This consolidation of logic is characteristic of a Model 1 architecture (see Resources), which is the easiest way to develop simple Web applications. For a real-world scenario, an architecture with a clear separation of the Model View Controller (MVC) parts would be appropriate.

To build the example overview list, the queryAndUpdate function is called from the event handler functions. Listing 4 shows the code.

Listing 4. JavaScript overview code
function queryAndUpdateOverview(){

    //remove old table rows
    var dataRows = document.getElementById("itemData").getElementsByClassName("data");
    while (dataRows.length > 0) {
        row = dataRows[0];
        document.getElementById("itemData").removeChild(row);
    };

    //read db data and create new table rows
    var query = "SELECT * FROM items;";
    try {
        localDB.transaction(function(transaction){
        
            transaction.executeSql(query, [], function(transaction, results){
                for (var i = 0; i < results.rows.length; i++) {
                
                    var row = results.rows.item(i);
                    var li = document.createElement("li");
                    li.setAttribute("id", row['id']);
                    li.setAttribute("class", "data");
                    li.setAttribute("onclick", "onSelect(this)");
                    
                    var liText =
                        document.createTextNode(row['amount'] + " x "+ row['name']);
                    li.appendChild(liText);
                    
                    document.getElementById("itemData").appendChild(li);
                }
            }, function(transaction, error){
                updateStatus("Error: " + error.code + "<br>Message: " + error.message);
            });
        });
    } 
    catch (e) {
        updateStatus("Error: Unable to select data from the db " + e + ".");
    }
}

In the code above:

  • The old data is removed from the DOM tree.
  • A query to select all data sets is executed.
  • For every data set in the result, an HTML list element is created and appended to the list.
  • An event handler, onSelect, is added to every list element to respond on a click.

The functions of this block also contain the event handler for the button bar and the list with onUpdate, onDelete, onCreate, and onSelect. Listing 5 shows the code for onUpdate. (onCreate and onDelete have a similar structure, so aren't shown here; you can download all the source code for the example application from the table below.)

Listing 5. JavaScript update code
function onUpdate(){
    var id = document.itemForm.id.value;
    var amount = document.itemForm.amount.value;
    var name = document.itemForm.name.value;
    if (amount == "" || name == "") {
        updateStatus("'Amount' and 'Name' are required fields!");
    }
    else {
        var query = "update items set amount=?, name=? where id=?;";
        try {
            localDB.transaction(function(transaction){
                transaction.executeSql(query, [amount, name, id],
                function(transaction, results){
                    if (!results.rowsAffected) {
                        updateStatus("Error: No rows affected");
                    }
                    else {
                        updateForm("", "", "");
                        updateStatus("Updated rows:"
                            + results.rowsAffected);
                        queryAndUpdateOverview();
                    }
                }, errorHandler);
            });
        } 
        catch (e) {
            updateStatus("Error: Unable to perform an UPDATE " + e + ".");
        }
    }
}

In the above code:

  • The field values of the form are read and validated.
  • If the values are valid, the update query will be executed.
  • The result of the query is shown in the updated HTML page.

The onSelect function is executed when the user selects a list element. The details form will be filled with the data of this element using the code in Listing 6.

Listing 6. JavaScript select code
function onSelect(htmlLIElement){
    var id = htmlLIElement.getAttribute("id");
    query = "SELECT * FROM items where id=?;";
    try {
        localDB.transaction(function(transaction){
        
            transaction.executeSql(query, [id], function(transaction, results){
            
                var row = results.rows.item(0);
                
                updateForm(row['id'], row['amount'], row['name']);
                
            }, function(transaction, error){
                updateStatus("Error: " + error.code + "<br>Message: " + error.message);
            });
        });
    } 
    catch (e) {
        updateStatus("Error: Unable to select data from the db " + e + ".");
    }
}

In the code above:

  • The ID of the selected element is determined.
  • A select-query is executed.
  • A function to update the detail form with the read data set is called.

The last JavaScript block with utility functions starts with data handlers, which are needed as parameters for the queries.

Listing 7. JavaScript handler code
errorHandler = function(transaction, error){
    updateStatus("Error: " + error.message);
    return true;
}

nullDataHandler = function(transaction, results){
}

To avoid redundancy, utility functions fill the fields of the detail form (updateForm) and status message (updateStatus), as shown below.

Listing 8. JavaScript util code
function updateForm(id, amount, name){
    document.itemForm.id.value = id;
    document.itemForm.amount.value = amount;
    document.itemForm.name.value = name;
}

function updateStatus(status){
    document.getElementById('status').innerHTML = status;
}

Deployment

An iPhone 3GS and a Palm Pre were used to run the example on a real HTML5 mobile device. A current Safari browser on a computer also works.

You can download and deploy the files for the application in an HTTP server from the Download table below. The manifest file must be served by the HTTP server with the text/cache-manifest Mime type. After opening the application on the iPhone, save the Bookmark and go in the offline airplane mode. The application will then be opened when the bookmark is selected, and it works without a network.

Summary

The focus of this article was the technical angle for offline Web applications. A prototype of a simple inventory management application demonstrated the HTML5 technology with a locally deployed application and a local database.


Download

DescriptionNameSize
Source code for this articleOfflineWebAppSrc.zip3KB

Resources

Learn

Get products and technologies

Discuss

  • My developerWorks: Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, Mobile development
ArticleID=490323
ArticleTitle=Create offline Web applications on mobile devices with HTML5
publish-date=05182010