Localização do usuário

A Geolocation API permite descobrir a localização do usuário, mas somente com o consentimento dele.

Paul Kinlan

A API Geolocation permite que você descubra, com o consentimento do usuário, o local dele. Você pode usar esse recurso, por exemplo, para guiar um usuário ao destino e marcar com geolocalização conteúdos criados pelo usuário, como marcar o local em que uma foto foi tirada.

A Geolocation API também permite ver onde o usuário está e acompanhar seus movimentos, sempre com a permissão do usuário (e somente enquanto a página estiver aberta). Isso cria diversos casos de uso interessantes, como a integração com sistemas de back-end para preparar um pedido de coleta se o usuário estiver por perto.

Você precisa estar ciente de muitas coisas ao usar a API de geolocalização. Este guia explica em detalhes os casos de uso e as soluções mais comuns.

Resumo

• Use a geolocalização quando ela beneficiar o usuário.
• Peça permissão em uma resposta clara a um gesto do usuário.
• Use a detecção de recursos caso o navegador do usuário não ofereça suporte a geolocalização.
• Não só aprenda a implementar a geolocalização, aprenda a usar a geolocalização da melhor maneira possível.
• Teste a geolocalização no seu site.

Quando usar a geolocalização

• Descubra em que ponto o usuário estará mais próximo de um local físico específico para personalizar a experiência dele.
• Personalize informações (como notícias) de acordo com a localização do usuário.
• Mostre a posição de um usuário em um mapa.
• Marque os dados criados no seu aplicativo com a localização do usuário (ou seja, marque uma imagem com geo-tag).

Pedir permissão com responsabilidade

Estudos recentes com usuários mostraram que os usuários desconfiam de sites que simplesmente solicitam que mostrem sua localização durante o carregamento da página. Quais são as práticas recomendadas?

Assuma que os usuários não vão informar a localização

Muitos usuários não querem fornecer sua localização, então você precisa adotar um estilo de desenvolvimento defensivo.

1. Solucione todos os erros da API de geolocalização para adaptar seu site a essa condição.
2. Seja claro e explícito sobre sua necessidade por uma localização.
3. Use uma solução substituta, se necessário.

Use uma solução alternativa se a geolocalização for necessária

Recomendamos que seu site ou aplicativo não exija acesso à localização atual do usuário. No entanto, se seu site ou aplicativo precisar da localização atual do usuário, há soluções alternativas que permitem que você tenha uma ideia bem aproximada de onde a pessoa está no momento.

Essas soluções geralmente funcionam analisando o endereço IP do usuário e mapeando-o para os endereços físicos registrados com o banco de dados RIPE. Muitas vezes, essas localizações não são muito precisas e normalmente fornecem a posição da central de telecomunicações ou da torre de transmissão de sinal de celular mais próxima do usuário. Em muitos casos, eles podem ainda não ser tão precisos, especialmente se o usuário estiver em uma VPN ou algum outro serviço de proxy.

Sempre solicitar acesso à localização por um gesto do usuário

Confirme que os usuários entendam por que você está pedindo acesso à localização e que benefícios o seu acesso produz para ele. Solicitar a localização imediatamente na página inicial conforme o site carrega resulta em uma experiência ruim para o usuário.

Em vez disso, disponibilize ao usuário uma ação ou indicação de que uma operação vai exigir acesso à localização dele. A partir daí, o usuário associa com mais facilidade a solicitação de acesso do sistema com a ação que acabou de ser iniciada.

Dê uma indicação clara de que uma ação solicitará o local do usuário

Em um estudo realizado pela equipe do Google Ads, quando um usuário foi solicitado a reservar um quarto de hotel em Boston para uma conferência em um determinado site de hotéis, ele recebeu uma solicitação para compartilhar a localização de GPS imediatamente depois de tocar na call-to-action "Localizar e reservar" na página inicial.

Em alguns casos, o usuário fica frustrado porque não entende por que são exibidos hotéis em São Francisco quando ele quer reservar um quarto em Boston.

Uma experiência melhor é garantir que os usuários entendam porque você está solicitando a localização deles. Adicione um indicador bem conhecido que seja comum entre dispositivos, como um localizador de cobertura ou uma chamada para ação explícita, como "Encontrar nas proximidades".

Gentilmente solicite ao usuário permissão para acessar sua localização

Você não tem acesso a nada que os usuários fazem. Você sabe exatamente quando os usuários não permitem o acesso à localização deles, mas não sabe quando eles concedem acesso. Só sabe que recebeu acesso quando os resultados aparecem.

É uma boa prática "convidar" os usuários para a ação se você precisar que eles concluam a ação.

Recomendações:

1. Configure um timer que seja acionado após um curto período. Cinco segundos é um bom valor.
2. Se receber uma mensagem de erro, mostre uma mensagem para o usuário.
3. Se receber uma resposta positiva, desative o temporizador e processe os resultados.
4. Se, após o tempo limite, você não tiver recebido uma resposta positiva, mostre uma notificação ao usuário.
5. Se a resposta for recebida posteriormente e a notificação ainda estiver presente, remova-a da tela.

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);
};

Suporte ao navegador

Atualmente, a maioria dos navegadores oferece suporte à API Geolocation, mas é recomendável sempre verificar esse recurso antes de fazer qualquer coisa.

Você pode verificar facilmente a compatibilidade testando a presença do objeto geolocation:

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

Determinar a localização atual do usuário

A Geolocation API oferece um método simples "acionado uma única vez" para conseguir a localização do usuário: getCurrentPosition(). Uma chamada para este método informa assincronamente a localização atual do usuário.

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);
};

Se esta é a primeira vez que um aplicativo neste domínio solicita permissões, o navegador normalmente verifica o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou não permitir pesquisas de permissão. Nesse caso, o processo de confirmação é ignorado.

Dependendo do dispositivo de localização que seu navegador usa, o objeto de posição pode realmente conter muito mais do que apenas latitude e longitude, podendo incluir, por exemplo, uma altitude ou uma direção. Não é possível prever quais informações extras esse sistema de localização vai usar até que ele retorne os dados.

Monitorar a localização do usuário

A Geolocation API permite que você obtenha a localização do usuário (com a permissão dele) com uma única chamada para getCurrentPosition().

Se quiser monitorar continuamente a localização do usuário, use o método watchPosition() da API Geolocation. Ele funciona de maneira semelhante ao getCurrentPosition(), mas é acionado várias vezes como o software de posicionamento:

1. Recebe um bloqueio mais preciso do usuário.
2. Determina que a posição do usuário está mudando.

var watchId = navigator.geolocation.watchPosition(function (position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Quando usar a geolocalização para acompanhar a localização do usuário

• Para obter uma detecção mais precisa da localização do usuário.
• Seu aplicativo precisa atualizar a interface do usuário com base nas novas informações de localização.
• Seu aplicativo precisa atualizar a lógica de negócios quando o usuário entrar em uma determinada zona definida.

Práticas recomendadas para o uso da geolocalização

Sempre carregue e conserve a bateria

Verificar as mudanças de uma geolocalização não é uma operação gratuita. Embora os sistemas operacionais possam estar introduzindo recursos de plataforma para permitir que os aplicativos se conectem ao subsistema de geolocalização, você, como desenvolvedor da Web, não tem ideia de qual suporte o dispositivo do usuário tem para monitorar a localização dele e, enquanto você está observando uma posição, você está engajando o dispositivo em muitos processamentos extras.

Quando não precisar mais acompanhar a posição do usuário, chame clearWatch para desativar os sistemas de geolocalização.

Lidar com erros de forma adequada

Infelizmente, nem todas as pesquisas de localização têm êxito. Talvez um GPS não seja localizado ou o usuário tenha desativado repentinamente as pesquisas de local. No caso de erro, um segundo argumento opcional para getCurrentPosition() é chamado para que você possa notificar o usuário dentro do callback:

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);
};

Reduza a necessidade de ativar hardware de geolocalização

Em muitos casos de uso, você não precisa da localização mais atualizada do usuário, só de uma estimativa aproximada.

Use a propriedade opcional maximumAge para instruir o navegador a usar um resultado de geolocalização recebido recentemente. Isso não só é retornado mais rápido se o usuário já tiver solicitado os dados, mas também impede que o navegador inicie interfaces de hardware de geolocalização, como triangulação de Wi-Fi ou 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);
};

Não deixe o usuário esperando, defina um tempo limite

A menos que você defina um tempo limite, sua solicitação para obter a posição atual pode nunca ser retornada.

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);
};

Prefira uma localização aproximada em vez de uma localização detalhada

Se você quer encontrar a loja mais próxima de um usuário, é improvável que precise de uma precisão de 1 metro. A API é projetada para fornecer uma localização geral que é retornada o mais rapidamente possível.

Se você precisa de um alto nível de precisão, é possível substituir a configuração padrão com a opção enableHighAccuracy. Use com moderação: pode ser mais demorado para resolver e consumir mais bateria.

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);
};

Emular a geolocalização com o Chrome DevTools

Depois de configurar a geolocalização, faça o seguinte:

• Testar como seu aplicativo funciona em diferentes geolocalizações.
• Verifique se o app simplifica os recursos de forma harmoniosa quando a geolocalização não está disponível.

Você pode fazer ambos no Chrome DevTools.

1. Abra o Chrome DevTools.
2. Pressione Esc para abrir a gaveta do console.
3. Abrir o menu de gaveta do console
4. Clique na opção Sensores para mostrar a guia "Sensores".

Aqui, você pode substituir o local para uma cidade principal predefinida, inserir um local personalizado ou desativar a geolocalização definindo a substituição como Local indisponível.

Feedback