Cómo detectar la pérdida y recuperación de conexión en tu PWA | PWA Experts I/O

Cómo detectar la pérdida y recuperación de conexión en tu PWA

Una de las ventajas de trabajar con JavaScript desde la parte frontal en las PWAs es la de poder hacer uso de funcionalidades y características nativas del navegador que las interpreta.

Con este tutorial quiero compartir algo de conocimiento sobre los primeros pasos que necesitamos realizar para controlar correctamente el estado de la conexión del dispositivo móvil del usuario visitante.

Qué debemos hacer cuando el dispositivo pierde conexión

Es muy frustante cuando, por ejemplo, vas en metro por una zona de poca cobertura navegando por una web y, de repente, aparece un mensaje de error de conexión. El típico error que, de forma estándar, hace aparecer el propio navegador.

Git

En este caso, y para que nuestro usuario no abandone de forma automática nuestra PWA, podemos mostrar un texto de aviso personalizado para el usuario y acorde a la imagen corporativa de nuestro proyecto, y de este modo el usuario sea alertado (sin dejar de ver la web) de una pérdida o recuperación de conexión a internet.

Cómo detectar con JavaScript la perdida o recuperación de la conexión

Podemos usar el objeto "window", que nos va a proporcionar mucha información sobre el navegador que utiliza nuestro usuario o visitante.

Si abrimos la consola del navegador web (en mi caso Chrome) y ejecutamos el siguiente código, podemos ver como resultado todos los parámetros que el propio navegador nos retorna de si mismo.


  window.navigator

Image: Google Chrome console A

En este caso concreto, nos centraremos en el parámetro "onLine" que nos proporcionará como resultado "true", en el caso de que el dispositivo tenga conexión, o "false" en el caso de pérdida de la misma.


  window.navigator.onLine

Image: Google Chrome console B

Os dejo un ejemplo con el que podéis controlar el cambio de conexión mediante un listener que a su vez ejecuta una función que muestra por consola el estado de la conexión en caso de cambio de estado de la misma.



  function updateIndicator() {
    console.log(window.navigator.onLine);
  }
  window.addEventListener('online',  updateIndicator);
  window.addEventListener('offline', updateIndicator);

Cómo poder realizar test de conexión mediante las herramientas del navegador

Recuerda que dispones de un conjunto de herramientas del propio navegador. Una de ellas es la que nos permite simular el cambio de conexión a otro tipo ya sea, por ejemplo 3G, 4G, o incluso sin conexión, y que, de este modo, podamos realizar todos los test que nos sean necesarios de la forma más rápida posible.

En la siguiente captura de pantalla podéis ver donde encontrar esta herramienta el navegador Google Chrome

Image: Google Tools

Os dejo un enlace de Mozilla donde podéis encontrar algo más de información: Navigator.onLine

Ejemplo

Finalmente os dejo un ejemplo en mi cuenta de GitHub que podrás probar en tu ordenador: Tutorial JavaScript Navigator Network Connection

Espero que este primer tutorial os haya gustado tanto como a mi escribirlo y compartirlo. Gracias por leerlo!

#PWA#Mobile#Conection#W3C#JavaScript

Para dejar tu comentarios debes pertenecer a la Comunidad.

Entra en la Comunidad

¿Quieres aprender sobre las PWAs, colaborar en el desarrollo de la plataforma, redactar artículos, publicar tutoriales y mucho más? Únete a la Comunidad PWA Experts I/O.

WIP: Work in Progress

Estas son las próximas mejoras que presentaremos en la Comunidad, ¿te apetece colaborar?

  • 🔚 Incluir resumen de los features de las PWA por navegador.
  • 🔚 Agregar avisos vía email con las respuestas en los hilos del foro.
  • 🔜 Implementación del Service Workers.
  • 🔜 Newsletters.