A API Geolocation permite que você descubra a localização do usuário, se tiver o consentimento dele.
A API Geolocation permite que você descubra, com o consentimento do usuário, a localização dele. É possível usar essa funcionalidade para guiar um usuário até o destino dele e marcar com geo-tag em conteúdo criado pelo usuário, por exemplo, marcar onde uma foto foi tirada.
A API Geolocation também permite que você veja onde o usuário está e acompanhe enquanto ele se movimenta, sempre com o consentimento do usuário (e apenas enquanto a página está aberta). Isso cria muitos 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 Geolocation. Este guia explica os casos de uso e as soluções mais comuns.
Resumo
- Use a geolocalização quando ela beneficia o usuário.
- pedir 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 à geolocalização.
- Não basta aprender a implementar a geolocalização, aprender a melhor maneira de usá-la.
- Teste a geolocalização com seu site.
Quando usar a geolocalização
- Descubra onde o usuário está mais próximo de um local físico específico para personalizar a experiência do usuário.
- Adapte informações (como notícias) à localização do usuário.
- Mostre a posição de um usuário no mapa.
- Marque os dados criados no seu aplicativo com a localização do usuário (ou seja, marque uma imagem com geo-tag).
Peça permissão com responsabilidade
Estudos recentes mostraram que os usuários não confiam em sites que simplesmente solicitam que indiquem sua posição no carregamento da página. Então, quais são as práticas recomendadas?
Suponha que os usuários não vão informar sua localização
Muitos dos seus usuários não querem fornecer sua localização, portanto, é necessário adotar um estilo de desenvolvimento defensivo.
- Resolva todos os erros da API de geolocalização para adaptar seu site a essa condição.
- Seja claro e explícito sobre sua necessidade pelo local.
- Use uma solução substituta, se necessário.
Use um substituto 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 o site ou aplicativo exigir a localização atual do usuário, existem soluções de terceiros que permitem que você tenha uma estimativa 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 no banco de dados RIPE. Esses locais geralmente não são muito precisos e normalmente fornecem a posição do hub de telecomunicações ou da torre de celular mais próxima do usuário. Em muitos casos, eles podem não ser tão precisos, especialmente se o usuário estiver em uma VPN ou em algum outro serviço de proxy.
Sempre solicitar acesso à localização por um gesto do usuário
Confirme se os usuários entenderam por que você está pedindo a localização deles e qual será o benefício para eles. Solicitar imediatamente na página inicial enquanto o site carrega resulta em uma experiência ruim para o usuário.
Em vez disso, ofereça ao usuário uma call-to-action clara ou uma indicação de que uma operação exigirá acesso à localização dele. Assim, o usuário pode associar mais facilmente a solicitação de acesso do sistema à ação que acabou de ser iniciada.
Dê uma indicação clara de que uma ação vai solicitar a localização 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 hotel, ele recebeu uma solicitação para compartilhar a localização do GPS imediatamente após tocar na call-to-action "Encontrar 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 quer reservar um quarto em Boston.
Uma experiência melhor é garantir que os usuários entendam por que você está solicitando a localização deles. Adicione um significado comum entre dispositivos, como um localizador de cobertura ou uma call-to-action explícita, como "Encontrar nas proximidades".
Chame a atenção dos usuários para que concedam permissão de localização
Você não tem acesso ao que os usuários estão fazendo. Você sabe exatamente quando os usuários não permitem o acesso aos locais deles, mas não sabe quando eles concedem acesso. Você só sabe que teve acesso quando os resultados são exibidos.
É uma boa prática "incentivar" os usuários a agir se você precisa que eles concluam a ação.
Recomendações:
- Configure um timer que seja acionado após um curto período. 5 segundos é um bom valor.
- Se você receber uma mensagem de erro, mostre-a ao usuário.
- Se você receber uma resposta positiva, desative o timer e processe os resultados.
- Se, após o tempo limite, você não receber uma resposta positiva, mostre uma notificação ao usuário.
- Se a resposta chegar mais tarde 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
Agora, a maioria dos navegadores é compatível com a API Geolocation, mas é sempre recomendado verificar a compatibilidade 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 API Geolocation oferece um método "único" simples para receber a localização do usuário: getCurrentPosition(). Uma chamada para esse método informa de forma assíncrona
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 for a primeira vez que um aplicativo nesse domínio solicita permissões, o navegador normalmente verificará o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou proibir pesquisas de permissão. Nesse caso, o processo de confirmação é ignorado.
Dependendo do dispositivo de localização usado pelo navegador, o objeto de posição pode conter muito mais do que apenas latitude e longitude. Por exemplo, pode incluir uma altitude ou uma direção. Não é possível determinar quais informações extras esse sistema de localização usa até que ele retorne os dados.
Como monitorar a localização do usuário
A API Geolocation permite que você receba a localização do usuário (com o consentimento dele) com uma única chamada para getCurrentPosition().
Se você quiser monitorar continuamente a localização do usuário, use o método da API Geolocation, watchPosition(). Ele opera de maneira semelhante ao
getCurrentPosition(), mas é acionado várias vezes que o software
de posicionamento:
- Recebe um bloqueio mais preciso do usuário.
- 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 ver a localização do usuário
- Você quer obter um bloqueio mais preciso da localização do usuário.
- Seu app 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 entra em uma determinada zona definida.
Práticas recomendadas ao usar a geolocalização
Sempre carregue e economize bateria
Monitorar mudanças em 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 geográfico, você, como desenvolvedor da Web, não tem ideia de que tipo de suporte o dispositivo do usuário oferece para monitorar a localização do usuário e, enquanto você assiste a uma posição, está envolvendo o dispositivo em muito processamento extra.
Quando não for mais necessário rastrear a posição do usuário, chame clearWatch para desativar os sistemas de geolocalização.
Lide com os erros corretamente
Infelizmente, nem todas as pesquisas de local são bem-sucedidas. Talvez um GPS não possa ser localizado ou o usuário tenha desabilitado repentinamente as pesquisas de localização. No caso de um
erro, um segundo argumento opcional para getCurrentPosition() é chamado. Assim, você pode 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);
};
Reduzir 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, apenas 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 apenas retorna mais rapidamente se o usuário já
solicitou os dados, mas também impede que o navegador inicie
as interfaces de hardware de geolocalização, como triangulação do 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);
};
Defina um tempo limite para evitar que o usuário fique esperando
A menos que você defina um tempo limite, sua solicitação para 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ê quiser encontrar a loja mais próxima de um usuário, é improvável que precise de precisão de 1 metro. Ela foi projetada para fornecer uma localização aproximada que é retornada o mais rápido possível.
Se você precisar 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 o problema 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 geolocalização com o Chrome DevTools
Depois de configurar a geolocalização, recomendamos:
- Teste como seu app funciona em diferentes geolocalizações.
- Verifique se o aplicativo faz uma degradação suave quando a geolocalização não está disponível.
Você pode fazer as duas coisas no Chrome DevTools.
- Abra o Chrome DevTools.
- Pressione Esc para Abrir a gaveta do console.
- Abrir o menu de gaveta do Console
- Clique na opção Sensores para mostrar a guia "Sensores".
Aqui, você pode substituir o local por uma cidade principal predefinida, inserir um local personalizado ou desativar a geolocalização configurando a substituição como Local indisponível.