El manifiesto para aplicaciones web, un nuevo estándar

Crea un fichero manifest.json para tu sitio web y acorta distancias con respecto a las funcionalidades de la plataforma nativa.

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. De esta manera conseguíamos que cuando un usuario interactuase con nuestro sitio web por ejemplo, añadiéndolo a la pantalla de inicio de su teléfono móvil, apareciera utilizando este título e iconos dependiendo de la plataforma o móvil que tuviese el usuario. Esta técnica no era muy amigable para los desarrolladores ya que ensuciaba el código HTML y además no ofrecía flexibilidad ni facilidades en el mantenimiento de estas directrices.

Add to Homescreen, la nueva funcionalidad de Chrome para Android
Add to Homescreen, la nueva funcionalidad de Chrome para Android

Así pues, 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 | Artículos",
  "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:

Propiedad Descripción
short_name Es el nombre corto de la aplicación y se usará por defecto.
name La versión larga de nuestro 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 se tratase.

Compartir en

Facebook Twitter Google+ LinkedIn