Geolocation API

Vamos falar sobre Geolocation API javascript esse post servirá como base para o conteúdo do curso de PWA que estou rodando no meu canal. Na versão 2020 do curso iremos abordar Web APIs disponíveis para iOS e nesse primeiro posts iremos abordar a Geolocation web API.

Resumo do conteúdo

• O que é uma PWA?
• O que é a Geolocation API?
• Suporte a geolocation API
• GPS
• Privacidade
• Como utilizar a geolocation api?
• Vídeos do canal

O que é a Geolocation API?

Umas das primeiras web APIs lançadas junto com o HTML5, para termos noção esse recurso estava disponível na versão 5 do Chrome e Safari em 2010. A Geolocation API possui uma série de funções e eventos que permitem a localização do usuário através doso dados: latitude e longitude.

Suporte a geolocation API

Esse recurso é totalmente dependente do device do usuário vimos que o recurso é presente 94% dos browsers que suporte alto. Mas a sua precisão depende que o device que possua GPS, caso contrário essa informação será gerada por cruzamento de dados, por exemplo, rede e endereço IP assim utilizando um IP geolocation API. Isso significa se o device não possuir suporte essas informações não serão tão precisas.

GPS

Outro ponto importante é o consumo de bateria, para os dispositivos móveis o acesso ao GPS causa um custo maior de processamento assim aumenta o consumo de bateria, então é importante fazer o uso consciente desse recurso.

Privacidade

Na maioria dos devices esse recurso é dependente de uma conexão HTTPS, também antes do acesso a esse recurso o browser irá requisitar permissão de acesso à Geolocalização do usuário. Como podemos ver na imagem a seguir:

Ideal caso armazene ou monitore a movimentação do usuário deixe claro o uso desse recurso. Esse recurso também só será acessado numa aplicação que estiver rodando num servidor web.

Como utilizar a geolocation API

Depois de uma introdução sobre a API agora vamos ver como la utiliza na nossa aplicação:

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
 
const geoSuccess = (position) => {
        console.log(position.coords.latitude, position.coords.longitude);
      };

      const geoError = (error) => {
        console.log('Error occurred. Error code: ' + error.code);
      };Code language: JavaScript (javascript)

No código acima fazem a chamada da API dentro de navigator, podemos conferir se o browser tem suporte a geolocation verificando se o atribulo é nulo, mas em 2020 a API está presente na maioria dos browsers então não me vou preocupar como esse ponto.

Chamamos a função get position responsável por requisitar a latitude e longitude do usuário. Ela recebe como parâmetro duas funções uma parar executar caso sucesso ou falha de acesso ao recurso.

Tipos de resposta geolocation API

Se a requisição for bem sucedida teremos a chamada da função geoSuccess com o retorno da latitude(position.coords.latitude) e longitude(position.coords.longitude). Em caso de erro teremos a chamada da função geoError com os possíveis códigos:

• 0: erro desconhecido
• 1: permissão negada
• 2: erro na resposta da fonte da informação
• 3: timed out

Essa é uma introdução ao assunto em breve estarei postando um vídeo sobre o assunto no meu canal. Qualquer dúvida deixe um comentário ou continue lendo mais tutoriais na página da categoria.

Referência: Geolocation API MDN

Conteúdo relacionado

• Web Share API Level 2
• Badging API
• Push Notifications com oneSignal

Vídeos do canal

No meu canal tenho um curso de PWA grátis com mais de 50 aulas sobre PWA, então siga-me no canal para acompanhar as novidades. Veja também as aulas sobre o assunto que eu gravei no canal.