Packaged App para Firefox OS. Cronometro

Posted by in Firefox OS

En la anterior entrada se explicó con detalle cómo programar un cronómetro como aplicación para Firefox OS, y se prepararon los archivos manifest.webapp, necesarios para su instalación como Hosted App.

Hosted App en Google Drive

En el curso necesité tener disponible la aplicación en Google Drive, así que el archivo manifest.webapp necesitaba unos cuantos retoque, quedando así:

{
"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"
}

Cómo podeis comprobar, la ruta de launch_path incluye una serie de subdirectorios, necesarios para acceder a la aplicación. Los iconos, sin embargo, están en ruta relativa.

Aquí tienes la ruta para instalar la aplicación desde Google Drive: .

REINSTALL FORBIDDEN

Es posible que te aparezca este error:

reinstall forbidden

reinstall forbidden

La solución pasa por desinstalar la aplicación, para ello, deja pulsado sobre el icono a desinstalar, hasta que aparezcan las cruces rojas:

Firefox OS

Firefox OS

Pulsas sobre el icono de «Cronómetro«, y te pregunta si desea desinstalar y borrar datos:

Desinstalar app en FirefoxOS

Desinstalar app en FirefoxOS

Le damos a borrar, y volvemos al escritorio:

firefoxOS

firefoxOS

Pulsamos fuera de los iconos para no desinstalar más.

Packaged App

Ahora, vamos a hacer la versión Packaged App del cronómetro, y que requiere la atención sobre varios aspectos.

Lo primero, es necesitamos modificar el manifest.webapp de forma que sólo necesitamos incluir las rutas relativas al proyecto. Básicamente, se trata Así, el código queda así:

{
"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"
}

El contenido es exáctamente el mismo, pero modificando las rutas absolutas de launch_path. El resto se mantiene exáctamente igual.

Ahora compromimos el contenido del directorio y ya tenemos el packaged.zip, una de las 3 partes (puedes llamarlo cómo tú quieras, pero el nombre deberás mantenerlo en package.manifest).

Creando index.html para Package App

Mientras que para una Hosted App hemos creado un install.html, en las Packaged Apps tenemos que utilizar index.html

El cambio en el nombre del fichero tampoco es asunto menor, sino que es bastante importante!!

El segundo de los pasos a seguir para crear una Package App es crear un fichero index.html, cuyo contenido es este:

<!DOCTYPE html>
<html>
<head>
<title>Manejando datos - Instalando Cronometro</title>
<meta charset="UTF-8">
</head>

<body>
<p>Manejando datos -Instalación del Cronometro</p>

<script>
(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>
</body>
</html>

El código Javascript hace uso de navigator.mozApps para validar si se puede o no instalar el paquete, y en caso de que se pueda, proporciona los métodos para poder efectuar la instalación, y recibir mensaje de correcto o error, según se pueda instalar o no la aplicación.

package.manifest

El tercer paso necesario es el fichero package.manifest, obligatorio para las Packaged Apps, y que básicamente contiene 4 datos.

NOTA: Ojo al nombre del fichero que NO es package.webapp como más de uno esperaría.

{
"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"
}
}

Este archivo es más sencillo que manifest.webapp (que va incluido en el fichero .zip), porque solo incluye:

  • version
  • name
  • developer
  • package_path

Sin embargo, un detalle muy importante relacionado con ambos ficheros es:

version, name y developer deben ser exáctamente iguales en el manifest.webapp y en el package.manifest

En caos de que no coincidan, obtendrán el error «Download stopped«:

Download Stoppeed

Download Stoppeed

Así que, aquí os pongo un resumen muy a tener en cuenta para realizar aplicaciones empaquetadas para Firefox OS:

  • El fichero package.ZIP no debe contener el directorio en el que están mis archivos de forma que al descomprimirlo mis archivos no queden por defecto dentro de ninguna carpeta.
  • Dentro de este ZIP debe ir todo mi proyecto web incluido el fichero manifest.webapp.
  • Para la descarga del package es necesario que index.html tenga supropio fichero manifest llamado package.manifest.
  • package.manifest debe contener sólo los atributos: «version», «name», «package_path», «developer».
  • «version», «name», «developer» deben tener el mismo valor tanto en el fichero package.manifest como en el fichero manifest.webapp (si no, obtendrán el error «Download stopped»).
  • Los atributos de path de los ficheros manifest.webapp y package.manifest no son iguales ya que si nos fijamos uno utiliza «launch_path» y el otro «package_path».

La versión del cronometro la tienes aquí, en la versión packaged app.

Instalar cronometro en FirefoxOS

Instalar cronometro en FirefoxOS

Pulsamos en instalar:

App instalada en Firefox OS

App instalada en Firefox OS

Y recibimos la confirmación:

App instalada en FirefoxOS

App instalada en FirefoxOS

Y el escritorio:

Escritorio final FirefoxOS

Escritorio final FirefoxOS

Espero que os sea de utilidad, pues el contenido de la entrada es bastante extenso y de cierta complejidad técnica.

Buen día!