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 Geolocation API permite descobrir a localização do usuário, mas somente com o consentimento 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 saber de algumas coisas quando usar a API Geolocation. 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 como 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 no mapa.
• Marque os dados criados dentro do aplicativo com a localização do usuário (ou seja, marque uma imagem com geolocalização).

Peça permissão com responsabilidade

Estudos recentes com usuários mostraram que eles desconfiam de sites que simplesmente solicitam que mostrem a 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 dos usuários não querem fornecer sua localização e, por isso, você precisa adotar um estilo de desenvolvimento defensivo.

1. Resolver todos os erros da API de geolocalização para que você possa 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 alternativa, 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.

Forneça uma indicação clara de que uma ação vai solicitar a localização do usuário

Em um estudo realizado pela equipe de Anúncios do Google, quando um usuário foi solicitado a reservar um quarto de hotel em Boston para uma conferência que será realizada em um determinado hotel, ele foi solicitado a compartilhar sua localização de GPS imediatamente depois de tocar na ação "Buscar 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 acesso aos locais, mas não sabe quando eles concedem o acesso. Você só sabe que obteve 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 temporizador 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ê ainda não recebeu uma resposta positiva, mostre uma notificação para o 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 à Geolocation API, mas é sempre recomendável verificar a compatibilidade antes de fazer qualquer coisa.

Você pode verificar facilmente a compatibilidade testando a presença do objeto geolocalização:

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

Como determinar a localização atual do usuário

A Geolocation API oferece um método simples "acionado uma única vez" para obter 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 essa é a primeira vez que um aplicativo neste domínio solicita permissões, o navegador geralmente solicita a permissão 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 será 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 forma semelhante ao getCurrentPosition(), mas é acionado diversas vezes como o software de posicionamento:

1. Obtém uma detecção mais precisa 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 ao usar a geolocalização

Sempre carregue e conserve a bateria

Verificar as mudanças de uma geolocalização não é uma operação sem custo financeiro. 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.

Processar erros de forma adequada

Infelizmente, nem todas as pesquisas de localização têm êxito. Talvez um GPS não possa ser localizado ou o usuário tenha desativado repentinamente as pesquisas de localização. 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

Para muitos casos de uso, você não precisa da localização mais atual do usuário, basta ter uma estimativa aproximada.

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

Se você quer encontrar a loja mais próxima de um usuário, é improvável que você precise de 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: ele é mais lento para resolver e consome 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:

• Teste como o app 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 da gaveta do console
4. Clique na opção Sensores para mostrar a guia "Sensores".

Aí, você pode neutralizar a localização como uma cidade grande pré-configurada, inserir um local personalizado ou desativar a geolocalização configurando a neutralização como Local indisponível.

Feedback