Mozilla WebApp Development Using Orion

As part of the Orion 0.5 Release we looked at an initial take on Orion as a Web Application. Both Google Chrome and Mozilla are working on Web Application frameworks and have App stores to surface these applications to end users on Desktops and mobile devices.

This post is a quick and easy introduction to create a basic web application and to test it on OrionHub before deploying to your final hosting site. To start you need to be running the Mozilla Nightly build. Second you need to set up a whitelist for apps. To do this once you’re running the nightly you want to open “about:config” as a location (accepting the end the world warning). You then need to add a key “dom.mozApps.whitelist” with the String value “”. Exit and restart the Nightly.

Second, you need an OrionHub account. If you don’t have one yet you can go to OrionHub and click the Register button. Follow the steps to get an account for your email and wait for the password. Now login to OrionHub.

There’s a HelloWorld WebApp example hosted at GitHub you can clone into OrionHub. I’ve created a URI Template Link to open your Repo page and insert the URL so just click and then press Submit to start the clone. Wait for it to finish.

Switch to the OrionHub Sites page to create a self hosting site on OrionHub. Click on Create to make a site and make up a unique name for your site and press Submit. You’ll need to use this name later on.

On the site page that results, you want to map the directory created from the Github clone to the site, so pop down the Add button and choose the webapp_example folder.

When done that, click Save and then Start.

Although the self hosting URL shown has an 8080 you can also just omit that to look at the site. Ok so we now have a self hosted site mapped to the contents of the Github clone and it’s up and running. You just need to change one of the files in the webapp_example to make it reference the site name you picked.

In the navigator you can drill down to the file named helloworld.js, click it and when the editor opens change the site referenced in navigator.mozApps.install() to be your site name. Leave the rest of the URL the same. Save the file. You should be good to try to install your application.

In your Mozilla Nightly browser, navigate to http://[yoursitename] There should be a button titled “Install HelloWorld Web App”. Click it!

You should be warned about installing it but let it continue. The button should grey indicating the javascript code detected the app is already installed. You can see the App in two places. There’s a link in the page for in which case you should see

On Windows there’s a shortcut on the Desktop and on Mac OS you’ll see it as a clickable app in the Applications folder

Run the Web Application and you should see a self contained non-tabbed window open on the index.html off of your site.

Ok, sure there were a few steps here but I found it a very handy way to pre-test working on the OrionHub version of a Web Application before it was submitted by the Eclipse Foundation. If you have an Mozillian account that can access the App preview site, you can install the OrionHub WDE

This is just a first step of course since using app cache we should be able to offline contain an entire application. I hope to follow up with some examples of that with more complex code. What kind of troubles can you expect? Well, problems with the manifest, the icons, visibility to the site, location of files, the name of application matching in the manifest and in the javascript code checking to see if it’s installed. Also, these APIs are not solid yet so you have to keep monitoring the Mozilla Apps site. The “delete” application doesn’t seem to yet remove the shortcut or application on the Mac so you have to do this manually until they include that feature.

Remember that this isn’t how users will be normally installing your Application. There is a submission process where you provide your .webapp file off of your hosting site and other details including licensing, etc. The button used in this example is just to test things out.

Let me know if you have any problems, it worked perfectly for me of course.

This entry was posted in Tips & Tricks. Bookmark the permalink.