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.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 16×16, 48×48 and 128×128.
- 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.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:
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.
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]
Thanks John. I’m almost shocked by how easy Mozilla have made this process.
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.
it stopping ,pls fix me
Hi @linaung,
is possible you zip the files inside a folder?
Same problem for me “error extracting manifest from zip file”
Hi Refayah,
Is possible have a link to your zip file? – my guess there is an extra folder inside.
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.
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]