APIs Nativas do HTML5

Geolocalização

O que é

Permite obter a localização geográfica do usuário (latitude, longitude e precisão), mediante permissão.

Exemplo de Uso

<button onclick="obterLocalizacao()">Obter Localização</button>
<p id="saida"></p>

<script>
  function obterLocalizacao() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          document.getElementById('saida').innerHTML =
            'Latitude: ' + pos.coords.latitude + '<br>Longitude: ' + pos.coords.longitude;
        },
        (erro) => {
          document.getElementById('saida').innerHTML = 'Erro: ' + erro.message;
        }
      );
    } else {
      document.getElementById('saida').innerHTML = 'Geolocalização não suportada.';
    }
  }
</script>

Cuidados

Sempre solicita permissão ao usuário.
Funciona melhor em dispositivos móveis.
Depende de GPS, Wi-Fi ou IP.

Armazenamento Local

Permite armazenar dados no navegador, sem necessidade de servidor. Ideal para preferências, carrinhos, dados temporários ou offline.

localStorage

Armazena dados sem data de expiração.

Exemplo

localStorage.setItem('nome', 'Maria');
const nome = localStorage.getItem('nome');
console.log(nome);

sessionStorage

Dados são armazenados apenas durante a sessão do navegador (fecha aba, os dados somem).

Exemplo

sessionStorage.setItem('tema', 'escuro');

Diferença entre localStorage e sessionStorage

Característica	localStorage	sessionStorage
Persistência	Permanente	Até fechar a aba
Escopo	Toda origem	Apenas a aba atual
Capacidade	~5MB	~5MB

Drag & Drop

Permite arrastar e soltar elementos dentro da página.

Exemplo Simples

<div id="arrastavel" draggable="true" style="width:100px; height:100px; background:red;">
  Arraste-me
</div>

<div id="destino" style="width:200px; height:200px; background:lightgray;">
  Solte aqui
</div>

<script>
  const item = document.getElementById('arrastavel');
  const destino = document.getElementById('destino');

  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', 'Elemento arrastado');
  });

  destino.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  destino.addEventListener('drop', (e) => {
    e.preventDefault();
    destino.innerHTML = 'Item Solto!';
  });
</script>

Web Workers

Permite executar scripts em segundo plano, sem travar a interface principal da página.

Funcionamento

Você cria um arquivo JavaScript separado que roda em paralelo.

Exemplo

worker.js

onmessage = function(e) {
  const resultado = e.data * 2;
  postMessage(resultado);
};

index.html

<script>
  const worker = new Worker('worker.js');
  worker.postMessage(5);

  worker.onmessage = function(e) {
    console.log('Resultado: ' + e.data);
  };
</script>

WebSockets

Permite comunicação bidirecional em tempo real entre cliente e servidor.

Exemplo Básico

const socket = new WebSocket('wss://echo.websocket.org');

socket.onopen = function() {
  socket.send('Olá servidor!');
};

socket.onmessage = function(event) {
  console.log('Mensagem recebida: ' + event.data);
};

Usado em chats, jogos online, notificações em tempo real.

Outras APIs Nativas Relevantes

API	Descrição
Notification API	Envia notificações push no navegador.
Fullscreen API	Coloca a página ou elementos em tela cheia.
Battery Status API	Acessa informações sobre o nível de bateria.
Vibration API	Controla vibração de dispositivos móveis.
Clipboard API	Copia e cola diretamente no clipboard.
Speech Recognition API	Reconhecimento de voz no navegador.
Device Orientation API	Detecta movimento e rotação de dispositivos.
Payment Request API	Facilita pagamentos diretamente no navegador.

Melhores Práticas ao Usar APIs Nativas

Sempre cheque se a API é suportada:

if ('geolocation' in navigator) {
  // Usar a API
}

Peça permissões de forma clara e com contexto.
Utilize fallback (soluções alternativas) para navegadores que não suportam determinada API.
Considere segurança e privacidade, especialmente ao acessar dados sensíveis como localização ou clipboard.

Exemplo Prático Completo com Geolocalização e Armazenamento

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>APIs HTML5</title>
</head>
<body>

  <h1>Exemplo de Geolocalização e Armazenamento</h1>

  <button onclick="obterLocalizacao()">Obter Localização</button>
  <p id="saida"></p>

  <button onclick="salvarNome()">Salvar Nome no LocalStorage</button>
  <button onclick="mostrarNome()">Mostrar Nome</button>
  <p id="nome"></p>

  <script>
    function obterLocalizacao() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((pos) => {
          const texto = 'Latitude: ' + pos.coords.latitude + ', Longitude: ' + pos.coords.longitude;
          document.getElementById('saida').innerHTML = texto;
        });
      } else {
        document.getElementById('saida').innerHTML = 'Geolocalização não suportada.';
      }
    }

    function salvarNome() {
      localStorage.setItem('nome', 'Maria');
    }

    function mostrarNome() {
      const nome = localStorage.getItem('nome') || 'Nenhum nome salvo';
      document.getElementById('nome').innerText = nome;
    }
  </script>

</body>
</html>

Conclusão

As APIs nativas do HTML5 transformaram os navegadores em plataformas extremamente poderosas, capazes de realizar tarefas complexas que antes eram restritas a softwares instalados. Usar essas APIs permite criar aplicações web robustas, modernas e altamente interativas.

Próximo Passo

Agora que você domina as APIs nativas, o próximo módulo aborda as Boas Práticas no HTML5, cobrindo semântica, acessibilidade, SEO, performance e organização do código para criar projetos profissionais e escaláveis.