You are here

HTML5: In an Offline World

One of the most exciting new concepts in html5 is the ability to build sophisticated applications that can work and run while not connected to the Internet. For sure, the concept in itself doesn't sound that new, but in terms of what used to be possible within the browser, the leap is quite huge. But why care about cramming “classic” desktop concepts like local storage and No Internet into a browser anyway? The primary reason quite simply is cross platform compatibility. Long gone are the days where Microsoft Windows was really all you had to care about. You now want your application to run not just on MacOS, but iOS, Android, Windows Metro, ChromeOS, Symbian, BB (why not). And really the only common development environment that combines all those diverse platforms together is The Browser, or, in the parlance of our times, HTML5. So that's javascript, html and css, get used to it. Building an application for offline involves two main html5 components:

1. Application Cache

2. Offline Storage

1. Application Cache

The application cache is a system that allows web assets (html, js, css files) to be downloaded to the local browser cache for availability while offline. So what this means is if the url to your site is: http://www.somedomain.com And a user goes to that site while online, the files for it will be downloaded to their local cache. If the user then goes to that url again while offline, the browser will load the assets from the local cache instead of downloading them or giving you an error. Manifest File This all gets kicked off via the “manifest” file. This is a file that resides on the root of your webserver and contains a list of files that you wish to be downloaded and stored for offline use. Here is a very simple manifest file:

CACHE MANIFEST # 2011-02-24 CACHE: program.js program.css

This informs the browser that you wish to have the files “program.js” and “program.css” downloaded to the local cache and available while offline. A reference to the manifest file needs to be included within the html tag of the default html file (usually index.html) to inform the browser to look for it: The index.html file that contains the “manifest” directive should not be included within the manifest file itself as some browsers will complain about that. There are some other quirky things about manifest files that can catch you up, here are two:

a. The manifest files must be returned by the webserver with a content type of “text/cache-manifest”. Within apache you can make this happen by adding the following directive to your conf file, or to your .htaccess file:

AddType text/cache-manifest .appcache

b. The Manifest file must account for all assets, even ones you might now know about or control. So for example, if your site say pulls image from a third party, but those images are not in the manifest file, then you will likely have issues while online (sounds odd, but true). The way around this is to include the NETWORK directive within your manifest file, so for example you can do this:

CACHE MANIFEST # 2011-02-24 CACHE: program.js program.css # Online resources NETWORK: *

Using a wildcard, this informs the cache that anything not explicitly listed under the CACHE directive are available via the network while online. There are other directives that can be used within the manifest file as well as javscript functions for controlling the loading and refreshing of the cache. But for most cases the above should get you rolling.

2. Offline Storage

Offline storage is a mechanism that allows you to store large amounts of data offline using a SQL like interface. This allows for sophisticated storage and retrieval mechanisms that can be used to more or less replicate a file system. This could be interesting for online games developers that want to store new maps or levels for offline play, or any number of use cases. Unfortunately there are 2 competing standards within html5 offline storage, WebSQL and indexDB. WebSQL is supported within WebKit browsers such as Chrome and Safari while indexDB is supported by FireFox and IE10. I will not cover indexDB in these examples, but rather focus exclusively on WebSQL. WebSQL is based on sqllite and if you have ever used sqllite in other contexts it will be very familiar to you. You create or open a database like this:   

var db = window.openDatabase('MyDB', '1.0', 'MyDB', 1024 * 1024 * 50)

This will create a database and reserve 50 Megabytes for it. The first 3 parameters are dbName, dbVersion, dbDisplayName. Now that you have your database, you can go ahead and use SQL to interact with it.

Create a table and insert a row:   

var db = window.openDatabase('MyDB', '1.0', 'MyDB', 1024 * 1024 * 50);     db.transaction(function (tx) {       tx.executeSql('CREATE TABLE IF NOT EXISTS test (guid TEXT, title TEXT)');       tx.executeSql('INSERT INTO test(guid, title) VALUES (?, ?)', [1, 'Hello World']);     });

This created a new table called “test” and inserted a row into that table in a single transaction, pretty cool. You can then query this table using the following technique:   db.transaction(function (tx) {     tx.executeSql('SELECT * FROM test ORDER BY position', [], function (tx, results) {        var len = results.rows.length;        for (var i = 0; i < len; i++) {          console.log(results.rows.item(i).title);        }      }); });

Pretty simple. For more information on WebSQL here is the reference to the current working group: http://www.w3.org/TR/webdatabase/

SHARE SOCIAL
Director of Technology
As the Director of Technology at Appnovation, Jim brings over 15 years of experience working with java language, online content management and marketing systems. Jim has worked with some of the most highly recognizable Fortune 500 companies to design, build and manage their marketing and CRM...→ More about Jim
Director of Technology

As the Director of Technology at Appnovation, Jim brings over 15 years of experience working with java language, online content management and marketing systems. Jim has worked with some of the most highly recognizable Fortune 500 companies to design, build and manage their marketing and CRM solutions. His past clients include AOL Time/Warner, NBC Universal, Hewlett Packard, Visa and American Express.

Prior to Appnovation, Jim served as the Chief Architect at Yesmail where he was responsible for all software architecture and development. Jim also served as the General Manager at M4 Internet, a full service online marketing company. An alumnus of Simon Fraser University, Jim holds a BA in Communication and Philosophy. 

Appnovation Technologies