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:
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/
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?
