Home Others Getting started Writing Your First Firefox OS Apps

Getting started Writing Your First Firefox OS Apps

Published by

Last updated: September 15, 2021

Firefox OS A brand new OS for smart phones.This OS User-interface & Apps are written with HTML, CSS & JS .Today in this Article If you are interested in building apps which runs in devices having Firefox OS .

Firefox OS apps are basically Web Apps!these apps run not only in Firefox OS devices, but on any device that have a browser!!! Like Android Too !! Let’s Start Here……

STEP 1: CREATE A DIRECTORY NAMED FIREFOXOS

Create a directory named firefox anywhere in your computer. This will be the base directory – we put all files of our app here.

Create a file index.html (it doesn’t need to be index.html, it could be any name with .html extension) in the hello directory.

SEE IT IN YOUR BROWSER

Open the index.html file with your Firefox Browser. You can double-click or right-click then open with Firefox.

But…doesn’t look like a mobile app!
Because, we’ve not taken care of screen size & others.
TIPS
To test mobile screens with various sizes, press Control + Shift + M in your Firefox!

STEP 3: CREATE MANIFEST FILE

All Firefox OS apps need a manifest file. The manifest file tells the app’s name, description, permissions it requires and some other basic settings.

Manifest file can have any name,I used heremanifest.webapp but it should have .webapp extension.

{
"name": "Hello FireFox OS",
"description": "This An FireFox Hello World Apps",
"launch_path": "/index.html",
"version": "0.0.1",
"icons":{
        "16": "/img/icon-16.png",
        "32": "/img/icon-32.png",
        "48": "/img/icon-48.png",
        "60": "/img/icon-60.png",
        "128": "/img/icon-128.png"
},
"developer": {
"name":"The DevLine",
"url":"http://www.thedevline.com"
}
"default_location":"en"
}

INSTALL APP IN THE SIMULATOR!

1. Open App Manager by typing about:app-manager in the address bar of browser
2. click Start Simulator > Firefox OS x.x from the bottom bar
3. Click Add Packaged App & select the folder which contains manifest.webapp file you just created.
4. Click update

Go to the simulator & fine our app installed.

MORE FUN: ADD SOME SCRIPTS

We will add a text input box and a button in our simple app.

When user clicks button, an alert box with the text in the input field will be shown.

CHANGE THE index.html FILE

TO ADD THE INPUT ELEMENTS

CREATE A FILE NAMED apps.js

INSIDE YOUR PROJECT JS DIRECTORY( Create A JS Directory for put JS file only )

And Add the flowing code insert your apps.js file .

//to UI elements
var button = document.getElementById('myButton');
var txtInput = document.getElementById('myTextInput');
// Bind click event of the button with an event listener
button.addEventListener('click', function(){
    var text = txtInput.value;
    // Show alert box with this text
    alert(text);
})

Open Simulator and click Update And See the Result