Introducing the Firefox OS Boilerplate App

When coming to a new platform or context, it’s always good to get a peek at some code and examples how to make things work. With Firefox OS and app development, it’s just the web with a few additions.

Before here at Mozilla Hacks, we’ve covered a few ways to get started with building apps for Firefox OS:

My experiences

Lately I’ve been fortunate enough to give and take part in a number of workshops around Firefox OS, to see developers trying to build things for it, port their existing web apps and much more.

This has been a fantastic learning lesson for me, and it’s been crucial to see where people might need pointers, help or examples!

The Firefox OS Boilerplate App

This led to me creating the Firefox OS Boilerplate App. As the name implies, it’s there to provide you with the most basic features to get started with building an app from scratch, or tools to port your existing web app.

The idea is also to avoid any dependency on external libraries or resources, but rather be self-contained.

It contains:

  • An install button, offering you to install it as a hosted app
  • Web Activities – lots of examples and use cases
  • WebAPIs in action
  • Offline support (disabled by default)
  • Packaged apps – install your app as a ZIP file

It’s available on GitHub:

How to use it

The easiest way to get started, installing it and testing the various features, is to navigate to the Firefox OS Boilerplate App in the web browser on a Firefox OS device or in the Firefox OS Simulator.

Alternatively, install it in the Firefox OS Simulator Dashboard by providing either of these URLs:

Running it locally

Once you’re ready to get started developing, download the code and run it on a web server, or point out your local version of the Firefox OS Boilerplate App in the Firefox OS Simulator.

Note: make sure that the paths in the manifest file are valid on your localhost – bear in mind that these paths are relative to the root of the web site they are being served at.

Also make sure to configure your server to send the manifest file with the right Content-type: application/x-web-app-manifest+json.

This is, for instance, easy to set up in an .htaccess file in Apache:

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

Offline support

I’ve provided an .appcache file for enabling offline support (it’s disabled by default).

To enable offline capabilities, just add this to the index.html file:

<html manifest="manifest.appcache">

Please make sure to do your homework before enabling offline support, to avoid possible initial issues:

Remember that the .appcache file has to be served as a text/cache-manifest file:

AddType text/cache-manifest .appcache

Packaged apps

When you develop web apps, by default they are being delivered from a server, thus needing online connectivity or offline support to be enabled, to work as expected.

You do have another option, though, which is packaged apps. Basically, what this is, is putting all the files of your app into a ZIP file, making them available directly on the device itself.

Packaged apps can also request an elevated access to certain WebAPIs in Firefox OS that aren’t available to hosted apps (we’ll go more into the differences in a later post here on Mozilla Hacks).

There are a couple of files included in the Firefox Boilerplate OS App to help you get started, if you are interested in this.

To create and install a packaged app, you need to go through a few steps:

  • ZIP all app content (not containing folder), including regular manifest
  • Create a mini manifest (the package.manifest file) and make sure the “package_path” is absolute to where the ZIP is located
  • Developer name and info has to match between mini manifest and the regular one in the ZIP file
  • Have an installPackage call in JavaScript pointing to the mini manifest (instead of the regular install one) – this is shown in comments in the base.js file
  • Turn on Developer Mode in the Firefox OS Simulator (Settings > Device Information > More Information > Developer > Developer mode)
  • Add type property (e.g. "type" : "privileged") in the manifest if you want access to certain APIs

Note: the mini manifest has to be served as a text/cache-manifest file:

AddType text/cache-manifest .manifest

Work in progress

The Firefox OS Boilerplate App is a work in progress, meaning that it’s likely to change over time. I believe, however, that it gives you a good head start and look into what’s possible with web apps in Firefox OS.

Hope you like it, and please let me know what you think!

View full post on Mozilla Hacks – the Web developer blog

Leave a Reply