Ubicación del usuario

La API de Geolocation te permite descubrir la ubicación del usuario si otorga su consentimiento.

La API de Geolocation te permite descubrir, con el consentimiento del usuario, su ubicación. Puedes usar esta funcionalidad para realizar tareas como guiar a un usuario a su destino y etiquetar geográficamente contenido creado por los usuarios; por ejemplo, para marcar dónde se tomó una foto.

La API de Geolocation también te permite ver dónde se encuentra el usuario y mantenerte informado a medida que se desplaza, siempre con su consentimiento (y solo cuando la página está abierta). Esto genera muchos casos de uso interesantes, como la integración con sistemas de backend para preparar un pedido para su recopilación si el usuario está cerca.

Debes tener en cuenta muchos aspectos cuando uses la API de Geolocation. En esta guía, se explican los casos de uso y las soluciones comunes.

Resumen

  • Usa la ubicación geográfica cuando beneficie al usuario.
  • Pide permiso como una respuesta clara a un gesto del usuario.
  • Usa la detección de funciones en el caso de que el navegador de un usuario no admita la ubicación geográfica.
  • No solo aprendas a implementar la ubicación geográfica; aprende la mejor manera de usarla.
  • Probar la ubicación geográfica con tu sitio

Cuándo usar la ubicación geográfica

  • Descubrir dónde está más cerca el usuario de una ubicación física específica para personalizar su experiencia
  • Adapta la información (como las noticias) a la ubicación del usuario.
  • Muestra la posición de un usuario en un mapa.
  • Etiqueta los datos creados dentro de tu aplicación con la ubicación del usuario (es decir, etiqueta geográficamente una imagen).

Pide permiso con responsabilidad

Estudios recientes entre usuarios muestran que los usuarios no confían en los sitios que simplemente le solicitan su posición durante la carga de una página. ¿Cuáles son las prácticas recomendadas?

Supón que los usuarios no te proporcionarán su ubicación

Muchos de tus usuarios no querrán proporcionarte su ubicación, por lo que deberás adoptar un estilo de desarrollo defensivo.

  1. Maneja todos los errores fuera de la API de ubicación geográfica para que puedas adaptar tu sitio a esta condición.
  2. Sé claro y explícito acerca de la necesidad de acceder a la ubicación.
  3. Usa una solución de resguardo si es necesario.

Usa un resguardo si se requiere la ubicación geográfica

Recomendamos que tu sitio o aplicación no requieran acceso a la ubicación actual del usuario. Sin embargo, si tu sitio o aplicación requiere la ubicación actual del usuario, hay soluciones de terceros que te permiten tener una idea aproximada de dónde se encuentra la persona en ese momento.

Por lo general, estas soluciones observan la dirección IP del usuario y la asignan a las direcciones físicas registradas en la base de datos del RIPE. Por lo general, estas ubicaciones no son muy precisas y te indican la posición del concentrador de telecomunicaciones o la torre de telefonía celular más cercana al usuario. En muchos casos, es posible que no sean tan precisas, en especial si el usuario está en una VPN o en algún otro servicio de proxy.

Solicita siempre acceso a la ubicación mediante un gesto del usuario

Asegúrate de que los usuarios comprendan por qué les solicitas su ubicación y cuál será el beneficio para ellos. Si la solicitas de inmediato en la página principal mientras se carga el sitio, la experiencia del usuario será deficiente.

Sitio que solicita permiso en una página del buscador de tiendas.
DEBES: Siempre solicita acceso a la ubicación mediante un gesto del usuario.
Un sitio que solicita permiso en la página principal.
NO DEBES: solicitarla en la página principal mientras se carga el sitio, ya que perjudica la experiencia del usuario.

En su lugar, proporciona al usuario un llamado a la acción claro o una indicación de que una operación requerirá acceso a su ubicación. Luego, el usuario podrá asociar más fácilmente la solicitud de acceso del sistema con la acción que se acaba de iniciar.

Proporciona una indicación clara de que una acción solicitará su ubicación

En un estudio del equipo de Google Ads, cuando se le pidió a un usuario que reservara una habitación de hotel en Boston para una próxima conferencia en un sitio de hoteles en particular, se le pidió que compartiera su ubicación con GPS inmediatamente después de presionar el llamado a la acción "Buscar y reservar" en la página principal.

En algunos casos, los usuarios se frustraron porque no entendían por qué se le mostraban hoteles en San Francisco cuando deseaban reservar una habitación en Boston.

Para obtener una mejor experiencia, asegúrate de que los usuarios comprendan por qué les solicitas su ubicación. Agrega un descriptor conocido que sea común en todos los dispositivos, como un buscador de alcance o un llamado a la acción explícito, como "Buscar cerca de mí".

Un buscador de rangos
Usar un buscador de alcance
Un formulario con un botón para buscar cerca de mí.
Un llamado a la acción específico para encontrar lugares cercanos

Invita a los usuarios a que otorguen permiso para acceder a su ubicación.

No tienes acceso a nada de lo que están haciendo los usuarios. Conoces exactamente cuándo los usuarios deshabilitan el acceso a su ubicación, pero no sabes cuándo te otorgan acceso; solo sabes que obtuviste acceso cuando aparecen los resultados.

Se recomienda "invitar" a los usuarios a la acción si necesitas que completen la acción.

Recomendaciones:

  1. Configura un temporizador que se active después de un período breve. 5 segundos es un buen valor.
  2. Si recibes un mensaje de error, muéstrale un mensaje al usuario.
  3. Si obtienes una respuesta positiva, inhabilita el temporizador y procesa los resultados.
  4. Si no recibiste una respuesta positiva después del tiempo de espera, muéstrale una notificación al usuario.
  5. Si la respuesta llega más tarde y la notificación sigue presente, quítala de la pantalla.
button.onclick = function () {
  var startPos;
  var nudge = document.getElementById('nudge');

  var showNudgeBanner = function () {
    nudge.style.display = 'block';
  };

  var hideNudgeBanner = function () {
    nudge.style.display = 'none';
  };

  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function (position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);

    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    switch (error.code) {
      case error.TIMEOUT:
        // The user didn't accept the callout
        showNudgeBanner();
        break;
    }
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Navegadores compatibles

La mayoría de los navegadores ahora admiten la API de Geolocation, pero se recomienda comprobar siempre la compatibilidad antes de comenzar a usarla.

Para comprobar fácilmente la compatibilidad, prueba la presencia del objeto de ubicación geográfica:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
} else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

Cómo determinar la ubicación actual del usuario

La API de Geolocation ofrece un método sencillo de “acción única” para obtener la ubicación del usuario: getCurrentPosition(). Una llamada a este método informa de manera asíncrona la ubicación actual del usuario.

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  navigator.geolocation.getCurrentPosition(geoSuccess);
};

Si es la primera vez que una aplicación de este dominio solicita permisos, por lo general, el navegador verifica el consentimiento del usuario. Según el navegador, también puede haber preferencias para permitir (o rechazar) siempre la búsqueda de permisos, en cuyo caso se omite el proceso de confirmación.

Según el dispositivo de ubicación que use tu navegador, el objeto de posición podría contener mucha más información que solo latitud y longitud; por ejemplo, podría incluir una altitud o una dirección. No podrás saber qué información adicional usa ese sistema de ubicación hasta que realmente muestre los datos.

Observa la ubicación del usuario

La API de Geolocation te permite obtener la ubicación del usuario (con su consentimiento) mediante una sola llamada a getCurrentPosition().

Si deseas supervisar la ubicación del usuario de forma continua, usa el método de la API de Geolocation, watchPosition(). Funciona de manera similar a getCurrentPosition(), pero se activa varias veces a medida que el software de posicionamiento:

  1. Se obtiene una métrica más precisa del usuario.
  2. Determina que la posición del usuario está cambiando.
var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Cuándo usar la ubicación geográfica para conocer la ubicación del usuario

  • Deseas obtener un registro más preciso de la ubicación del usuario.
  • Tu aplicación necesita actualizar la interfaz de usuario según la nueva información de ubicación.
  • Tu aplicación necesita actualizar la lógica empresarial cuando el usuario ingresa a una zona definida determinada.

Prácticas recomendadas para usar la ubicación geográfica

Siempre liberar y conservar batería

Detectar cambios en la ubicación geográfica no es una operación libre. Si bien es posible que los sistemas operativos incluyan funciones de la plataforma para permitir que las aplicaciones se conecten al subsistema de ubicación geográfica, tú, como desarrollador web, no tienes idea de la compatibilidad que tiene el dispositivo del usuario para supervisar la ubicación del usuario y, mientras miras una posición, haces que el dispositivo realice una gran cantidad de procesamiento adicional.

Cuando ya no necesites hacer un seguimiento de la posición del usuario, llama a clearWatch para desactivar los sistemas de ubicación geográfica.

Maneja los errores correctamente

Desafortunadamente, no todas las búsquedas de ubicaciones se realizan correctamente. Es posible que no se haya podido ubicar un GPS o que el usuario inhabilite repentinamente las búsquedas de ubicación. Si se produce un error, se llama a un segundo argumento opcional para getCurrentPosition(), de modo que puedas notificar al usuario dentro de la devolución de llamada:

window.onload = function () {
  var startPos;
  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Reducción de la necesidad de iniciar el hardware de ubicación geográfica

En muchos casos de uso, no necesitas la ubicación más actualizada del usuario; solo necesitas una estimación.

Usa la propiedad opcional maximumAge para indicarle al navegador que use un resultado de ubicación geográfica obtenido recientemente. De esta forma, no solo se obtienen los resultados más rápido si el usuario ya solicitó los datos anteriormente, sino que también se evita que el navegador inicie las interfaces del hardware de ubicación geográfica, como la triangulación de Wi-Fi o el GPS.

window.onload = function () {
  var startPos;
  var geoOptions = {
    maximumAge: 5 * 60 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

No dejes al usuario esperando; configura un tiempo de espera

A menos que establezcas un tiempo de espera, es posible que nunca se muestre tu solicitud para obtener la posición actual.

window.onload = function () {
  var startPos;
  var geoOptions = {
    timeout: 10 * 1000,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

Prefiere una ubicación aproximada en lugar de una detallada

Si quieres encontrar la tienda más cercana a la ubicación de un usuario, es poco probable que necesites una precisión de 1 metro. La API está diseñada para proporcionar una ubicación aproximada que se muestre lo más rápido posible.

Si necesitas un nivel alto de precisión, es posible anular la configuración predeterminada con la opción enableHighAccuracy. Úsalo con moderación, ya que se resuelve más lento y consume más batería.

window.onload = function () {
  var startPos;
  var geoOptions = {
    enableHighAccuracy: true,
  };

  var geoSuccess = function (position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function (error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};

Emula la ubicación geográfica con las Herramientas para desarrolladores de Chrome

Pestaña Sensor en Herramientas para desarrolladores.

Una vez que hayas configurado la ubicación geográfica, querrás:

  • Probar cómo funciona tu app en diferentes ubicaciones geográficas
  • Verifica que tu app se degrade con elegancia cuando la ubicación geográfica no esté disponible.

Puedes hacer ambas cosas desde las Herramientas para desarrolladores de Chrome.

  1. Abra las Herramientas para desarrolladores de Chrome.
  2. Presiona Esc para abrir el panel lateral de la consola.
  3. Abrir el menú del panel lateral de la consola
  4. Haz clic en la opción Sensors para que se muestre la pestaña Sensores.

Desde aquí, puedes anular la ubicación a una ciudad importante predeterminada, ingresar una ubicación personalizada o inhabilitar la ubicación geográfica si configuras la anulación en Ubicación no disponible.

Comentarios