El nuevo manifiesto de aplicaciones web

Introducción

El manifiesto para aplicaciones web es un estándar de la W3C para definir, mediante un fichero JSON (usualmente manifest.json), como se comporta nuestro sitio web a la hora de actuar como una aplicación web.

Hasta ahora nuestra opción era depender de la etiqueta <title> para el título de la aplicación y un montón de etiquetas <link> y <meta> (apple-touch-icon, icon, msapplication, etc.) para gestionar los iconos a distintas resoluciones. Cuando un usuario añadía nuestra web a la pantalla de inicio de su teléfono móvil, aparecía utilizando este título e iconos dependiendo de la plataforma que tuviese el usuario. Esta técnica no era muy amigable para los desarrolladores y no ofrecía flexibilidad ni facilidades en el mantenimiento de estas directrices.

La W3C se puso las pilas y ahora podemos hacer uso del manifiesto para aplicaciones web.

Creando el manifiesto

Para crear nuestro manifiesto utilizaremos un fichero .json, que se puede llamar como nosotros queramos (usualmente es manifest.json). Más o menos un ejemplo básico sería el siguiente:

{
  "short_name": "felixsanz",
  "name": "Félix Sanz | Blog",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}

Estas propiedades vienen a decir lo siguiente:

short_name

Es el nombre corto de la aplicación y se usará por defecto.

name

a versión larga del nombre.

icons

Especifica una lista de imágenes que se usarán dependiendo del dispositivo.

start_url

Especifica la dirección que cargará al abrir la aplicación web.

display

El modo de presentación que obtendrá nuestra aplicación al abrirse. Puede ser fullscreen, standalone, minimal-ui o browser. Esto permite también hacer uso de display-mode en nuestros @media para aplicar estilos CSS dependiendo del display.

orientation

La orientación que adquiere nuestra aplicación al abrirse. Puede ser portrait o landscape.

Puedes consultar el resto de propiedades en el estándar oficial.

Utilizando el manifiesto

Para utilizar el manifiesto basta con incluir una referencia en la cabecera de nuestro código HTML:

<link rel="manifest" href="/manifest.json">

Y eso es todo, haciendo uso de funciones como "Añadir a pantalla de inicio" del navegador Chrome para Android, los usuarios utilizarán nuestro sitio web como si de una aplicación nativa se tratase.