How To Create an Offline Web Application

The majority of browser vendors are introducing offline web application functionality within HTML5. It allows an online application to work even if the user loses or disconnects their internet connection. For example, you would be able to compose a message in your webmail client even if you couldn’t find a wi-fi hotspot.

The example provided in this post works in Firefox 3.x. It works to some extent in other browsers — including IE8. However, implementations and feature sets differ. Offline technologies are in a state of flux, so I couldn’t recommend using this code in a production environment.

There are three aspects to creating an offline-enabled application: specifying which required files, determining when a browser goes offline, and saving data locally.

The Cache Manifest

Your browser can’t access files when it’s offline so you need to specify which resources are required so they can be cached. This is achieved in the cache manifest — it’s a simple list of essential files, e.g.


CACHE MANIFEST
styles.css
jquery-1.4.min.js
offline.js
index.html

Save this file as “offline.manifest” and link to it in your page’s html tag:


<html manifest="offline.manifest">

Note that offline.manifest should be served with a text/cache-manifest MIME-type.

When you load the file, the browser will ask whether you permit data to be stored on your PC.

How to Detect When a Browser Goes Offline

JavaScript code can detect when a browser is online or offline using navigator.onLine. This property is supported by most browsers and returns true when online or false when offline.

Firefox also allows you to attach handlers to the online and offline events of the window object, e.g.


// standard event listeners
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

// or jQuery alternative
$(window).bind("online offline", function() { ... });

Saving Data Locally

DOM storage is one of the simplest methods of saving data when offline. You can use either:

window.sessionStorage to retain values for the duration of the session, or
window.localStorage to retain values for longer periods.

Both objects offer the same methods:

setItem(string name, string value): add or update a value in the store
getItem(string name): get a named value from the store
removeItem(string name): remove a named value from the store
length: number of values stored
key(long index): name of the key at the index
clear(): clear the store

Example:


// set a session value
window.sessionStorage.setItem("key", "my data");

// get a session value - returns "my data"
window.sessionStorage.getItem("key");

Putting it all Together

View the example page…

It’s not very interesting until you select File > Work Offline in Firefox. The status will immediately change to “OFFLINE”. You can then enter some data and click the “Save Data” button. The data will be stored locally rather than being posted to the server. Refresh the page and the values you entered will reappear.

Please download the files if you would like to take a closer look at the code.

Frequently Asked Questions (FAQs) about Offline Web Applications

What are the key differences between offline and online web applications?

Offline web applications are designed to function without a continuous internet connection. They use technologies like HTML5, Application Cache, Web Storage, and ASP.NET MVC to store data locally on the user’s device. On the other hand, online web applications require a constant internet connection to function as they fetch data directly from the server. Offline web applications are beneficial in scenarios where the user has intermittent or no internet connectivity.

How does the Application Cache work in offline web applications?

Application Cache, or AppCache, allows a browser to cache all the web pages and assets required to run the web application offline. It uses a manifest file to list the resources that the browser should cache for offline access. When the user visits the application, the browser downloads and stores the specified resources locally. This allows the application to work offline by serving the cached resources.

How does Web Storage support offline web applications?

Web Storage is a web standard that allows websites to store data in a user’s browser. It provides two objects for storing data: sessionStorage and localStorage. sessionStorage maintains a separate storage area for each given origin that’s available for the duration of the page session. localStorage does the same, but persists even when the browser is closed and reopened. This makes it ideal for storing data for offline web applications.

How can I make my web pages available for offline viewing?

To make your web pages available for offline viewing, you need to use technologies like Application Cache and Web Storage. You need to create a manifest file for Application Cache that lists the resources to be cached. For Web Storage, you can use the localStorage or sessionStorage objects to store data in the user’s browser.

What is the role of ASP.NET MVC in building offline web applications?

ASP.NET MVC is a framework for building web applications that follows the Model-View-Controller (MVC) design pattern. It can be used to build the server-side part of an offline web application. The server-side application can provide APIs for the client-side application to fetch data when online, and store it for offline use.

How can I test my offline web application?

You can test your offline web application by disconnecting from the internet and trying to use the application. You should also test the application with intermittent connectivity to ensure it handles network disruptions gracefully.

Can offline web applications be used on all browsers?

Most modern browsers support the technologies used in offline web applications, including Application Cache and Web Storage. However, it’s always a good idea to test your application on all the browsers your target audience uses.

What are the limitations of offline web applications?

While offline web applications can provide a better user experience in scenarios with poor or no internet connectivity, they do have some limitations. For example, they can’t provide real-time updates or access to server-side resources when offline. Also, the amount of data they can store locally is limited by the storage capacity of the user’s device.

How can I update the resources cached by an offline web application?

To update the resources cached by an offline web application, you need to update the manifest file. When the browser sees that the manifest file has changed, it will download and cache the new version of the resources.

Can offline web applications be used on mobile devices?

Yes, offline web applications can be used on mobile devices. They can provide a better user experience on mobile devices with intermittent or slow internet connectivity. However, the storage capacity for data on mobile devices may be more limited than on desktop devices.