Firefox OS Packaged apps. Chronometer

On a previous entrance I explained with full details how to program a chronometer for Firefox OS, by using manifest.webapp, a file needed for installing Hosted App.

Hosted App on Google Drive

On the course where I learnt all this, I needed to upload my exercises to Google Drive, so, I modify the manifest.webapp file like this:

{
"name": "MD Crono",
"description": "Manejando datos, por David Trillo Montero",
"launch_path" : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/crono.html",
"icons": {
"256" : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono256.png",
"128" : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono128.png",
"120" : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono120.png",
"90" : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono90.png",
"64"  : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono64.png",
"60"  : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono60.png",
"48"  : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono48.png",
"32"  : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono32.png",
"16"  : "/host/0B-gMR7f1jSKvZmNza1c1SlVyV3M/img/crono16.png"
},
"type": "web",
"developer": {
"name": "David Trillo Montero",
"url" : "http://www.manejandodatos.es"
},
"version": "1.0",
"default_locale": "es"
}

As you can see, the launch_path include subdirectories (of Google Drive), needed to acces to the app. Also, you can review how the icons are on relative paths.

Here you have the link to my Google Drive for installing the app on your Firefox OS device as hosted: .

REINSTALL FORBIDDEN

If anytime dealing with Firefox OS you get this REINSTALL_FORBIDDEN error:

The solutions is to uninstall the app. One way to do it is press the icon of chronometer for a few seconds until the red cross appear:

Click on the Chronometer icon and you will be asked to unistall and delete the data:

Press on Delete, and you’re back to desktop:

click outside the icons to stop unistalling apps.

Packaged App

To create the Packaged App of chronometer, you ned to be aware of a few things.

First, you need to modify the manifest.webapp file by including relative paths only. The new code is like this:

{
"name": "MD Crono",
"description": "Manejando datos, por David Trillo Montero",
"launch_path" : "/crono.html",
"icons": {
"256" : "/img/crono256.png",
"128" : "/img/crono128.png",
"120" : "/img/crono120.png",
"90" : "/img/crono90.png",
"64"  : "/img/crono64.png",
"60"  : "/img/crono60.png",
"48"  : "/img/crono48.png",
"32"  : "/img/crono32.png",
"16"  : "/img/crono16.png"
},
"type": "web",
"developer": {
"name": "David Trillo Montero",
"url" : "http://www.manejandodatos.es"
},
"version": "1.0",
"default_locale": "es"
}

The content is exactly the same, but the paths on launch_path.

The second part is to zip the files of the HTML5 app (including dirs if neccesary) on a file called packaged.zip  (you can name it as you like, but the name should be the same on package.manifest).

Creating index.html for Packaged App

You create a install.html for a Hosted App, but you need to create an index.html for a Packaged Apps

This change of names is important!

The second step to create a Package App is to create index.html, with this content:

Manejando datos - Instalando Cronometro
<meta charset="UTF-8" />

Manejando datos -Instalación del Cronometro

<script type="text/javascript">// <![CDATA[
(function() {
var manifestUrl = location.href.replace("index.html","") +'package.manifest';

if (! navigator.mozApps.installPackage) {
alert("ERROR: Esta aplicación no es compatible con tu dispositivo.");
return; }

var req = navigator.mozApps.installPackage(manifestUrl);
req.onsuccess = function() { alert("Instalacion completada."+this.result.origin); };
req.onerror = function() { alert("Error de instalación: "+this.error.name); };
}
)();
// ]]></script>

The Javascript cade uses navigator.mozApps for validating if the can can or cannot be installed, and it case it can be, it gives methods for installing and for receiving error.

package.manifest

The third step is the file package.manifest, compulsory for Packaged Apps, and basically it constins 4 data.

NOTA: Watch out that the file name IS NOT package.webapp cas more than one expect.

{
"version": "1.0",

"name": "MD Crono",

"package_path": "https://googledrive.com/host/0B-gMR7f1jSKvX2ZzSGRURlktUms/cronometrop.zip",

"developer": {
"name": "David Trillo Montero",
"url" : "http://www.manejandodatos.es"
}
}

This file is easier than manifest.webapp (included on the .zip file), becuase it only needs:

• version
• name
• developer
• package_path

a very importan deatil related to both files is:

version, name y developer should be exactly igual in manifest.webapp and in package.manifest

In case the text won’t be igual, you can get a Download stopped error:

Here I resume this tips to be aware for creating Packaged Apps for Firefox OS:

• The package.ZIP file should not include the dir where the files are. That is, after unzip the zip file, all files should be on the root.
• The whole project should be on the zip file, including the manifest.webapp.
• the file index.html is needed for downloading the package, included on the package.manifest file.
• package.manifest should contain only “version“, “name“, “package_path“, “developer“.
• “version”, “name”, “developer” should have the same values in package.manifest and in manifest.webapp (or you’ll get a “Download stopped” error).
• The path attributes in manifest.webapp and package.manifest are not the same. One uses launch_path and the other package_path.

The chronometer packaged app is here.

click on Install:

And you receive the confirmation:

The desktop:

I hope all content will be useful for you, and have a nice day!