Tuesday, June 11, 2013

Mozilla Application Development: Hello World

I have already taught you how to develop Chrome Application in my previous posts. We had used a manifest.json and a set of files to develop our first chrome application. Developing for Mozilla does not vary much when compared to the Chrome application. So if you had not developed for chrome before, developing for Mozilla will help you to quickly or rather parallely develop for Chrome.So let us start from scratch.
        Every application needs a manifest. Manifest is just a file that contains several details about the app that is required in order for the device to understand.For Chrome manifest files comes with the extension json. JSON (or Javascript Object Notation ) is a lightweight text-data interchange format. It is a collection of name/value pairs that describe the various properties of the application. In Mozilla the manifest is written in JSON but the extension is of the format webapp. So the manifest file is named as manifest.webapp. Here is a sample manifest of the Hello world app that you are about to develop.
  "name": "My App", // Name of the Application
  "description": "Hello World",  //Description of the Application
  "launch_path": "/index.html",  //first file that you want the application to launch
  "developer": {   //Developer details
    "name": "Abhijit",
    "url": "http://ltslab.blogspot.com"
  "installs_allowed_from": ["*"], //Mozilla supported devices
  "locales": {   //Languages
    "en-US": {
      "name": "Hello World",
      "description": "App"
    "it": {
      "name": "Hello World",
      "description": "App"
  "default_locale": "en-US",
  "icons": {  //Icons(Important)
    "120": "/icons/chrono-120.png",
    "60": "/icons/chrono-60.png"
  "orientation": "portrait-primary" //Orientation of the Application
I have not tried any hacks or tricks with this manifest and it is for you to try.
Once the manifest is completed, add the required icons with respective sizes.
Now open notepad type hello world and save it as index.html.
Now your app is almost complete.
Just Zip all these files together and make sure the manifest is corresponding updated.
Now validate your app here.
If you find any difficulty please feel free to use this.

So You have completed developing your first Mozilla App. Now think of some innovative idea and start working. Please refer Mozilla developer site for more details.

If you need any help at any point of time. Please drop your comments.

Stay tuned for more.


Post a Comment