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
Y lo que vemos en el simulador:
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
Podemos comprobar que necesitamos mejorar y cambiar algunas cosas:
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
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
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
Y ya podemos ver el icono en Firefox OS
Manejandodatos en Firefox OS
Y la web funcionando 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!