En este artículo explico qué es una Web App y cómo convertir tu web en una.
Pero… ¿para qué quiero que alguien se instale mi web?
Buena pregunta.
Para mostrar tu web como si fuese una aplicación nativa, con su propia ventana, es decir, sin que se muestre dentro de una pestaña del navegador.
Sigue leyendo y te explico más.
Es útil para webs que se visitan de manera frecuente.
Los usuarios que se la instalan van a ser una audiencia más comprometida. Van a tener tu web en su escritorio o lanzador de aplicaciones, por lo que es más probable que accedan a ella.
Por otra banda, como usuario también tiene sus ventajas: para muchos casos no es necesario instalar una aplicación, basta con tener la web app.
Te pongo algunos ejemplos:
- las webs de las noticias,
- las del tiempo,
- las de los diccionarios,
- las de compras (tiendas o restaurantes)...
¿No te parece excesivo tener que instalar una aplicación por cada empresa de los mercados anteriores?
Mejor la web y un simple icono en el escritorio.
¿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.
Funciona en todos los dispositivos desde hace unos años para aquí.
Por ejemplo, en un teléfono móvil, se añade un icono al escritorio. Cuando pulsas sobre él se abre la web a pantalla completa, sin barras de navegación ni botones, como si fuese una aplicación, no una web.
También aparece cuando haces una búsqueda de aplicaciones instaladas (en muchos dispositivos).
En esta línea también se está avanzando en las aplicaciones web progresivas, que explico un poco más abajo.
Añadir el icono de tu web app al escritorio
Para añadir una web a tu escritorio hay una opción dentro del navegador que te permite hacerlo.
En el navegador del móvil suele poner «Añadir a la pantalla de inicio» o «Instalar».
Si estás en el ordenador con Firefox, puedes arrastrar desde la barra de direcciones al escritorio.
Si usas Chrome, y la página está preparada para ello con el manifiesto, te aparece un icono de una pantalla y una flecha hacia abajo. Durante un momento también la palabra «Instalar».
Cómo convertir tu web en una web app
Para algunos CMS hay añadidos o plugins que te hacen el trabajo.
Para Joomla, por ejemplo, hay un plugin llamado Progressive Web App Maker. Tienes más información al final del artículo si estás interesado.
Si prefieres aprender a hacerlo para cualquier tipo de web, necesitas saber:
- Crear los iconos.
- Añadir el código para que el navegador reconozca la web como instalable.
A continuación te dejo algunas indicaciones.
Iconos para los diferentes dispositivos
Necesitas crear iconos en distintos tamaños para que, según el dispositivo, tenga el que necesita.
Por ejemplo, en el momento de escribir este artículo, Android necesita iconos de 192 × 192 px e iOS de 180 × 180 px.
Si quieres una herramienta que te ayude a generarlos todos puedes usar alguna de estas webs:
Una vez generados, los subes a la raíz de tu sitio web. Puede ser en otra ubicación pero puede dar problemas en algún navegador.
Junto con las imágenes debes añadir algo de código en un fichero (te explico a continuación).
Código para que la reconozcan como web app
Debemos añadir el siguiente código dentro de la etiqueta <head> de nuestra web:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff">
Puedes cambiar los colores por el corporativo de tu web.
Las webs que enlazaba antes también te generan este código HTML.
En este ejemplo hay una línea que llama a un archivo de manifiesto. Lo explico a continuación.
Archivo de manifiesto
Como te decía antes, si añades un archivo de manifiesto, algunos navegadores (como Chrome y algún otro) te muestran un icono para instalar la web como una aplicación.
Sirve para definir el comportamiento de una aplicación web cuando la llamamos desde el escritorio de un dispositivo.
Es un fichero en formato JSON que le dice al navegador detalles sobre la web y cómo debe instalarse, por ejemplo:
- Nombre (corto y largo).
- Iconos a mostrar en el escritorio o lanzador de aplicaciones.
- Color de fondo y del encabezado.
- URL de inicio.
Las 2 primeras webs que enlazaba antes te generan el código el HTML con la llamada al archivo de manifiesto, la tercera no.
No obstante, este archivo viene con datos genéricos. Edítalo y pon los de tu web.
Ojo, para que el navegador te sugiera instalar la aplicación, no puede estar instalada ya.
Otro detalle es que tu web tiene que estar bajo HTTPS.
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.
Aplicaciones web progresivas
Las progressive web apps (PWA) o aplicaciones web progresivas son un paso más allá para acercarnos a las aplicaciones nativas.
Gracias a las actuales capacidades de la web para usar los periféricos de los dispositivos (como la ubicación, la cámara o el bluetooth), las webs pueden realizar tareas que antes estaban solo al alcance de las aplicaciones instaladas en el sistema operativo.
Las aplicaciones web progresivas además pueden guardar información en el dispositivo. Con esto consiguen no volver a descargarla sin necesidad y ser más rápidas. Solicitan al servidor solo los datos que hace falta actualizar.
En este artículo no explico cómo se crea una aplicación web progresiva pero al final hay un apartado de documentación por si quieres profundizar en el asunto.
Ejemplos de aplicaciones web
A estas alturas seguro que ya te has topado con muchas webs de este tipo.
Si quieres un ejemplo de cómo funciona, lo tienes en esta misma web, ¡añádela al escritorio!
A partir de ahora, también te vas a encontrar con otras que desearás que estuviesen bien configuradas, para que al añadirlas a tu escritorio tengan un icono y nombre decentes de forma automática.
Documentación extra
Documentación de MDN sobre Aplicaciones Web Progresivas. La misma documentación en inglés puede que esté un poco más completa.
Documentación de Google que explica qué hace especial a una aplicación web progresiva, cómo crearlas, el archivo de manifiesto… Pasa igual que la anterior, en inglés puede que esté algo más completa y actualizada.
Documentación de Apple que explica cómo configurar una Web App (en inglés).
Para convertir Joomla en una web app hay una explicación en este artículo (en italiano).
