Web App Manifest para Firefox OS

Posted by in Firefox OS

Seguimos aprendiendo más cosas sobre #FirefoxOS, y hoy toca el turno a los Web App Manifiest, que es algo así como el Manifiesto de la Aplicación Web. El nombre suena bastante rimbombante, pero no es nada más que un fichero de texto, cuyo contenido es una cadena JSON, y que además es un fichero muy importante porque contiene la información necesaria para instalar y correr las aplicaciones en Firefox OS. De ahí su importancia!

En la entrada donde describíamos los tipos de aplicaciones de FirefoxOS, en el caso de las aplicaciones web (hosted) hay que incluir este Manifiesto dentro del directorio URL. En las aplicaciones empaquetadas, el fichero va incluido en el Zip.

Contenido mínimo de Web App Manifiest

El contenido mínimo es name (está limitado a 12 caracteres!!), description y launch_path, tal que así:

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

"launch_path": "/"
}

Pero hay otras propiedades que son bastante interesantes, y que se recomienda incluir:

  • lanch_path, es la ruta que inicia la aplicación, normalmente un fichero index.html. o index.php, pero también puede dejarse como /
  • icons, es la ruta a las imágenes, y además pueden contener varios tamaños
  • type, que puede ser «web» o «privileged» en función de si necesitamos acceder a ciertos APIs. Por defecto es «web«
  • developer, es para incluir información sobre el desarrollador, web, …
  • version, es la versión de la aplicación
  • permissions, es sobre los permisos que tiene que dar el usuario a la aplicación

Este es el esqueleto básico de un Web App Manifest, que de dejo aquí para que lo uses como plantilla:

{
"name": "Mi App",
"description": "Descripción de mi aplicación",
"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": "Nombre",
"url" : "http://www.miwebsite.es"
},

"default_locale": "es",

"version": "1.0"
}

Lo guardamos con el nombre manifest.webapp.

Hasta el momento, en www.manejandodatos.es no hemos incluido este WebAppManifest, y al agregar la URL como fuente, vemos un icono por defecto:

Cargando www.manejandodatos.es en Firefox OS

Cargando www.manejandodatos.es en Firefox OS

Y lo que vemos en el simulador:

ManejandoDatos en Firefox OS

ManejandoDatos en Firefox OS

Validador de Web App Manifest

Ahora hemos subido el Web App Manifest al servidor (en el directorio raiz), pero vamos a probar una herramienta de lo más interesante, y se trata de un validador de WebApp Manifest.

Validador de Web App Manifest de Firefox OS

Validador de Web App Manifest de Firefox OS

Podemos comprobar que necesitamos mejorar y cambiar algunas cosas:

Errores del WebApp.manifest

Errores del WebApp.manifest

La primera de las modificaciones a realizar, según vemos en el último apartado, es sobre el fichero .httpaccess, y que es incluir las siguientes dos líneas:

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

Ya va mejorando el asunto, ahora sin errores, pero todavía con algunas mejoras posibles:

Validación del WebApp.Manifest

Validación del WebApp.Manifest

Para corregir el resto de sugerencias, lo mejor es pinchar en el enlace de «Resultados de la validación«, porque podemos ver el informe completo, e incluso nos aporta enlaces con sugerencias:

Informe de validación del WebApp.Manifest

Informe de validación del WebApp.Manifest

La primera de las recomendaciones es sobre el nombre de la aplicación (name), que es más largo de los 12 caracteres permitidos (bueno, en realidad puedes poner los que quieras, pero sólo verás los 12 primeros!). Otra recomendación es sobre iconos, donde es importante incluir un icono de 60×60, 90×90, 120×120, ….

Una vez enmendado, volvemos al Dashboard de Firefox OS, y cargamos, en lugar de la URL de la Web, el fichero manifest.webapp:

Dashboard de Firefox OS

Dashboard de Firefox OS

Y ya podemos ver el icono en Firefox OS

Manejandodatos en Firefox OS

Manejandodatos en Firefox OS

Y la web funcionando en Firefox OS:

Manejando datos en Firefox OS

Manejando datos en Firefox OS

Conclusión

A pesar de que la creación del archivo Web App Manifest parece sencillo y no tienen complicación, a veces sí que se producen errores, por lo que la incorporación de estas herramientas son vitales para los desarrolladores, además de que facilitan la corrección de errores, sugerencias, etc, … Todo lo que sea para que Firefox OS tenga éxito!