Aplicaciones web progresivas (PWA) instalables en el celular

Una aplicación web progresiva, o PWA, es una aplicación web que el navegador permite instalar en el celular o la computadora como si fuera una app. Tiene su propio ícono en la pantalla de inicio, abre sin la barra del navegador, puede funcionar sin conexión y enviar notificaciones push.

Técnicamente, una PWA se apoya en tres piezas:

• HTTPS, para que la conexión sea segura.
• Un manifiesto web, un archivo que define el nombre, el ícono, los colores y la forma en que se abre la aplicación.
• Un service worker, un script que corre en segundo plano, guarda archivos y datos en el dispositivo y recibe las notificaciones.

Desarrollamos PWA dentro de nuestro servicio de desarrollo con Next.js y React, tanto en aplicaciones nuevas como en web apps que ya están en uso.

Una PWA es la opción indicada cuando:

• Tus clientes vuelven seguido a tu aplicación para pedir, reservar o consultar algo, y querés que la tengan a un toque.
• Tu equipo trabaja en la calle, en obra o en un depósito, con señal intermitente, y necesita cargar datos igual.
• Querés avisar a tus usuarios de un turno, un pedido listo o un cambio de estado sin depender del email.
• Necesitás presencia en el celular, pero no se justifica desarrollar y mantener dos apps nativas, una para iOS y otra para Android.
• No querés esperar la aprobación de una tienda cada vez que publicás una mejora.

1. Definimos la experiencia instalada. Qué pantalla abre primero, qué tiene que funcionar sin conexión y qué eventos merecen una notificación.
2. Adaptamos la interfaz al celular. Botones al alcance del pulgar, formularios cortos y navegación pensada para pantallas chicas.
3. Configuramos el manifiesto y los íconos en todas las medidas que piden Android e iOS, incluida la pantalla de carga.
4. Programamos el service worker con una estrategia de caché para cada tipo de contenido: lo que cambia poco se guarda, lo que cambia seguido se consulta primero al servidor.
5. Sumamos las notificaciones push, con el permiso del usuario y mensajes que tengan un motivo claro. Podemos usar el estándar Web Push o un servicio como Firebase Cloud Messaging, que explicamos en notificaciones push.
6. Probamos la instalación y el modo sin conexión en dispositivos reales con iOS y Android.

• La aplicación instalable en celulares y computadoras, con su ícono y su pantalla de inicio.
• Funcionamiento sin conexión para las pantallas que definimos juntos.
• Notificaciones push configuradas, con la posibilidad de enviarlas desde tu sistema.
• Una página o aviso que explica a tus usuarios cómo instalar la aplicación en cada sistema.
• Documentación sobre cómo actualizar la PWA sin que los usuarios queden con una versión vieja guardada.

Una PWA rápida se instala más y se abandona menos. Por eso, en proyectos con mucho contenido, la combinamos con un trabajo de optimización de rendimiento para que la primera carga también sea ágil.