Como integrar a geolocalização ao seu PWA

Suponha que o usuário esteja em um navegador compatível, você pode fazer com que seu PWA detecte facilmente a localização do usuário usando a API de geolocalização ou, para ser mais específico, usando o objeto navigator.geolocation dentro dele. Veja como você faz isso corretamente no seu PWA:

Pré-requisitos

• Sólidos conhecimentos de JavaScript e HTML.
• Um PWA funcional servido por HTTPS (siga nosso tutorial de PWA para criar um).

Geolocalização em ação

Você provavelmente não é estranho à geolocalização agora. Com sua permissão, um site que tenha geolocalização integrada pode acessar sua localização, com o qual pode exibir informações relevantes em sua área, ou simplesmente mostrar sua localização no mapa.

Como integrar a geolocalização ao seu PWA

O básico

Primeiro, precisamos entender o mecanismo subjacente por trás do objeto navigator.geolocation . O objeto navigator é um objeto container com o qual muitas APIs da Web são disponibilizadas para nós. Dentro do container do navigator está o objeto de geolocation , fornecido por estes três métodos:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Usando getCurrentPosition() para obter a posição do usuário

O propósito do primeiro método, getCurrentPosition() , deve ser autoexplicativo para você — ele busca uma posição do dispositivo do usuário.

 navigator.geolocation.getCurrentPosition(() => {})

As posições buscadas estão disponíveis em coords e timestamp , com coords sendo um objeto Coordinates . Por padrão, o objeto Coordinates é definido por estas propriedades:

• accuracy a precisão da posição em metros
• altitude a altitude da posição
• accuracy a precisão da altitude da posição em metros
• heading na direção para a qual o dispositivo está indo, expresso em graus. (0 = Norte, Leste = 90, Sul = 180, Oeste = 270)
• latitude a latitude da posição
• longitude a longitude da posição
• speed a velocidade em que o dispositivo está indo, expressa em metros/segundo

Como você deve ter adivinhado, os dispositivos que não possuem o hardware de rastreamento adequado simplesmente não receberão todos os benefícios dessa API, retornando apenas alguns valores e deixando outros valores null . Por exemplo, em um computador desktop, podemos receber apenas os valores de longitude , latitude e accuracy , enquanto os outros valores solicitados ( heading , speed ) retornam null .

watchPosition() — recuperação periódica da posição do usuário

Embora o método mencionado acima seja usado principalmente para recuperar a posição do usuário, ele não é tão útil para aplicativos que dependem da localização precisa do usuário, pois seus usuários são conhecidos por estarem frequentemente em movimento. É quando precisamos do método watchPosition() de navigator.geolocation que registrará uma função de retorno de chamada para atualizações periódicas da posição do usuário.

 navigator.geolocation.watchPosition(position => {
    console.log(posição)
})

O método watchPosition retorna um id de transação exclusivo que pode ser usado para parar de receber atualizações de localização. Usando o id exclusivo e o método navigator.geolocation.clearWatch() , podemos parar de observar uma posição:

 const id = navigator.geolocation.watchPosition(position => {
    console.log(posição)
})

//para de assistir após 10 segundos
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Manipulação de erros

Pode dar errado em breve quando você não tiver uma função adequada configurada para lidar com todos os erros. Para mostrar erros em um bloco legível por humanos, você precisa adicionar o seguinte código em qualquer que seja sua função para mostrar a localização:

 função localizaçãoError(erro) {
    switch(erro.código) {
        erro de caso.PERMISSION_DENIED:
            return "Usuário negou a solicitação de geolocalização.";
        erro de caso.POSITION_UNAVAILABLE:
            return "As informações de localização não estão disponíveis no momento.";
        erro de caso.TIMEOUT:
            return "A solicitação de localização do usuário expirou.";
        caso erro.UNKNOWN_ERROR:
            return "Ocorreu um erro desconhecido.";
    }
}

Além disso, você pode testar isso no console:

 navigator.geolocation.getCurrentPosition(position => {
  console.log(posição)
}, erro => {
	console.error(erro)
})

Isso retornará uma propriedade de code , com 1 significa que a permissão do usuário foi negada, 2 significa que a posição do usuário está indisponível no momento e 3 significa que a solicitação expirou.

Além do básico

Entender o básico é uma coisa, mas você sempre pode se esforçar para ser melhor. Veja como você pode melhorar ainda mais sua função de geolocalização.

Um tempo limite ao procurar coordenadas

Caso seus usuários tenham uma condição de rede lenta, um tempo limite pode ser usado para indicar que a operação expirou. Para adicionar um tempo limite, precisamos adicionar um terceiro parâmetro, no qual contém as seguintes propriedades:

• timeout o número de milissegundos antes que a operação expire.
• maxiumAge a idade máxima da posição armazenada em cache pelos navegadores, medida em milissegundos.
• enableHighAccuracy uma opção autoexplicativa de verdadeiro/falso que pode consumir mais tempo e recursos para buscar posições mais precisas.

 navigator.geolocation.getCurrentPosition(position => {
  console.log(posição)
}, erro => {
	console.error(erro)
}, {
  tempo limite: 2000,
  idade máxima: 20.000,
  enableHighAccuracy: true
})

Exibindo a posição do usuário no Google Maps

Usando a API do Google Maps, podemos exibir a posição do usuário em um mapa do Google.

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Para uma demonstração da API do Google Maps na Web, recomendamos este guia do Google: Exibir posição do usuário ou dispositivo nos mapas. No guia, você encontrará um HTML básico com a API do Google Maps integrada.

Como alternativa, use react-geolocated para seu PWA baseado em React

Caso você não esteja com vontade, o react-geolocated também é uma ótima maneira de obter a geolocalização integrada ao seu aplicativo baseado em React de maneira rápida e sem esforço. Basta instalar o módulo em cima do seu PWA existente usando:

 npm install react-geolocated --save

Depois disso, siga as etapas fornecidas no link oficial do GitHub e você deverá ter um PWA funcional com geolocalização integrada.

Conclusão

E é isso para o processo de integração de geolocalização do seu PWA. Se você achar difícil em qualquer parte do tutorial, não hesite em nos enviar uma pergunta abaixo!

Para os comerciantes Magento que procuram uma solução confiável, oferecemos uma solução Magento PWA completa e econômica para o seu negócio.