Cómo convertir una web en Web App

En este artículo explico qué es una Web App y cómo convertir cualquier web en una.

De esta manera vamos a poder mostrar la web como si fuese una aplicación nativa del sistema operativo que estemos utilizando, es decir, sin barra de navegación, a pantalla completa y este tipo de detalles.

Si quieres un ejemplo de cómo funciona lo tienes en esta misma web, ¡añádela al escritorio de tu móvil o tableta!

La W3C está creando un nuevo estándar para definir estas Web Apps. De momento disponemos de un borrador en el que se sigue trabajando.

Básicamente es una forma de definir el comportamiento de una aplicación web cuando la llamamos desde el escritorio de un dispositivo.

Se pueden especificar parámetros como el nombre y el icono a mostrar en el escritorio, su descripción e incluso su funcionamiento (pantalla completa, apaisado, ...).

Aunque todavía no es un estándar que funcione en todos los dispositivos, ya hay muchos que lo implementan.

Es un método muy similar al que ya se está empleando en las definiciones de las aplicaciones de algunos sistemas móviles o incluso de extensiones para navegadores por Google o la Fundación Mozilla.

¿Qué es una Web App?

En pocas palabras: una Web App es una web que se muestra de manera similar a una aplicación nativa.

Por ejemplo, en un teléfono móvil se añade un icono al escritorio. Cuando se pulsa se abre la web a pantalla completa y sin barras de navegación ni botones, como si fuese una aplicación propia. Incluso se le puede añadir una pantalla de carga o splash screen.

La W3C creó otro documento, en estado borrador (en el momento de escribir este artículo), para explicar los casos de uso y las necesidades de donde surgió todo esto:

https://w3c-webmob.github.io/installable-webapps/

Esto está evolucionando rápido y ya hay sistemas operativos que permiten incluso definir qué partes del sitio deben guardarse por si es necesario utilizarlas sin conexión.

Archivo manifest

Es un archivo con formato JSON. Su extensión puede puede ser .json o .webapp.

Aquí es donde se definen todos los parámetros, incluso de arranque y funcionamiento:

• Nombre
• Iconos para las distintas plataformas
• Descripción
• Splash Screen
• Pantalla completa
• Orientación de la pantalla

Este archivo suele ubicarse en el directorio raíz de nuestro sitio web, aunque no es imprescindible. Lo aclaro en el punto de cómo se llama a este archivo.

Por supuesto, como esto es algo que todavía no está 100% definido, cada fabricante tiene su solución. Para los navegadores de Microsoft hay otro archivo llamado browserconfig.xml en donde se definen todos estos detalles. Enlace a la documentación de Microsoft.

En los siguientes enlaces puedes comprobar el contenido de los archivos de esta web:

• manifest.json
• browserconfig.xml

Llamada al archivo manifest.json

La cabecera de nuestra web debe indicar mediante una etiqueta la existencia de este archivo. Por ejemplo:

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

También está recomendado indicar en la configuración del servidor cómo gestionarlo, por ejemplo, en Apache basta con añadir un par de líneas al archivo .htaccess:

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

AddHandler x-web-app-manifest+json .webapp

Si nuestro archivo tiene otra extensión diferente a .webapp, como por ejemplo .json, cambiaremos el final de las anteriores líneas para indicar la que corresponda.

Herramientas para generar los favicon y manifest

Estas páginas nos permiten generar los iconos a los tamaños necesarios y también nos echan una mano con el archivo manifest.

http://www.favicon-generator.org/

http://www.favicomatic.com/

La siguiente a mayores es capaz también de evaluar la web que le pidamos y nos informa sobre la falta de algún tamaño de icono y detalles de ese tipo:

http://realfavicongenerator.net/

Existen también diversos validadores que comprueban que el código de nuestro manifest sea correcto. Hablo de ellos a continuación.

Cambiar el color de la barra de navegación

Cuando el sitio no se visualice a pantalla completa, se puede establecer el color de la barra de navegación, donde están generalmente los botones de atrás, adelante, la dirección web, etc.

No todos los navegadores soportan del mismo modo el cambio de color de la barra de navegación. Para Firefox OS, Chrome y Opera basta con añadir la siguiente etiqueta a la cabecera del sitio.

<meta name="theme-color" content="#1f71b7">

Para Windows Phone es la siguiente cabecera:

<meta name="msapplication-navbutton-color" content="#1f71b7">

Por último, para iOS:

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

En este caso solo podemos establecer el color en negro y negro traslúcido. El primero desplaza hacia abajo los contenidos, como sucede de manera habitual con cualquier sitio web. El segundo, el negro traslúcido, lo que haces es flotar la cabecera por lo que se gana un poco de altura pero se obstruye un poco la parte superior de la pantalla.

Más información sobre Web Apps

De momento se está confeccionando un borrador que define el estándar y se puede consultar:

https://w3c.github.io/manifest/

Google nos indican cómo añadir el icono al escritorio y mucha más información:

https://developer.chrome.com/multidevice/android/installtohomescreen

La Fundación Mozilla está utilizando un sistema muy parecido para las aplicaciones de su sistema operativo para dispositivos móviles, Firefox OS. Las Web Apps o Aplicaciones Web son instalables a través de su Marketplace:

https://developer.mozilla.org/es/Apps/Build/Manifest

Incluso tienen un validador:

https://marketplace.firefox.com/developers/validator

Las aplicaciones de Android y extensiones de Google Chrome también siguen un patrón muy similar:

https://developer.chrome.com/apps/manifest

https://developer.chrome.com/extensions/manifest

Comentarios y actualizaciones

Como esto es algo que todavía se está cocinando, si te enteras de alguna actualización o quieres sugerir alguna mejora, no dudes en dejar tu comentario más abajo.

¿Y tú? ¿Ya has convertido tu web en una Web App?