Navegación offline, Service Worker y PWA
Nueva actualización de Etiena.com que permite la navegación sin conexión a Internet, gracias a la implementación del Service Worker. Además será posible instalar la aplicación web, como PWA, directamente en tu dispositivo, ya sea un celular, tableta, computadora u otro.
Si te estás preguntando cómo es posible navegar offline y sobre todo qué ventajas esto puede aportar, a continuación encontrarás las respuestas a todas tus dudas.
Navegá también a bordo
¿Cuántas veces te habrá ir en avión, en subte o atravesar una zona no cubierta por WI-FI y así no poder navegar en Internet? Te cuento un secreto: trabajé duro para permitir que todos los visitantes de Etiena.com puedan visitar mi página web incluso en medio del Sahara 🙃.
¿Cómo es posible todo esto? Simplemente gracias a un poco de código JavaScript necesario para crear un script llamado Service Worker. Un Service Worker, del que hablaré más específicamente en el próximo capítulo, tiene entre sus funciones la navegación sin conexión Internet.
Independientemente de la calidad y presencia de la conexión a Internet, el acceso a aplicaciones web ligeras y rápidas debería ser una prerrogativa para todos los usuarios, considerando que la mayoría de los países en desarrollo todavía no tienen una conexión a Internet equivalente a los estándares comunes. Aquí también, el Service Worker juega un papel fundamental en hacer que la experiencia de navegación sea óptima para todos los usuarios donde sea se encuentren.
Service Worker
El Service Worker se podría comparar a un servidor proxy, porque se encuentra en el medio de la aplicación web, el navegador y la red, cuando está disponible [Esquema siguiente].
Un Service Worker tiene varias peculiaridades y características entre las cuales las más importantes son:
- Permitir la creación de experiencias de navegación sin conexión
- Recibir solicitudes de la red
- Realizar acciones específicas según la disponibilidad de la red
- Actualizar los recursos que residen en el servidor
- Crear las PWA, aplicaciónes web progresivas
- Habilitar y utilizar notificaciones push
El Service Worker se ejecuta desde el navegador en segundo plano y está completamente desconectado de la página web y esto permite al usuario utilizar el sitio web mientras que el navegador interactúa con el Service Worker.
Se instala durante la primera visita del usuario al sitio web y, en caso de que cambie la versión del Service Worker, el navegador descargará y actualizará el nuevo Service Worker.
Las fases de cada Service Worker, dichas ciclo de vida, son cuatro:
- Registro: el navegador descarga, analiza y ejecuta el Service Worker
- Instalación: el Service Worker se instala dentro del navegador
- Activación: el Service Worker verifica la versión instalada y es funcional para verificar eventos que se originan en el cliente
- Fetch: el Service Worker está listo para recibir y manejar solicitudes del cliente
Es importante marcar el hecho de que los Service Workers solo funcionan en presencia de un certificado de seguridad SSL y un protocolo HTTPS, además son compatibles con los principales navegadores.
Actualmente los Service Workers no están muy extendidos, pero gracias a sus beneficios como el tiempo de respuesta instantáneo de las páginas web en las que están instalados, la capacidad de gestionar la caché del navegador de forma independiente y la navegación sin conexión Internet (lado del cliente), creo que su utilizo se difundirá muy rápidamente.
PWA, Aplicación Web Progresiva
PWA es el acrónimo de Progressive Web Application. Basada en código HTML, CSS y Javascript, una aplicación web progresiva es muy similar a una aplicación clásica o programa para PC, de hecho, es posible instalar una PWA directamente en tu teléfono celular, tableta, laptop o computadora.
La instalación de una Aplicación Web Progresiva no se realiza automáticamente como lo es para el Service Worker; se mostrará al usuario un mensaje para la instalación mientras que él navega por el sitio web. Como esta tecnología es bastante nueva, no encontrarás muchas aplicaciones web que también tengan la relativa versión PWA.
Las ventajas de una aplicación web progresiva son numerosas, aquí una lista:
- Navegación en ausencia de Internet
- Velocidad de carga de datos muy alta, para una mejor experiencia de usuario
- Las PWA utilizan las mismas tecnologías que una aplicación web, por lo quesu realización requiere menos tiempo y menos plata
- Las PWA pueden ser encontradas a través de los motores de búsqueda, los cuales tienen una audiencia mucho más amplia que las tiendas de aplicaciones [Sin embargo, es posible distribuir las PWA en las tiendas de aplicaciones]
- La instalación de una PWA lleva a una mayor participación, también posible a través de las notificaciones push
- A diferencia de las aplicaciones clásicas, las PWA se actualizan automáticamente en segundo plano, lo que permite el lanzamiento de nuevas funciones al instante
- Gestión de notificaciones, geolocalización, acceso a cámaras y mucho más...