Web App Manifest on Firefox OS

I keep on learning more and more about #FirefoxOS, and today I am going to write about Web App Manifiest. It sounds “complicated”, but it’s only a text file with a JSON string. The content of the file is very important because it constains all informario to install and run your app on Firefox OS.

In the post I already wrote about types of Firefox OS Apps (in spanish http://www.manejandodatos.es/2013/7/tipos-de-aplicaciones-para-firefox-os), there were two types: on hosted apps, the manifest in included on the directory, while on packages apps, the manifest file is included on the Zip file.

Web App Manifiest content

The minimal content requires name (limited to first 12 characters!!), description and launch_path, like this:

{
"name": "Mi App",
"description": "Descripción de mi aplicación",

"launch_path": "/"
}

But of course, there are more interesting options I recommend to include:

• lanch_path, is the path where the app starts, and it can be a file like index.html. or index.php, but also, you can leave it as  /
• icons, is the path to icons, and can include several sizes
• type, can be “web” or “privileged” depending on the API functions the app need to access. Default is “web“
• developer, allow you in include all information related to developer, website, ….
• version, is the versión number of the app
• permissions, is about permissions needed that must be allowed by the user to the app

This is a basic Web App Manifest, that you can use as a template:

{
"name": "My App",
"description": "Description of my app",
"lanch_path" : "/",
"icons": {
"256" : "/img/img_256.png",
"128" : "/img/img_128.png",
"120" : "/img/img_120.png",
"90" : "/img/img_90.png",
"64" : "/img/img_64.png",
"60" : "/img/img_60.png",
"48" : "/img/img_48.png",
"32" : "/img/img_32.png",
"16" : "/img/img_16.png"
},
"type": "web",
"developer": {
"name": "Developer Name",
"url" : "http://www.mywebsite.com"
},


"default_locale": "es",

"version": "1.0"
}

We save the file with the name manifest.webapp.

Until now, www.manejandodatos.es doesn’t include this WebAppManifest file, so, if you add the URL on the dashboard as a source, you’ll see the default icon:

The aspect on Firefox OS is this:

Validating a Web App Manifest

Now that I have upload the Web App Manifest to the server (and located on the root dir of www.manejandodatos.es), it’s time to try a very interesting tool to validate WebApp Manifest.

You can see I still have some problems to fix, but help is provided in order to solve as quickly as possible this issues:

The first action is to modify the .httpaccess file, as we see on the last item, and include these two lines of code:

AddType application/x-web-app-manifest+json .webapp
AddHandler x-web-app-manifest+json .webapp

A new try on validating the manifest, and things are going better!! Now with have no errors:

To gain information on how to fix the rest of the problems, the best action is to clic on “Validation results“, because now I have the complete inform, including suggestions:

First suggestion is related to the app name, initially with more that 12 characters (you can write whatever you want but it’s truncated to only 12 characters!). Another suggestion is about icons, where it’s is very useful to include icons 60×60, 90×90, 120×120, ….

Once fixed and back to the Firefox OS Dashboard, instead of loading the URL, we load the manifest.webapp file:

Now I don’t have default icons but the icons I told on the manifest.webapp file, and the aspect under Firefox OS is better:

And the website on Firefox OS:

Conclusion

Although the process of creating a Web App Manifest file seems to be easy, sometimes it is not, and some errors can occur, but using this kind of tools easify developer’s life. That’s a good point from Mozilla …  and for the success of Firefox OS!