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?

Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas utilizando APIs modernas para fornecer novos recursos somente disponíveis em aplicações nativas. Recursos como confiabilidade e capacidade de instalação, ao mesmo tempo, estão totalmente disponíveis a qualquer usuário, em qualquer tipo dispositivo com uma única base de código.

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:

Exemplo pop up de permissão da apple Geolocation API

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
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.

Aula prática sobre Gelocation API

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.