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
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
Pulsas sobre el icono de “Cronómetro“, y te pregunta si desea desinstalar y borrar datos:
Desinstalar app en FirefoxOS
Le damos a borrar, y volvemos al escritorio:
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
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
Pulsamos en instalar:
App instalada en Firefox OS
Y recibimos la confirmación:
App instalada en FirefoxOS
Y el escritorio:
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!