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

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

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

Written by David Walsh on April 29, 2013 ·   8 Comments

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 .manifest

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!