| Coding Tutorials

firefox-osOpen web apps are here thanks to Firefox OS, which makes it possible to build apps with only HTML, Javascript and CSS.

This is a great advantage for web developers who don't want to code for iOS or Android devices.

In this tutorial, we'll show you how to convert your existing responsive website into an app that can run on Firefox OS devices.

Step #1. HTML file

  • Create a file named index.html with the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>OSTraining Blog</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">    
        <meta http-equiv="refresh" content="5;url=http://www.ostraining.com">    
    </head>
    <body>
        <p>Loading...</p>
  </body>
</html>

  • In the previous code, replace http://www.ostraining.com with your own URL
  • Replace 5 (seconds) with the loading time to display the message: "Loading..."

Step #2. Icon images

  • Create 3 .png images. These will need to be of different sizes for use on different devices. We're going to create icons that 16x16, 48x48 and 128x128.
  • Create a folder called /img/ and place the images inside.
website firefox os app

Step #3. Manifest file

  • Create a file called manifest.webapp and add the following code:

{
    "version": "1.0.0",
    "name": "OSTraining Blog",
    "description": "Blog post and tutorial about web development",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/icon-16.png",
        "48": "/img/icon-48.png",
        "128": "/img/icon-128.png"
    },
    "developer": {
        "name": "Valentin Garcia",
        "url": "http://www.ostraining.com"
    }
}

  • Version: is the software control for the app
  • Name: the name of your app
  • Launch pat: should point this to your index.html file
  • Icons: you can set the icons path
  • Developer: your developer name and URL

Step #4. Create the install package

  • Create a zip file with your files inside:
website firefox os app

Step #5. Submit your app

  • The final step is send the zip file to Firefox Marketplace.
  • If you don't have an account, create one and login. Then go to Developers page >> Submit An App.
  • Once you complete the form and upload the zip file, you need to wait for the review and approval. This may take from hours to days.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.