Web apps on GitHub Pages that install into Gaia

This is part of my exploration into making apps with the web. This particular example explores:

• Trying out the Boot to Gecko's (B2G) Gaia UI in Firefox Nightly
• Using the Mozilla Web Apps API to install a web app
• Hosting the appcache-enabled web app using GitHub Pages

Here is a video that shows how it came together:


A text summary of the video:

B2G and Gaia

B2G is Mozilla's mobile device operating system. It has a set of web apps called Gaia that show the home screen and some default apps, like a phone dialer.

I did not want to flash a phone to try out Gaia and the B2G ideas. Fortunately, Firefox Nightly is very similar to the Gecko version used in B2G. So by running Firefox Nightly, you can run Gaia on your desktop.  Plus, you can do so without messing up your default Firefox installation.

This way you can try out the UI and to experiment with web apps and APIs that would allow you to make apps that install into Gaia. Firefox Nightly does not have all the device APIs, like the telephony APIs, but for most apps it has enough to get you started.

Gaia, and the web apps it supports, are all served from domains. There can only be one app per domain. Fortunately you can use subdomains. This works out well when hosting your web apps on GitHub Pages. You do need to obtain a domain, but then you can map your subdomains (a.domain.com, b.domain.com) to different GitHub Pages repos.

I used Node to run a dev web server that serves the Gaia UI from localhost. See the jrburke/gaia-devserver README on information on how to set that up.

Setting up your web app project

I used volo to create a new appcache-enabled, responsive web project using the volojs/create-responsive-template project template. When creating the template, you have the option to create one that works as a GitHub Pages project. volo also runs the build to generate the appcache-enabled build of the project. Since it uses appcache, the app could be usable even when a B2G device is offline.

Once I created the project, I ran git init and set up gh-pages branch. Then I added the CNAME file so that I could configure a subdomain that I own to point at GitHub Pages. Then I committed all the changes.

The web project also comes with tools/devserver.js to run a local web server that serves the dev version of the app. By modifying my local /etc/hosts file to point a dev test domain at my localhost, I could do development and try out the app install code.

Uninstalling

I did not show this in the video, but to uninstall the app go to https://myapps.mozillalabs.com/, find the app, click the mouse and hold down the button. An X will appear. Release the mouse button to uninstall it.

For that to work, you need to give myapps.mozillalabs.com access to uninstall apps:

1) Close Firefox Nightly

2) edit gaia/profile/user.js

3) Add https://myapps.mozillalabs.com to the 'dom.mozApps.whitelist:

user_pref("dom.mozApps.whitelist","http://dialer.gaiamobile.org:8424,http://homescreen.gaiamobile.org:8424,https://myapps.mozillalabs.com");

4) Launch Firefox Nightly. Now you should be able to uninstall your app when going to https://myapps.mozillalabs.com/

End Result

Pretty neat. There are still some rough edges, but it is exciting to try out.

At some point, I want to trick out the project template to allow adding in Persona/BrowserID for identity hookup, but I will need to run a smart server to handle the user info. I also want to look more into IndexedDB as a client side data storage.

In addition, it would be interesting to see how I could get this to work so it shows up in the Chrome Web Store and how it might fit in to the Windows 8 web app support.