jQuery Mobile: Up and Running

Chapter 8. Installation and Offline Access

Using HTML5 and some other extensions, we can enable our jQuery Mobile application to work totally offline as if it were installed in the mobile device as a native app.

We can also package our jQuery Mobile webapp as a native app for store distribution, but that is for a later chapter. In this chapter we are creating an offline experience of our webapp without store distribution.

With this solution, the user can access our webapp from the mobile browser and then install it on her device. That means that next time she accesses the same webapp through the same URL or through an application icon, it will load from the local repository and not from our server.

Package Definition

The first thing to do is to define our package. To do that we are going to use an HTML5 API called Application Cache also known as Offline API available in the W3C draft.

This API does not currently work on every mobile browser but its compatibility includes most tablets and smartphones. You can check current compatibility of this API at http://mobilehtml5.org.

Our first step is to define what we want. Do we want a full offline application? Do we want some pages or data to be updated from the server every time? Do we want to have a local data cache and, if we have online access, update it?

The second step is to define the package. The package is a list of files that must be downloaded by the browser when the user accesses our website. This list must include every JavaScript, ...