Cómo integrar la geolocalización en su PWA

Supongamos que el usuario está en un navegador compatible, puede hacer que su PWA detecte fácilmente la ubicación del usuario mediante la API de geolocalización o, para ser más específicos, mediante el uso del objeto navigator.geolocation dentro de ella. Así es como lo haces bien en tu PWA:

requisitos previos

• Sólidos conocimientos de JavaScript y HTML.
• Un PWA en funcionamiento servido a través de HTTPS (siga nuestro tutorial de PWA para crear uno).

Geolocalización en acción

Probablemente ya no seas ajeno a la geolocalización. Con su permiso, un sitio web que tiene geolocalización integrada puede acceder a su ubicación, mediante la cual puede mostrar información relevante en su área, o simplemente mostrar su ubicación en el mapa.

Cómo integrar la geolocalización en tu PWA

Los basicos

Primero, necesitamos entender el mecanismo subyacente detrás del objeto navigator.geolocation . El objeto navigator es un objeto contenedor con el que se ponen a nuestra disposición muchas Web API. Dentro del contenedor del navigator se encuentra el objeto de geolocation , proporcionado por el cual se encuentran estos tres métodos:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Usando getCurrentPosition() para obtener la posición del usuario

El propósito del primer método, getCurrentPosition() , debe explicarse por sí mismo: obtiene una posición del dispositivo del usuario.

 navigator.geolocalización.getCurrentPosition(() => {})

Las posiciones recuperadas están disponibles en coords y timestamp , siendo coords un objeto Coordinates . Por defecto, el objeto Coordinates está definido por estas propiedades:

• accuracy la exactitud de la posición en metros
• altitude la altitud de la posición
• accuracy la precisión de la altitud de la posición en metros
• heading la dirección hacia la que se dirige el dispositivo, expresada en grados. (0 = Norte, Este = 90, Sur = 180, Oeste = 270)
• latitude latitud de la posición
• longitude la longitud de la posición
• speed la velocidad a la que va el dispositivo, expresada en metros/segundo

Como habrás adivinado, los dispositivos que carecen del hardware de seguimiento adecuado simplemente no recibirán todos los beneficios de esta API, por lo que solo devolverán algunos valores y dejarán otros valores null . Por ejemplo, en una computadora de escritorio, solo podemos recibir los valores de longitude , latitude y accuracy , mientras que los otros valores solicitados ( heading , speed ) regresan null .

watchPosition() — recuperación periódica de la posición del usuario

Si bien el método mencionado anteriormente se usa principalmente para recuperar la posición del usuario, no es tan útil para las aplicaciones que dependen de la ubicación precisa del usuario, ya que se sabe que sus usuarios están en movimiento con frecuencia. Aquí es cuando necesitamos el método watchPosition() de navigator.geolocation que registrará una función de devolución de llamada para actualizaciones periódicas de la posición del usuario.

 navigator.geolocalización.watchPosition(posición => {
    consola.log(posición)
})

El método watchPosition devuelve una id de transacción única que se puede usar para dejar de recibir actualizaciones de ubicación. Usando la id única y el método navigator.geolocation.clearWatch() , podemos dejar de buscar una posición:

 const id = navigator.geolocalización.watchPosition(posición => {
    consola.log(posición)
})

//dejar de mirar despues de 10 segundos
establecerTiempo de espera(() => {
  navigator.geolocalización.clearWatch(id)
}, 10 * 1000)

Manejo de errores

Puede volverse loco muy pronto cuando no tiene una función adecuada configurada para manejar todos los errores. Para mostrar errores en un bloque legible por humanos, debe agregar el siguiente código en cualquiera que sea su función para mostrar la ubicación:

 función ubicaciónError(error) {
    switch(error.código) {
        error de caso.PERMISSION_DENIED:
            return "Usuario denegó la solicitud de geolocalización.";
        caso error.POSITION_UNAVAILABLE:
            return "La información de ubicación no está disponible actualmente.";
        error de caso. TIEMPO DE ESPERA:
            return "Se agotó el tiempo de espera de la solicitud de ubicación del usuario";
        caso de error.UNKNOWN_ERROR:
            return "Ocurrió un error desconocido.";
    }
}

Además, puede probar esto en la consola:

 navigator.geolocalización.getCurrentPosition(posición => {
  consola.log(posición)
}, error => {
	consola.error(error)
})

Esto devolverá una propiedad de code , con 1 significa que se ha denegado el permiso del usuario, 2 significa que la posición del usuario no está disponible actualmente y 3 significa que se agotó el tiempo de espera de la solicitud.

Mas allá de lo básico

Comprender los conceptos básicos es una cosa, pero siempre puedes esforzarte por ser mejor. Así es como puede mejorar aún más su función de geolocalización.

Un tiempo de espera al buscar coordenadas

En caso de que sus usuarios tengan una condición de red lenta, se puede usar un tiempo de espera para indicar que la operación ha expirado. Para agregar un tiempo de espera, necesitamos agregar un tercer parámetro, que contiene las siguientes propiedades:

• timeout el número de milisegundos antes de que caduque la operación.
• maxiumAge la antigüedad máxima de la posición almacenada en caché por los navegadores, medida en milisegundos.
• enableHighAccuracy una opción autoexplicativa de verdadero/falso que podría consumir más tiempo y recursos para obtener posiciones más precisas.

 navigator.geolocalización.getCurrentPosition(posición => {
  consola.log(posición)
}, error => {
	consola.error(error)
}, {
  tiempo de espera: 2000,
  edad máxima: 20000,
  enableHighAccuracy: verdadero
})

Visualización de la posición del usuario en Google Maps

Con la API de Google Maps, podemos mostrar la posición del usuario en un mapa de Google.

 <secuencia de comandos src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></secuencia de comandos>

Para una demostración de la API de mapas de Google en la web, recomendamos esta guía de Google: Mostrar la posición del usuario o del dispositivo en Maps. En la guía, encontrará un HTML básico con la API de Google Maps integrada.

Alternativamente, use react-geolocated para su PWA basado en React

En caso de que no se sienta con ganas, react-geolocated también es una excelente manera de integrar la geolocalización con su aplicación basada en React de una manera rápida y sin esfuerzo. Simplemente instale el módulo encima de su PWA existente usando:

 npm install reaccionar geolocalizado --save

Después de lo cual, siga los pasos que se proporcionan en el enlace oficial de GitHub y debería tener una PWA funcional con geolocalización incorporada.

Conclusión

Y eso es todo para el proceso de integración de geolocalización de su PWA. Si le resulta difícil alguna parte del tutorial, ¡no dude en enviarnos una pregunta a continuación!

Para los comerciantes de Magento que buscan una solución confiable, ofrecemos una solución Magento PWA completa y rentable para su negocio.