Writing a Boot2Gecko app

iPhone is so, like, yesterday. Is Boot2Gecko the future? Could be, if it’s as easy to create apps for as the Boot2Gecko blog makes it out to be. Here is my experience with creating an HTML5 webapp, making it “installable” on Boot2Gecko, and installing it on my Nexus S phone running B2G. It really was pretty easy. Really.

1. Create an app you want to be installable.
This more of a prerequisite, really. A Boot2Gecko app is really nothing more than a web application. For mine, I had an HTML5 “ToDo List” application written with JQuery Mobile that took advantage of offline caching that I wanted to try this experiment with. I was just serving it up via apache on my Linux box, and it run quite nicely in my phone’s webkit-based browser.

2. Create an app manifest.
No, not your cache manifest; this is a different animal. It needs to reside in your project’s root directory, as far as I can tell, and it’s in JSON. Mine follows; you can use it as a template. (You can also check the format of your manifest here.)

{  
  "version": "1.0",  
  "name": "ToDo", 
  "launch_path": "/todo/index.html",
  "description": "The requisite ToDo list PoC",  
  "icons": {  
    "128": "/todo/images/icon-128.png"  
  },  
  "required_features": [  
    "touch"
  ]
}  

The launch_path element designates the full path to the page that should load when the application is launched. Likewise, icons needs to designate a full path as well; I was hoping that this would be used as the icon in my B2G phone’s menu for my app, but unfortunately this did not work for whatever reason. I was stuck with a black square for an application icon. Don’t know what went wrong here.
This file should have an extension of .webapp. I called mine todo.webapp.

3. Set the correct HTTP content header for the manifest file.
Boot2Gecko requires the manifest file to have a content-type of application/x-web-app-manifest+json. I’m using apache to serve up my app, so I modified its mime.types file (in my /etc directory) by adding the following line:

application/x-web-app-manifest+json 	webapp

Once your restart your server, you can use curl to test the content type of the manifest file from your server:

curl http://url/to/your/application.webapp -I

This should return among other things, the correct Content-Type.

4. Create an install page for your app that implements the correct Open Web Apps API.
I was in a hurry, so I created a pretty lame page that was basically an html page containing a div with a listener added to it that would call the necessary code. I called it install.html; here it is in its entirety:

<!DOCTYPE html>
<html>
<head>
<title>Install page for ToDo app</title>
</head>
<body>
Install	<div id="install">ToDo!</div>
<script>
document.getElementById("install").addEventListener("click", function() {
    console.log("installing...");
    var installation = navigator.mozApps.install("http://url/to/your/application.webapp");
    installation.onsuccess = function() {
        alert("Thanks for installing!");
    }
    installation.onerror = function() {
        alert("There was a problem installing: " + this.error.name);
    }
});
</script>
</body>
</html>

You might want to make yours a bit more fault-tolerant. I told you mine was cheesy.

5. Start your server, then navigate to your install page on your B2G phone’s browser.
If all goes well, you should see your install page open. Click your link/button/whatever. You should see a dialog box asking if you want to install the application from your server’s address. Click “yes”. If all goes well, you will see a confirmation dialog saying the app was successfully installed. You should now be able to close the browser, and find your new application in your menu. Enjoy! To uninstall and try again, touch-hold on the app.

Here are some links for reference and further information:
Getting started guide
Open Web Apps API

Advertisements

About buffalobillion

Web Developer, JavaScript Balrog, Java dude, Ruby/Rails enthusiast. Guitar Playa.
This entry was posted in Mobile, Web Dev. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s