HTML5 Powered with Offline & Storage(or Developing a Cross-Platform HTML5 Offline App – Part 3)

In Part 1 I discussed offline storage limits between the various browsers. Since then, Firefox 4 has come out of beta, IE9 has been released, and numerous other changes in the browser landscape have occurred.

Unfortunately I don’t have access to a Windows Vista/7 box, so I have no idea (in practice) what the IE9 AppCache storage limit is. But I will update this when I’m able to do some testing.  I also don’t really know about Chrome on Android as the only testing I can do is with the emulator, and it seems to crash on me a lot.

There don’t appear to be any changes in Safari or Firefox on the desktop.  However in this article I will outline a method to provide “unlimited” storage in Chrome on the desktop. In a follow-up article I will discuss a method to get around the 10MB limit in Safari on iOS.

The long and short of it is that to increase Chrome’s offline storage limit you need to create a Chrome “App”.  This requires very few (if any) changes to your application, but requires you to create a Chrome manifest file.  You don’t need to ever actually publish your app on the Chrome store, and can still host it all yourself.  It just requires an extra step for Chrome users (and some extra code for you, the developer).

From what I understand, in addition to browser extensions there are two types of apps you can create – a Packaged App and a Hosted App.

A packaged app is one that you create and can include a limited amount (10MB) of data. This app can then be published (and hosted by) Google on their Chrome App Store.

A hosted app is one that you host on your own servers (and the one that I’ll be discussing here). In this case there is technically no limit to the amount of data that can be included using “traditional” HTML5 offline caching technology. However in practice there is actually a limit of 260MB for your app with a per-resource limit of about 32MB (see this thread on the Chromium discussion group for details). According to the the discussion I was having with the developer, he agreed that these limits are quite low and will be increased in a future release.

Once you have your app developed you need to create a manifest file. The manifest should be called manifest.json and should look something like this:

{
	"name": "My Offline App",
	"description": "the description for my offline app",
	"version": "0.1",
	"app": {
		"urls": [
			"http://www.myapp.com/"
		],
		"launch": {
			"web_url": "http://www.myapp.com/app/",
			"container": "panel",
			"height": 700,
			"width": 700
		}
	},
	"icons": {
		"128": "icon_128.png"
	},
	"permissions": [
		"unlimitedStorage"
	]
}

All of the parameters you need to know for the manifest file are documented here, so I won’t bother repeating them, but suffice it to say you should take a good read through Google’s docs on creating a hosted app.

Note the key piece to the storage issue is the permissions array, specifically:

"permissions": [
	"unlimitedStorage"
]

This section is what tells Chrome not to limit how much storage is available to your application.

In addition to the manifest file you need a 128×128 px icon for your app.  Once you have both of these files you can test your app by following the instructions listed here verbatim (again, they’re fairly straightforward so I won’t bother republishing them).

Ok, so now you have a functional, offline app that installs in Chrome and gives you “unlimited” storage. So what now? How do you get this out to your users? Well, I believe you can use the Chrome store, but if you’re already publishing this app on your own server, what’s the point in directing users out of your environment in order to install the app? (That question is rhetorical – there isn’t one).

In order to package your app up into a Chrome installable .crx file, follow the instructions shown here, again verbatim. You will end up with a nice .crx file that you can now deploy to your users.

But how? WTH is a .crx file? Well, the simplest way that I found to serve this file up to my users is wrap it in a PHP script. This page documents the requirements for hosting a .crx file, but doesn’t really tell you how to do it.

Serving up the .crx file with PHP really couldn’t be easier. Just make sure the .crx and the .php file are in the same directory and it’s only a few simple lines of code to tell Chrome to install the app:

<?php
$file = 'myapp.crx';
header('Content-Type: application/x-chrome-extension');
readfile($file);
?>

Personally, I haven’t really worried about versioning the .crx file. After all, the .crx is just a wrapper that allows me to tell Chrome to use more storage than it would normally allow. Versioning is all handled from within the app, and because it uses the intrinsic HTML5 caching mechanism I can be sure that users will always have access to the latest version (as long as they’re online).

And that’s it. Now your HTML5 offline app has ~260MB of storage available in Chrome.

Next I’ll be tackling an interesting way to work around the 10MB limit in Safari on iOS. Stay tuned.