O'Reilly

Firefox OS Manifest .htaccess Handler

By on  

Want to know one of the secrets why Firefox OS is so incredibly awesome?  If you've created your website correctly, i.e. using CSS media queries (responsive design) and JavaScript feature detection, you can simply add an app.manifest file at the root of your domain and you've instantly created a Firefox OS app!  Of course you'll then want to list your app in the Firefox Marketplace.  The most frequent problem developers run into is with their app.manifest file not being served correctly.  With an update to the .htaccess file of the hosted app, that problem can go away!

The .htacess Code

The problem is that the manifest.webapp file isn't being served properly, so an AddType is the key:

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

The .htaccess snippet above ensures that the manifest is served correctly, thus eliminating the annoying manifest error and letting you get your app listed on the Marketplace!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

  • CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...

Discussion

  1. In my nginx config manifest listed as(taken from mime.types file):
    text/cache-manifest manifest;
    If based on your example it would be:
    application/x-web-app-manifest+json manifest

  2. Stanton Moreland

    This is a really helpful post as I was looking to add my app on the Firefox marketplace for some time now. I am going to check it out soon! Since I am huge fan of Firefox Add-on Builder and SDK, I want you to check this blog post regarding developing Firefox add-ons.

    http://groupdocs.com/blog/tech-blog/archive/2013/02/01/developing-firefox-add-ons-with-the-add-on-builder-and-sdk.html

    I use GroupDocs viewer plugin for Firefox and it has good performance for a browser-based app but this add-on post has me confused. Hoping to hear from you on this!

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