O'Reilly

Turn Your Web Application into a Firefox OS App in 5 Minutes

By on  

One of the promises that comes with HTML5 mobile apps, especially those to be featured on Firefox OS, is that your existing web applications, if created properly (feature detection, responsive design, etc.), can be turned into a working mobile application in relatively little time.  And that's the way it should be, right?  If my app works in the device's browser, shouldn't it work perfectly as a standalone app?  Let's say you have a responsive, well-written website/app and you want to let Firefox OS users experience your work as a first class app;  the following few steps will help you make those Firefox OS app dreams a reality.

Step 1:  App Manifest

The manifest.webapp file is arguably the only real step you need to turn your website into a Firefox OS app.  This manifest should be placed at domain root level:


{
	"version": "0.1",
	"name": "Your App",
	"description": "Your new awesome Open Web App",
	"launch_path": "/index.html",
	"appcache_path": "/offline.appcache",
	"icons": {
		"16": "/img/icons/appicon-16.png",
		"48": "/img/icons/appicon-48.png",
		"128": "/img/icons/appicon-128.png"
	},
	"developer": {
		"name": "Your Name",
		"url": "http://yourawesomeapp.com"
	},
	"installs_allowed_from": ["*"],
	"locales": {
		"es": {
			"description": "Su nueva aplicación impresionante Open Web",
			"developer": {
				"url": "http://yourawesomeapp.com"
			}
		},
		"it": {
			"description": "Il vostro nuovo fantastico Open Web App",
			"developer": {
				"url": "http://yourawesomeapp.com"
			}
		}
	},
	"default_locale": "en",
	"permissions": {
		"systemXHR": {}
	}
}

And make sure to pronounce it properly within your .htaccess file:

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

This manifest serves as the real app glue -- add this manifest and your app is mostly complete.

Step 2:  Offline Cache

The ignorant press has sometimes laughed at Firefox OS because they believe Firefox OS apps need a connection to properly function -- not so.  The (admittedly ugly) offline cache API works beautifully on Firefox OS.  Add the following to your HTML:

<html manifest="offline.appcache">

With the pointer in place, you can create your offline.appcache with the list of files to download:

CACHE MANIFEST
# v0.1
/index.html
/css/app.css
/css/install-button.css
/img/offline.png
/img/online.png
/img/glyphicons-halflings-white.png
/img/glyphicons-halflings.png
/img/gradient.png
/js/app.js
/js/init.js
/js/install-button.js
/js/lib/install.js
/js/lib/require.js
/js/lib/zepto.js

Allowing app files to download to the device allow portions of the app to work even when the device is not connected to the internet.

Step 3:  Submit to Marketplace

As Paris Hilton can attest to, overexposure is 90% of success.  Submitting an app to the Firefox Marketplace showcases the app to millions of users around the world!

Stop the clock -- that's all you need to do to make your web application a Firefox OS mobile app.  There's a Twitter account, "Always Bet on JS", that makes me think "Always Bet on the Web."  During every talk I give, I ask attendees "If it works in the device's browser, why shouldn't it be a first class app?"  No one is able to tell me otherwise...and they're right.  We've built careers and billion dollar websites for thing long, and they work so incredibly well, why should that change now?  Mobile is a place to extend the traditional model  and Firefox OS makes that easier than ever before!

Track.js Error Reporting

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • jQuery Link Nudging

    A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery: The jQuery JavaScript It's important to keep...

  • MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

Discussion

  1. Stephen

    Hi David,

    Is there a developer contact email/person for FirefoxOS that we can talk to regarding application store payment setup?

    I’d like to submit a packaged application (game) however I wasn’t intending to release it for free. There doesn’t seem to be much/any information on setting up a vendor account, payment details etc. I’d hate to submit an application (which presumably is where all that info is hiding) only to find out I’ve just made it a free app because payment info wasn’t set up yet.

    Any insight/URLs I can get more info?

  2. Cesidio DiBenedetto

    David,

    Great stuff, but shouldn’t the manifest attribute be in the html tag as opposed to the head tag, or does it really matter?

  3. Can you use wildcards for the cache manifest?

  4. Fabrice

    If you are to use app cache, you should also add the “appcache_path” property to the manifest itself. This way, we preload the offline cache when installing the app, and not only at first use.

    This is documented there: https://developer.mozilla.org/en-US/docs/Apps/Manifest#appcache_path

  5. Peter Hull

    I just had a quick play with the Simulator 3.0. I found that the manifest file needed to be called ‘manifest.webapp’ otherwise it would validate OK but never actually run in the simulator window. Is this right?

  6. One small correction, line in .htacces should be

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

  7. Ajay

    Hi David,

    I would like to develop apps for Firefox OS. Is there any way that I get full documentation with API like in Android ?
    Is there any tutorial you have written for starting app development ?
    I know : HTML,CSS,JS.
    Do i need to know any more language?

  8. mostafa

    this is one of the best and amazing articles that i have ever read. good job David

  9. Karan Ganesan

    It is showing this

    Your AppPackaged App

    Last updated: never

    Open Location C:\Users\karan\Desktop\New folder\manifest.webapp
    Validation Result: INVALID (1 errors and 1 warnings)
    Errors:

    Denied permission ‘systemXHR’ for app type ‘web’.

    Warnings:

    Packaged apps don’t support appcache

    • Remove the permissions statement from the manifest

  10. Karan Ganesan

    what can i do

  11. I’m pretty sure your icon sizes are rather wrong.
    The FirefoxOS market just required me the following sizes: 60×60, 90×90 and 120×120

    • Actually, the validator is all over the place. It requires these plus 32×32, 48×48 and 128×128. Might as well create a directory filled with icon variations starting from 1×1 till 1920×1080…

      Anyway, thanks to your article my formerly phonegap-only app is now live in the market place: https://marketplace.firefox.com/app/docfinder/

  12. Chris

    Maybe usefull in case of problems with your manifest.webapp:

    https://marketplace.firefox.com/developers/validator

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...