A API Geolocation permite descobrir a localização do usuário, desde que ele dê consentimento para isso.
Com a API Geolocation, você pode descobrir a localização do usuário, desde que ele dê consentimento. Você pode usar essa funcionalidade para, por exemplo, guiar um usuário até o destino dele e marcar geograficamente o conteúdo criado pelo usuário, como o local onde uma foto foi tirada.
A API Geolocation também permite que você veja onde o usuário está e o acompanhe enquanto ele se move, sempre com o consentimento do usuário (e somente enquanto a página estiver aberta). Isso cria muitos casos de uso interessantes, como a integração com sistemas de back-end para preparar um pedido para retirada se o usuário estiver por perto.
É preciso estar ciente de muitos fatores ao usar a API Geolocation. Este guia mostra os casos de uso e as soluções comuns.
Resumo
- Use a geolocalização quando ela beneficiar o usuário.
- Peça permissão como uma resposta clara a uma interação inicial.
- Use a detecção de recursos caso o navegador de um usuário não seja compatível com a geolocalização.
- Não aprenda apenas a implementar a geolocalização, mas também a melhor maneira de usá-la.
- Teste a geolocalização com seu site.
Quando usar a geolocalização
- Encontrar o local mais próximo do usuário em relação a um local físico específico para personalizar a experiência do usuário.
- Personalizar informações (como notícias) de acordo com o local do usuário.
- Mostrar a posição de um usuário em um mapa.
- Marcar dados criados no aplicativo com a localização do usuário (por exemplo, marcar uma foto com uma tag geográfica).
Pedir permissão de forma responsável
Estudos recentes com usuários mostraram que as pessoas desconfiam de sites que simplesmente solicitam que elas informem a posição no carregamento da página. Quais são as práticas recomendadas?
Presuma que os usuários não vão informar a localização deles
Muitos usuários não vão querer informar a localização, então você precisa adotar um estilo de desenvolvimento defensivo.
- Trate todos os erros da API Geolocation para que você possa adaptar seu site a essa condição.
- Seja claro e explícito sobre a necessidade de usar o local.
- Use uma solução alternativa, se necessário.
Usar 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, há soluções de terceiros que permitem obter uma estimativa de onde a pessoa está.
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 do RIPE. Esses locais geralmente não são muito precisos, normalmente fornecendo 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 em uma interação inicial
Verifique se os usuários entendem por que você está pedindo a localização deles e qual será o benefício para eles. Pedir isso imediatamente na página inicial enquanto o site é carregado resulta em uma experiência ruim para o usuário.
Em vez disso, forneça ao usuário uma call-to-action clara ou uma indicação de que uma operação vai 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 iniciar.
Indique claramente que uma ação vai solicitar a localização do usuário
Em um estudo da equipe do Google Ads, quando um usuário foi solicitado a reservar um quarto de hotel em Boston para uma conferência em um site de hotéis específico, ele foi solicitado a compartilhar sua localização GPS imediatamente após tocar na call-to-action "Encontrar e reservar" na página inicial.
Em alguns casos, o usuário ficou frustrado porque não entendeu por que estava vendo hotéis em São Francisco quando queria reservar um quarto em Boston.
Uma experiência melhor é garantir que os usuários entendam por que você está pedindo a localização deles. Adicione um indicador conhecido que seja comum em todos os dispositivos, como um telêmetro, ou uma call-to-action explícita, como "Encontrar perto de mim".
Incentive os usuários a conceder permissão para acessar a localização deles
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, mas não sabe quando eles concedem acesso. Você só sabe que recebeu acesso quando os resultados aparecem.
É recomendável "incentivar" os usuários a agir se você precisar que eles concluam a ação.
Recomendações:
- Configure um timer que seja acionado após um curto período. Cinco segundos é um bom valor.
- Se você receber uma mensagem de erro, mostre uma mensagem 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
A maioria dos navegadores agora oferece suporte à API Geolocation, mas é uma boa prática sempre verificar se há suporte antes de fazer qualquer coisa.
Para verificar a compatibilidade, basta testar a presença do objeto de 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.');
}
Determinar a localização atual do usuário
A API Geolocation oferece um método simples e único para obter 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 essa for a primeira vez que um aplicativo nesse domínio solicita permissões, o navegador geralmente verifica o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou não as consultas de permissão. Nesse caso, o processo de confirmação é ignorado.
Dependendo do dispositivo de localização que o navegador está usando, o objeto de posição pode conter muito mais do que apenas latitude e longitude. Por exemplo, ele pode incluir uma altitude ou uma direção. Não é possível saber quais informações extras o sistema de localização usa até que ele realmente retorne os dados.
Monitorar a localização do usuário
A API Geolocation permite que você obtenha 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 watchPosition() da API Geolocation. Ele funciona de maneira semelhante a
getCurrentPosition(), mas é acionado várias vezes à medida que o software
de posicionamento:
- Bloqueia o usuário com mais precisão.
- 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 monitorar a localização do usuário
- Você quer obter um bloqueio mais preciso na 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 entra em uma determinada zona definida.
Práticas recomendadas ao usar a geolocalização
Sempre limpe e economize bateria
Observar 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 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, está envolvendo o dispositivo em muito processamento extra.
Quando não precisar mais rastrear a posição do usuário, chame clearWatch para desativar os sistemas de geolocalização.
Lidar com erros de maneira adequada
Infelizmente, nem todas as pesquisas de local são bem-sucedidas. Talvez não seja possível localizar um GPS ou o usuário tenha desativado as pesquisas de localização. No caso de um
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);
};
Reduzir a necessidade de iniciar o hardware de geolocalização
Para 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 informar ao navegador que ele deve usar um resultado de geolocalização obtido recentemente. Isso não só retorna mais rapidamente se o usuário já tiver solicitado os dados antes, mas também impede que o navegador inicie as 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 a posição atual pode nunca retornar.
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);
};
Preferir uma localização aproximada a uma localização precisa
Se você quiser encontrar a loja mais próxima de um usuário, é improvável que precise de uma precisão de 1 metro. A API foi projetada para fornecer uma localização aproximada que retorna 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
pela opção enableHighAccuracy. Use com moderação: é 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 geolocalização com o Chrome DevTools
Depois de configurar a geolocalização, você vai precisar:
- Teste como o app funciona em diferentes geolocalizações.
- Verifique se o app 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 da gaveta do console
- Clique na opção Sensores para mostrar a guia "Sensores".
Nessa seção, é possível substituir o local por uma grande cidade predefinida, inserir um local personalizado ou desativar a geolocalização definindo a substituição como Local indisponível.