Treehouse

Install Firefox OS Apps on Any Domain

By on  

The app store models we've grown up with suck:  you have to install apps from within those stores.  With iOS you go to a site, they provide a link to install their app, and you get swapped from the browser to the App store.  What an awful user experience.  The brilliant minds at Mozilla have found the solution to this annoying problem:  an installation system via the browser.  Let me show you how you can install your Firefox app outside of the Firefox Marketplace.

Part One:  manifest.webapp

Every Firefox OS app requires an manifest.webapp file and one of the manifest keys is installs_allowed_from, an array of hostnames which the app may be installed from:

{
  "version": "0.1",
  "name": "My App",
  "description": "My new awesome Open Web App",
  "developer": {
    "name": "Your Name",
    "url": "http://yourawesomeapp.com"
  },
  "installs_allowed_from": [
    "https://marketplace.mozilla.org",
  "http://davidwalsh.name"
  ]
}

Add the domain(s) you'd like to the installs_allowed_from array and you're golden.  Note that if you set the value of installs_allowed_from to ["*"], the app can be installed from any domain.

Part Two:  navigator.mozApps.install

The navigator.mozApps.install method triggers an installation of a web app on desktop or mobile device:

var manifestLocation = "http://davidwalsh.name/manifest.webapp"; // your domain here
var installRequest = navigator.mozApps.install(manifestLocation);

installRequest.onsuccess = function(data) {
    // App installed successfully!
};

installRequest.onerror = function(err) {
    // App couldn't be installed!
    console.log("Install error!");
};

The install method accepts a URL to the app's manifest.  The resulting object provides onsuccess and onerror callbacks to allow developers to respond to the result (i.e. hide the install button or display the install error).

The ability to install a Firefox OS app from any domain is a bonus you haven't gotten with iOS; this META tag is the closest you'll get.  Create a compatible manifest.webapp file and utilize navigator.mozApps.install to install your app from any qualifying domain.  Isn't Firefox OS' app install model beautiful?

ydkjs-3.png

Recent Features

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the...

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each...

  • An Interview with Eric Meyer

    I've always wanted to interview Eric Meyer. His early CSS books are a big reason this blog exists today and the reason why I'm a web developer. Eric gave me some time to hit the history of CSS,...

Incredible Demos

  • Background Animations Using MooTools

    Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an...

  • MooTools, Mario, and Portal

    I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal....

  • JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the...

Discussion

  1. Bob

    I think you’re trying to hard to sell us on this.

  2. bobby

    Bob it a little thing called passion. Don’t worry its a new concept, you’ll pick up on it sooner or later.

  3. If your app is not paid-for, then you should allow it to spread and be incorporated into other app stores and platforms in the open ecosystem by setting install_allowed_from to * or omitting it entirely.

    Gerv

  4. Tiago Celestino

    Can I develop app in localhost? How to config .manifest?

  5. Note that at least for free apps, the official advice is nowadays to omit “installs_allowed_from” completely, which implied the ["*"] setting. Why specify it when you allow everyone to install it freely? ;-)

  6. I would like to ask where is the best location to put the “navigator.mozApps.install” method? Let just say I have 15 static page, do I have to insert the “navigator.mozApps.install” method on every page?

  7. You can place that in an external “.js” file and include that on every page.

    • Hi David, I don’t really get part 2. Could you make a demo out of it? Will be a great help for me. Thanks.

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

Use Code Editor