Detecting Mozilla App Install Capabilities with JavaScript

By  on  

If you follow me on Twitter, you know I'm riveting super excited about the forthcoming Firefox Marketplace. A marketplace where you can download desktop, tablet, and mobile phone applications based on web technologies, from a host with a record as awesome as Mozilla, is a dream come true. The initial install process is powered via a JavaScript interface within Firefox, and if you can detect if the user's current Firefox install has app capabilities, you can advertise your own app when they come to your website.

The JavaScript

Feature detection is the best way to discover if the user's browser can install Firefox Marketplace applications:

var canInstallMozApp = !!(navigator.mozApps && navigator.mozApps.install);

Marketplace features live within the navigator object under the mozApps property. The install method triggers app installation, so that's ultimately the method whose existence should be checked. If present, the user has app install capabilities and you know you can show a "download our app" advertisement or, if your app manifest is configured properly, you can install the app from your own site!

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Chris Coyier’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

Discussion

  1. Alex

    I personally can’t find a use for it even if combined with OpenCl, WebGl in the not-so-distant future.

  2. Nice! Potch has some boilerplate install code. I think it should use this snippet if it doesn’t already.

  3. Nice, first I’ve heard of this. Now to think if an app. :-)

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