Drupal Solutions for You: Convert Your Site into a Firefox OS App

Thursday, February 27, 2014

Convert Your Site into a Firefox OS App

Open 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.oktamam.in">   

</head>

<body>

<p>Loading...</p>

</body>

</html>

In the previous code, replace http://www.oktamam.in 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.

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.oktamam.in"

}

}

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:

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.

Pages