El manifiesto para aplicaciones web, un nuevo estándar

9 de abril de 2015

#general

Por

Félix Sanz

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

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:

manifest.json

JSON

{
  "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:

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 LinkedIn