Convert Your Site into a Firefox OS App

Firefox OS

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:

{codecitation}<!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>{/codecitation}

  • 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 16×16, 48×48 and 128×128.
  • 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:

{codecitation}{
“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”
}
}{/codecitation}

  • 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.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
John

You don’t need a packaged app for this. App can be remotely hosted, so you can just host a manifest file on your site and submit the url to the marketplace:
[url=https://developer.mozilla.org/en-US/Marketplace/Publishing/Publish_options#Hosted_apps]https://developer.mozilla.o…[/url]

steve

Thanks John. I’m almost shocked by how easy Mozilla have made this process.

htmgarcia

Hi John,

you’re right, there are hosted and package apps.
In this short tutorial we show how make an app displaying a very simple “Loading” message and then linking to a website, this can add an extra experience displaying the loading text.

linaung

it stopping ,pls fix me

htmgarcia

Hi @linaung,

is possible you zip the files inside a folder?

DrTechenstein

Same problem for me “error extracting manifest from zip file”

htmgarcia

Hi Refayah,

Is possible have a link to your zip file? – my guess there is an extra folder inside.

Niladri dutta

Your zip file should be at the same folder where the manifest file is.Zip only the codes including the manifest and place the zip along with the manifest.

Niladri dutta

Can you tell me how to convert my Firefox application into an Add-on for firefox browser?? Here is the link :
[url=https://marketplace.firefox.com/app/zipcodesearch/]https://marketplace.firefox…[/url]

9
0
Would love your thoughts, please comment.x
()
x