Introduction

You are watching an interesting YouTube video on your iPhone while commuting to work in a
train and the network gets disrupted and you can't watch the video.
You get frustrated. This is the limitation of typical web based applications as they need internet connection to serve the application seamlessly. But with HTML5, it is now possible to develop off-line
web applications which will continue to work seamlessly in the event of loss of internet connection. This is possible because of
the Application Cache and Web Storage features of HTML5. With Web Storage, now we can store up to 5 MB of data
on the client side. This is quite a decent size and will enable us to cache data on
the client side in the event of internet loss and the user will be able to continue working and
then sync with the server once internet connection is restored. The purpose of this article is to demonstrate these features. TaskTracker is an offline web application targeted for
the mobile platform and will help users to keep track of their pending tasks.
Also, they can maintain and manage their contacts. I will also explain how the
power of HTML5 and open source frameworks such as jQuery/jQueryUI/jQuery-Validation and Knockoutjs are used to build this application.

Application Cache and Web Storage features of HTML5 are used in this application.

With jQuery we can do easy manipulation of DOM
elements such as attaching an event, adding/removing or toggling CSS classes dynamically with simple and concise
code, and above all it is cross browser compatible! So we can focus on the business logic of our application without worrying about these issues.

The jQuery-UI plugin provides the power to convert standard HTML
markup elements into elegant GUI Widgets with only a few lines of code. Also, it provides
a variety of
Themes, so we don't have to worry too much about building our own CSS styles.

The jQuery-Validation plugin provides all the features to take care of client side validations.

Finally, Knockoutjs is a wonderful framework which provides us the capability to build applications using
the Model-View-ViewModel (MVVM) design pattern. This is a very powerful
design pattern and is very popular in applications developed using WPF and Silverlight. Knockoutjs provides
a powerful data binding framework to be used when
programming using JavaScript. There is an excellent tutorial available to get familiar with this framework.

Background

A couple of months back I watched an interesting video exploring the power of HTML5 and was really impressed by its powerful features.
The features
of HTML5, together with the power of CSS3 and JavaScript, can be used to build web applications for
the mobile platform and then can be converted to native mobile applications
for different mobile platforms using an Open Source framework such as PhoneGap. So we can write once but deploy it on multiple platforms. I decided to
develop a TaskTracker application to explore these features. I will explain the various features of
the different frameworks used in this application in the below sections.
You can view a working demo here.

Design Overview

The application is built using the popular MVVM design pattern. MVVM is a design pattern very similar to
the old MVC design pattern and addresses the separation of concerns.
Like MVC, it has a model, view, but the controller role is done by the ViewModel. View Model is responsible for handling user interactions and also interacts with
the model
and updates the view. It can have additional attributes apart from the Model which can be
View specific. Also, in a complex web application comprising of multiple views, each view
can have a corresponding view model. In our application there is only one view and one view model. The key files of the application are
main.html, taskcontroller.js, and storageController.js.
The class diagram of the application is shown in Figure 1.

From Figure 1, the TaskControllerUI class is a conceptual class and represents the UI for the application and is implemented as plain
HTML. TaskViewModel is a key class
responsible for handling all the user interactions and updating the view and interacts with
the model. Customer and Task are two entity classes which act as
a model for this application. StorageController is a wrapper class and is responsible for saving and retrieving data from WebStorage.

Since JavaScript is not like conventional object oriented programming languages such as C++, C#, or Java, it does not have
a Class construct. So all the classes are implemented differently.
I will first explain the business layer implementation, then the data layer, and finally UI.

Business Layer

The Business layer consists of two key entities: Task and Customer. Another important class is a TaskViewModel.
The below section shows the implementation details of Task and Customer.

If you look at the above code you might have noticed that both the classes contain only properties as they are entity
classes and do not expose any methods. But also you might have noticed that these properties are
initialized with Knockout constructs. These properties
are declared as observables. This will enable these properties bind to
the UI and will provide two-way binding. So any changes
done to these properties in UI will automatically update the properties. Or if you change their values programmatically, then it will reflect those changes
in the UI. One thing to remember is that Knockout observables are functions and you can't access or initialise them as normal properties.
See the above code showing an example of setting and accessing a Knockout observable property.

TaskViewModel is the core class of this application and is responsible for handling user interactions
and interacts with the model and updates the view. The above code is not the complete source code, but just a highlight of the key methods.
The view model has two observable arrays for Tasks and Customers. Also note the use of dependent observable to filter the pending tasks by visit date.
Please refer to the source code for the full implementation details.

Data Layer

The data layer is implemented by the StorageController class.
The details of its implementation are given below:

The above class is just a wrapper to window.localStorage and provides
a wrapper method to save and get data from
the local storage. The class has a hasLocalStorage method which checks whether
the browser supports localStorage.

UI Layer

The UI layer is implemented as a plain HTML file.

Once all the documents are loaded it executes the below initialization code. The code defines
the validation rules, jQueryUI initialization code, and binding of the view model to
the UI.

I have used different types of bindings such as for-each, with, form, and custom binding features of KnockoutJS.
Please refer to the source code for complete details. Below is the code shown for
the Customer custom binding.

In pending task list table I wanted to show the details of Customer such as customer name, phone, and mobile. Since each row is bound to
a Task object
which has
the
customerID as one of its properties, I had to use the custom binding feature of KnockoutJS to extract customer details from
the customer ID. Please refer to the above code for details.

Configuring for Offline Working

With HTML5 we can now configure the pages, assets, and resources of the application which should be served offline. This
is possible by defining the Application Manifest file, which is a plain text file. Also, in
the html tag, you need
to define the manifest attribute to specify a name for the manifest file. <html manifest="manfiest.appcache"> I have added
the manifest file with an extension of .appcache.
But you can use any extension. We need to configure the web server to include this new extension type as well as specify its
MIME type as text/cache-manifest. Please refer to the code below to
see the content of the manifest file.

Please remember that the fist line in the manifest file should be CACHE MANIFEST. Don't put any comments before this line.
The structure of the manifest file is simple. It has three sections CACHE, NETWORK, and FALLBACK.
All the pages and resources used off-line need to be specified under the CACHE section. Pages/resources
required only online are under the NETWORK section. In the FALLBACK section you can specify alternate pages
in case of fallback. That's it!

The browser supporting the application cache will initially save all the offline resources on
the client side and then it will always serve these resources from the application cache irrespective of whether you are online or offline. So any changes done
to these pages will reflect only when the manifest file is modified. This is an important point to remember. Modify the manifest
file and update the version to indicate to the browser that there are some changes so that it will bring
the latest changes from
the server and save it again on the client side.

Styling for Mobile

I don't have to do major changes to configure this application for mobile.
The only thing you need to specify is the viewport
setting in the head section of your HTML file. I had to define an extra style for
the textarea tag as its width
was overflowing outside its parent container. Please refer to the code below for details.

Points of Interest

Initially I declared the startdate and visitdate properties of
the Task class as Date type. But I faced issues
while saving and retrieving data. Incorrect date was showing in the DatePicker control. So I modified the code to save it
as a string.

Since the application does not have any server side processing, client side validation is triggered using
the below code
before saving Task or Customer details.

Also on iPhone or Android phones, because of screen width limitations, I couldn't display all the columns in
the pending task list table as it was overflowing
its container. I tried to use a CSS style to show the scroll bar. It works fine in
a Desktop browser but not on a SmartPhone. So I used the below code on the
click event of the tr tag of the pending task list table.
The user can tap on the heading to collapse or expand the row. This is achieved
using the toggleClass method of jQuery.

Android Phone/iPhone/iPad Users

Android users can download the native app from here.
iPhone and iPad users can access the application View Demo here.
They can bookmark this page. It will then work always whether you are online or offline.

History

This is the first version of TaskTracker. In a future version, I am thinking of saving tasks and customer details on
a server side database.
So the application can sync with the database when connected to the internet. This way all the data will be accessible from anywhere,
either from a mobile or a desktop browser. Which is not the case with this version as data is stored on
the client browser.

Conclusion

Due to the new features in HTML5 it is now easy to develop off-line web applications. The application explores
the key features of HTML5, jQuery, jQuery-UI, jQuery-Validation,
and KnockoutJs. Also we can use an Open Source framework such as PhoneGap to convert it to
a native application for different mobile platforms.
Please let me know your comments and suggestions. You can e-mail me for any queries or clarifications about
the implementation.

Share

About the Author

I am Solution Architect with 20+ years of IT experience in the field of real time,embedded,client/server and web based applications and Business Intelligence . I am currently working as Senior Consultant for Infor.

Hi Simone,
There is extension of this article which discusses syncronizing data with the back-end database using JQUERY AJAX and AJAX Enabled WCF Service. Please read my article titled
'Real Time SPC for iPad/Android Tablet' published in code project last week.

Hi Wagid,
Yes. It's already published and it is titled Real Time SPC for iPad/Android. I have taken separate example to explain the concept to sync data with back-end database. I hope you will find it useful.

Impresive article that's right what I was looking for to understand the capabilities of HTML5 to work offline.
I'm very interested also in your next article about syncing data to server side. Are you near to publish???

Thank you for sharing your insights and experience with the Task Tracker example. I was about to embark on writing a small web app for a friend, and was extremely lucky to stumble across your article. I now realise how much I don't know, and will not proceed until I've fully digested all of the article, which in itself requires that I go back a step or two and do some reading. In the meantime, you have given me licence to focus on my business logic in Excel for a quick and dirty immediate solution which I can code when I understand a bit more (leaning heavily on your example files). Thank you too for saving me a world of self-inflicted heartache.

You mention in the article that you might consider a subsequent exploration detailing the process of making the app's database(s?) server-resident, and synching the mobile datasets with it. If it's any help, I'd be extremely interested in an article like that, especially in an implementation based around the server acting as a central repository, with multiple mobile devices (Safari on iOS in my friend's case) adding to a common database and updating their local datasets from it. I'm pretty sure that syncing will be the main challenge there, and I would absolutely love to see how your patient, transparent and methodical process of exploration deals with it.

Impresive article that's right what I was looking for to understand the capabilities of HTML5 to work offline.
I'm very interested also in your next article about syncing data to server side. Are you near to publish???

I am normally a WPF dev, but have been doing more web dev lately and for me its nice to see something like Binding/INPC and ViewModels that the UI sees change and JQuery Templates (DataTemplates in WPF land), its all reaching a certain level of Parity for me.

If they could just fix web workers to allow them to touch the DOM that would be cool