1. API de Geolocalização
A API de Geolocalização permite que você obtenha a localização atual do dispositivo do usuário. Essa API é útil para aplicativos de mapas, serviços de entrega, e personalização de conteúdo com base na localização do usuário.
Exemplo de Uso:
// Verificando se a API de Geolocalização está disponível
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(posicao) => {
const { latitude, longitude } = posicao.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(erro) => {
console.error("Erro ao obter geolocalização", erro);
}
);
} else {
console.error("Geolocalização não é suportada pelo navegador.");
}
Esse código verifica se a API de Geolocalização está disponível no navegador e obtém a latitude e longitude do usuário. Vale lembrar que, por questões de privacidade, o usuário sempre precisará dar permissão antes que sua localização seja acessada.
2. Web Storage: localStorage e sessionStorage
O Web Storage permite que você armazene dados diretamente no navegador. Ele é composto por duas APIs: localStorage e sessionStorage. Ambas permitem armazenar dados no formato chave-valor, mas o localStorage mantém os dados mesmo após fechar o navegador, enquanto o sessionStorage só armazena dados durante a sessão.
Exemplo de Uso com localStorage:
// Armazenando dados no localStorage
localStorage.setItem('usuario', 'João');
// Recuperando dados do localStorage
const usuario = localStorage.getItem('usuario');
console.log(usuario); // Saída: João
// Removendo dados do localStorage
localStorage.removeItem('usuario');
// Limpando todos os dados do localStorage
localStorage.clear();
Exemplo de Uso com sessionStorage:
// Armazenando dados no sessionStorage
sessionStorage.setItem('token', 'abc123');
// Recuperando dados do sessionStorage
const token = sessionStorage.getItem('token');
console.log(token); // Saída: abc123
// Removendo dados do sessionStorage
sessionStorage.removeItem('token');
3. API de Notificações
A API de Notificações permite que uma página web envie notificações nativas do sistema ao usuário, mesmo que a página não esteja ativa. Isso é especialmente útil para aplicativos como e-mails, redes sociais e serviços de mensagens.
Exemplo de Uso:
// Verificando se a API de Notificações está disponível
if ("Notification" in window) {
Notification.requestPermission().then((permissao) => {
if (permissao === "granted") {
new Notification("Olá! Esta é uma notificação.");
}
});
}
O exemplo acima solicita permissão ao usuário para enviar notificações e, se concedida, exibe uma notificação básica. As notificações podem ser personalizadas com ícones, ações e muito mais.
4. API de Fetch
A API fetch() é uma interface moderna para realizar requisições HTTP. Ela permite que você busque dados de um servidor ou envie informações para uma API de maneira simples e assíncrona, substituindo o antigo XMLHttpRequest.
Exemplo de Uso:
// Fazendo uma requisição GET para uma API
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((dados) => console.log(dados))
.catch((erro) => console.error('Erro:', erro));
Esse exemplo realiza uma requisição GET para uma API de teste e exibe a resposta no console. A API fetch() é amplamente usada para comunicação entre o frontend e o backend de aplicações web.
5. API de Clipboard
A API do Clipboard permite que uma aplicação web copie e cole texto diretamente na área de transferência do usuário. Isso pode ser útil em formulários, compartilhamento de links ou quando o usuário precisa copiar dados rapidamente.
Exemplo de Copiar Texto:
// Copiando texto para a área de transferência
navigator.clipboard.writeText('Texto copiado!').then(() => {
console.log('Texto copiado com sucesso!');
}).catch((erro) => {
console.error('Erro ao copiar texto:', erro);
});
Essa API é segura e exige que a ação seja executada em resposta a uma interação do usuário, como um clique de botão.
Conclusão
As APIs do navegador expandem significativamente o que é possível fazer com JavaScript em aplicações web. Desde acessar a localização do usuário até gerenciar dados localmente e enviar notificações, essas APIs tornam as aplicações mais dinâmicas e interativas. Conhecer e utilizar essas ferramentas de maneira eficaz pode ajudar a criar experiências de usuário mais ricas e envolventes.