Usando a API de geolocalização em seu Progressive Web App

Você pode usar HTTP ao trabalhar localmente, usando a origem localhost. Isso ajuda a facilitar o desenvolvimento. O objeto de geolocalização tem três métodos:

• getCurrentPosition : uma chamada direta para obter a posição atual do dispositivo
• watchPosition : dispara quando a localização do dispositivo muda
• clearWatch : para ou limpa o relógio criado chamando o método watchPosition

Usando getCurrentPosition

O uso mais simples do objeto de geolocalização é obter a localização do dispositivo em uma única chamada usando o método getCurrentPosition.

O método tem três parâmetros, um retorno de chamada de sucesso, um retorno de chamada de erro e objeto de opções. Os dois últimos parâmetros são opcionais.

O retorno de chamada bem-sucedido terá um único parâmetro passado, um objeto Position. Da mesma forma, o retorno de chamada de erro recebe um único parâmetro, um objeto PositionError.

O parâmetro options é um objeto PositionOptions. Tem três propriedades:

• maximumAge : um número inteiro (milissegundos) indicando a idade de uma posição em cache válida
• tempo limite : quantos milissegundos antes que o manipulador de erros seja chamado, o padrão é sem tempo limite
• enableHighAccuracy : verdadeiro ou falso, falso por padrão. Ativar resulta em mais consumo de energia e mais tempo para coletar a posição.

Todas as propriedades PositionOptions são opcionais. Se um valor não for fornecido, o sistema de geolocalização usa os padrões. O objeto Position passado para o retorno de chamada de sucesso tem duas propriedades, coords (um objeto Coordinates) e timestamp. As coordenadas têm todos os valores (somente leitura) que buscamos:

• latitude : double
• longitude : duplo
• altitude : duplo, metros acima do nível do mar
• precisão : precisão ou raio de precisão em metros
• altitudeAccuracy : precisão ou raio de precisão em metros
• rumo : em quantos graus do Norte verdadeiro o dispositivo está se movendo
• velocidade : velocidade em metros/segundo em que o dispositivo está se movendo

Você deve observar que nem todos os valores serão fornecidos. Você sempre obterá pelo menos a latitude e a longitude. Vou revisar a precisão um pouco mais tarde.

A altitude depende dos recursos do dispositivo, portanto, você deve levar em consideração os valores que não estão sendo fornecidos. Crie uma experiência de aprimoramento elegante quando a altitude agrega valor à experiência do aplicativo.

O valor do carimbo de data/hora é um objeto Date especificando quando o local foi determinado.

  if (navigator.geolocation) { navigator.geolocation.getCurrentPosition (setCurrentPosition, positionError, { enableHighAccuracy: false, tempo limite: 15000, maximumAge: 0 }); } function setCurrentPosition (position) { document.querySelector ('.accuracy').innerHTML=position.coords.accuracy; document.querySelector ('.altitude').innerHTML=position.coords.altitude; document.querySelector ('.altitudeAccuracy').innerHTML=position.coords.altitudeAccuracy; document.querySelector ('.heading').innerHTML=position.coords.heading; document.querySelector ('.latitude').innerHTML=position.coords.latitude; document.querySelector ('.longitude').innerHTML=position.coords.longitude; document.querySelector ('.speed').innerHTML=position.coords.speed; }
 

Lidando com erros de posição

Se houver um problema ao capturar a posição do dispositivo do usuário, a função de retorno de chamada de erro será acionada. O objeto PositionError contém uma propriedade Code numérica e uma mensagem. A propriedade code é um valor unsigned_short que você pode combinar com o valor do objeto de erro.

• UNKNOWN_ERROR: Código 0, o erro mais frustrante porque a posição não pôde ser determinada e o navegador não sabe o porquê
• PERMISSION_DENIED: Código 1, O usuário negou permissão para usar a API de geolocalização a partir do prompt de permissão
• POSITION_UNAVAILABLE: Código 2, A localização do dispositivo não estava disponível
• TIMEOUT: Código 3, a posição não pôde ser coletada dentro do intervalo de tempo limite

Este é um exemplo de como um retorno de chamada de tratamento de erro de geolocalização pode funcionar.

  function positionError (error) { switch (error.code) { erro de caso.PERMISSION_DENIED: console.error ("O usuário negou a solicitação de geolocalização."); pausa; erro de caso.POSITION_UNAVAILABLE: console.error ("Informações de localização indisponíveis."); pausa; erro de caso. TIMEOUT: console.error ("A solicitação para obter a localização do usuário expirou."); pausa; erro de caso.UNKNOWN_ERROR: console.error ("Ocorreu um erro desconhecido."); pausa; } }
 

Rastreamento de mudanças de posição

O getCurrentPosition é ótimo para obter a localização atual do usuário. Mas se seu aplicativo precisa rastrear a mudança de posição do usuário, pense em instruções de direção passo a passo ou rastreando uma corrida, ter o dispositivo fornecendo coordenadas atualizadas é mais eficiente.

Felizmente, o método watchPosition de geolocalização dispara retornos de chamada quando o dispositivo a localização é atualizada. Se não fosse por isso, você seria responsável por usar um método setInterval ou requestAnimationFrame para chamar getCurrentPosition repetidamente.

Fazer com que o dispositivo acione uma atualização quando a atualização do dispositivo estiver mais eficiente. Isso preserva a bateria e o uso excessivo da CPU.

O método watchPosition tem a mesma assinatura que getCurrentPosition, então você pode facilmente atualizar para usar o método watchPosition.

O método retorna um id numérico , semelhante a setInterval. Você pode usar esse id para interromper a vigilância posteriormente.

  var geoWatch; function startWatch () { if (! geoWatch) { if ("geolocalização"no navegador &&"watchPosition"no navigator.geolocation) { geoWatch=navigator.geolocation.watchPosition (setCurrentPosition, positionError, { enableHighAccuracy: false, timeout: 15000, maximumAge: 0 }); } } } 

O método clearWatch de geolocalização aceita o ID do relógio e limpa o retorno de chamada do relógio. Neste exemplo, passo a id geoWatch para o método clearWatch para interromper o retorno de chamada. Além disso, defino a variável como indefinida porque verifico se ela está sendo usada antes de chamar o método watchPosition.

  function stopWatch () { navigator.geolocation.clearWatch (geoWatch); geoWatch=indefinido;
}  

Agora você pode transformar seu telefone em um contador de passos caro!

Apenas por diversão, você também pode criar uma versão progressiva do aplicativo da web do Pokémon Go. O método watchPosition de geolocalização pode ser usado para rastrear onde o jogador está localizado para que você possa exibir pequenos monstros. Vou deixar para você descobrir como usar os monstros para praticar tiro ao alvo.

Definir coordenadas usando as ferramentas de desenvolvedor do Chromium

No Chrome, new Edge e outros navegadores baseados em Chromium, as ferramentas de desenvolvedores têm um’sensores’aba. Neste painel você pode definir a latitude e longitude do dispositivo. Você também pode ajustar a orientação do dispositivo, mas isso é útil com a API do giroscópio.

A emulação do sensor de geolocalização vem com muitas das principais cidades do mundo já predefinidas. Você pode adicionar outros locais conforme necessário.

Para selecionar um local, basta pressionar o campo de entrada para o direito de’Geolocalização’. Parece uma entrada de texto, mas exibe uma lista de locais disponíveis.

Pressionar o botão’Gerenciar’exibe uma lista de locais e a capacidade de adicionar um novo local.

Este é um ótimo recurso para usar ao desenvolver aplicativos dependentes de geolocalização. A única desvantagem é que você não pode emular um dispositivo móvel. Mas, como watchPosition tem a mesma assinatura do método getCurrentPosition, você pode pelo menos garantir que seu fluxo de trabalho processe o objeto de posição corretamente.

Como a posição é determinada

Existem três maneiras de os dispositivos determinarem a localização.

• Wifi
• Satelli te
• Triangulação de torre de celular

Ao usar Wifi, o roteador de rede é normalmente um local fixo e é bem conhecido. Existem vários serviços altamente precisos que rastreiam esse tipo de coisa e todos os principais fornecedores de plataforma usam um ou mais desses serviços para determinar a posição dos dispositivos.

Lembre-se de que eu disse antigamente que você precisava ter acesso a um banco de dados IP e quanto mais preciso o banco de dados ou serviço, mais caro ele é? Bem, não mais, Apple, Google, Microsoft, etc cuidaram disso para você, desde que você use a API de geolocalização.

Na minha experiência, esses valores geralmente têm minha localização fixada em até 30 metros ou cerca de 30 metros. Os navegadores não são o fator determinante para determinar a localização e a precisão. Eles simplesmente consultam a interface do sistema operacional para o hardware GPS.

O próximo método é conectando-se a um satélite de geolocalização. Esses valores tendem a ser extremamente precisos, geralmente dentro de 10 metros. O problema é que você precisa ter uma visão desobstruída de um dos satélites, que geralmente ocorre quando você está do lado de fora.

Isso significa que quando você está dentro de um edifício, você não pode usar este método, mas o método Wifi deve chute em vez disso. No entanto, se um desses métodos não estiver disponível e você tiver um dispositivo celular, a última opção é triangular as posições da torre de celular.

A precisão desta técnica não é muito boa, normalmente entre 1000 e 3500 metros. Como esses métodos podem variar, é uma boa ideia sempre verificar a precisão para ver se você precisa ajustar a resposta do seu aplicativo de acordo. Lembre-se de que você não controla como o dispositivo do usuário obtém suas coordenadas, mas pode determinar como usar o valor da posição com base na precisão.

Localização aproximada do iOS

A Apple introduziu uma nova configuração no iOS 14, localização aproximada. A intenção é proteger a privacidade do usuário, fornecendo uma ampla variedade de locais. Como os dispositivos podem fornecer localizações altamente precisas, isso pode fazer com que bandidos encontrem você.
A configuração de localização aproximada adiciona algum ofuscamento à sua localização. Minha interpretação é que ele reportará sua posição semelhante a se fosse triangulada fora de torres de celular, ou aproximadamente em um raio de 1 km.

O problema que isso representa é quando seu aplicativo precisa de localizações precisas. Por exemplo, um aplicativo de compartilhamento de passeio. O motorista precisa saber onde o passageiro está para que possa buscá-lo. Como a Apple não apresentou uma opção para os usuários controlarem isso em um aplicativo por nível de aplicativo, é uma configuração de tudo ou nada. Se o usuário escolher a localização aproximada de seu iPhone, isso afetará todos os aplicativos.
Não há sinalizador ou valor que seu aplicativo pode verificar para ver se a localização é precisa ou aproximada. Você pode usar a propriedade de precisão para determinar o quão verdadeira a posição está sendo relatada. Mesmo definir a propriedade Highprecision como true não altera o valor.
O valor é relatado em incrementos de 15 minutos. Portanto, sem atualizações se o usuário se mover, você não saberá por 15 minutos.

Resumo

A geolocalização é uma das mais legais, sob APIs de plataforma web utilizadas. Embora nem todos os aplicativos da web possam se beneficiar da geolocalização, muitos podem.

A API é bastante simples de implementar, mas você só precisa usá-la quando ela oferecer valor real. O uso excessivo da API pode esgotar a bateria do visitante e consumir ciclos de CPU.

A localização é determinada pelo dispositivo, que usará uma das três técnicas para determinar a localização. A precisão é fornecida pelo dispositivo para que você saiba quão confiáveis ​​são os dados de localização.

Você pode obter um único valor de localização ou usar a API para rastrear alterações na localização do dispositivo. Assim, você pode exibir atrações da área ou monitorar o caminho de um usuário.