Offline Web App Development

The proposed HTML5 JavaScript APIs specify many features that enable web browsers and apps to function with nearly the same ability as native applications. In particular, Application Cache API enables browsers to cache resources on the device so that later they can be retrieved by the browser even while offline, meaning without an Internet connection. The Web Storage API, Web SQL Storage and its successor IndexedDB API enable session and persistent data storage on mobile browsers so that form and other data can be stored even when offline. These JavaScript APIs are the basis of offline functionality.

Other HTML5 JavaScript APIs enable web browsers to access sensors on the device that are not typical for browsers. For example, the Geolocation API allows users to grant the browser permission to access the device GPS and determine the user's location. Motion Sensors API can access the accelerometer to determine device orientation and acceleration. HTML Media Capture API and Media Capture Stream (getUserMedia) API access the camera on the device and enable taking photographs and videos.

Many HTML5 JavaScript API enable rich web browser interactions. These API include Viewport Definition, Canvas API, Form Virtual Keyboards, Form New Controls API, Touch Events API, CSS 3, WebGL API. They extend input techniques such as gesturing and graphics output such as 3d graphics.

Web application development and deployment has distinct advantage to native application. Applications developed for browsers are nearly cross platform compatible. Consequently, development is nearly immediate for many devices. In addition, developing web apps provides automatic application upgrade for the users. Finally, web application development avoids the necessity of developing separate native apps and websites.


Although dynamic web sites have been developed for more than 20 years, web app design and development is still challenging. The HTML5 JavaScript APIs are only proposed standards. Consequently, many browser implementations differ. For example, iOS browser does not implement blob IndexedDB storage. Different browsers have different data store limits and limit control interfaces. Consequently, developers must learn the distinctions across browser implementations and make use of "feature detection." Simultaneous cross platform develop is not perfect for web apps.

Website developers can make use of many frameworks for developing dynamic online websites. Many of the frameworks are standardized to the Model-View-Controller (MVC) design pattern for structuring the multitude of files and programs composing the website. Many of these frameworks automate the programming of the website. The offline web app developer has few frameworks to use. And, the developer must collect an assortment of JavaScript libraries that address individual programming concerns. In addition, the assemblage of html files, CSS files and JavaScript code is organized only by programmers' coding convention. Consequently, most offline website files become very disorderly and difficult to read.

Enabling web apps to work offline and store data on the device introduces new complexity and potentials for user interactions. For example, what should be the user interaction to store data on the device? The device could detect the online/offline status of the web app and automatically choose the data store, or the application can empower the user to choose the location of data storage. If the data is stored on the device then what should be the interaction to access the data and what should be the interaction to submit or upload the data to the server? Again the device could auto detect online status and automatically upload the data to the server or the user could initiate uploading the data to the server. If users are empowered and control the data storage, what is their understanding of the different data stores, and what should be the interaction? Offline web app design offers new opportunities and design challenges.


JavaScript libraries exist to solve the many of the individual development challenges. For example, Mozilla's LocalForage API is a wrapper for Web SQL and IndexedDB which falls back to LocalStorage. Regrettably, this does not address all the incompatibility, for example mobile Safari implementation of IndexedDB or WebSQL. In addition, the programmer loses many of the features of IndexedDB. To regain these features, the programmer is forced to program at a lower level using IndexedDB directly.

Regardless of the library used for data store, the programmer must contend with JavaScript's framework for handling asynchronous events. Because storing data on the device can consume time, all browsers implement data storage asynchronously. Natively, JavaScript handles asynchronous calls using "callbacks." Consequently, dependent data stores can result in a chain of callbacks, resulting in code difficult to read and program. The JavaScript library, Async.js does offer some tools and structure for asynchronous calls.


We have investigated potential structures and frameworks for offline web app development. One approach makes separates online and offline code by using separate controllers and views for online and offline versions of the website. This approach separates the offline JavaScript code controlling the device storage from the server storage. The technique promotes JavaScript code to the roles of offline controllers and models. Programming conventions must be enforced to separate offline controllers from the offline models. See my description of the myPhoto example web app.

We are currently investigating the potential of using AngularJS as a MVC framework for offline web apps. AngularJS is a JavaScript library that enables JavaSript controllers in the HTML views for small web apps. Naively, the model is invisible in AngularJS, but controllers are quite visible as JavaScript code. Angular controllers have scope defined in the web page by tags in the HTML views. Our challenge is to make the model more visible in the JavaScript code and to integrate Angular with the online website frameworks.

Many of the web apps that we have developed are applications for the Mobile Environmental Citizen Science Project. Mobile citizen scientists understand that using the web app will necessitate offline use, so we adopted the web app interaction design that empowers the user. Please read interaction design for offline use. Even after adapting the approach of user initiated device and server storage the design must construct a proper metaphor and instruct the user.

Computer Science and Human Factors graduate students interested in offline web app design and development for their dissertation or thesis research can contact me. We can discuss your interests and research opportunities in more detail.

Publications and Postings