Às vezes a gente tá ali quebrando a cabeça pra resolver um problema simples… e esquece que o próprio navegador já entrega soluções nativas, bem resolvidas e com suporte decente nos navegadores modernos.

Quero compartilhar 3 APIs nativas que quase ninguém fala, mas que podem melhorar absurdamente a usabilidade e simplificar seu código:

📱 WebOTP API

Autopreenchimento de código via SMS (sem esforço)

Essa aqui é ouro pra quem trabalha com autenticação por SMS.

Com a WebOTP API, o navegador pega o código do SMS e já preenche o campo automaticamente, sem precisar instalar nada ou abrir app de mensagem.

Detalhes importantes:

• ✅ Funciona em Android + Chrome
• ✅ Precisa de HTTPS
• ✅ A mensagem SMS tem que seguir um padrão com domínio do site

Cenário real:

Autenticação no seu app web, onboarding mobile ou 2FA. O usuário não digita nada, só confirma o recebimento.

Exemplo de implementação:

// O navegador automaticamente detecta e preenche o código
const otpInput = document.getElementById('otp-code');
otpInput.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste') {
    // Código foi preenchido automaticamente
    console.log('Código recebido:', e.target.value);
  }
});

---

📤 Web Share API

Compartilhar direto com o app nativo (sem SDK)

Se você já usou SDK do WhatsApp ou Telegram pra botar botão de compartilhamento… provavelmente já sofreu. A Web Share API resolve isso com uma linha de código.

Abre o menu nativo de compartilhamento do sistema, direto no browser.

Exemplo de implementação:

navigator.share({
  title: 'Confere esse artigo',
  url: 'https://mfe-pro.com/experiencia-real'
})

Detalhes importantes:

• ✅ Funciona bem no mobile
• ✅ Suporte razoável no desktop
• ✅ Fallback fácil de aplicar

Cenário real:

Botão de "Compartilhar com um amigo" no seu app, produto ou até em um blogpost.

Implementação com fallback:

async function shareContent(data) {
  if (navigator.share) {
    try {
      await navigator.share(data);
    } catch (err) {
      console.log('Erro ao compartilhar:', err);
    }
  } else {
    // Fallback para navegadores sem suporte
    copyToClipboard(data.url);
    showToast('Link copiado para a área de transferência!');
  }
}

---

📡 Beacon API

Mandar dados pro backend na hora de sair da página

Essa aqui resolve um problema clássico: como enviar info pro servidor quando o usuário fecha ou troca de página, sem perder a requisição no meio?

A Beacon API foi feita exatamente pra isso. Ela dispara de forma assíncrona e confiável, sem travar a navegação.

Exemplo de implementação:

navigator.sendBeacon('/api/logs', JSON.stringify({ 
  timeOnPage: 187,
  userId: 'user123',
  action: 'page_exit'
}))

Detalhes importantes:

• ✅ Não trava a navegação
• ✅ Confiável mesmo com conexão lenta
• ✅ Assíncrono por natureza

Cenário real:

Analytics customizado, session recording, ou logs de uso que precisam ser salvos mesmo quando o usuário decide sair no meio da interação.

Implementação prática:

// Tracking de tempo na página
let startTime = Date.now();

window.addEventListener('beforeunload', () => {
  const timeOnPage = Date.now() - startTime;
  
  navigator.sendBeacon('/api/analytics', JSON.stringify({
    event: 'page_exit',
    timeOnPage: timeOnPage,
    url: window.location.href,
    timestamp: new Date().toISOString()
  }));
});

---

📋 Resumo Rápido

WebOTP API

• Ideal para: Login via SMS ou verificação em duas etapas
• Benefício: O navegador preenche o código automaticamente, sem depender de app de mensagens
• Suporte: Android + Chrome (com HTTPS)

Web Share API

• Ideal para: Botões de compartilhamento
• Benefício: Com uma linha de código, você abre o menu nativo do sistema
• Funciona: WhatsApp, Telegram, e outros apps nativos — sem precisar de SDKs

Beacon API

• Ideal para: Enviar informações pro backend quando o usuário sai da página
• Benefício: Funciona bem pra analytics customizados, logs ou qualquer métrica que você não pode perder no unload
• Vantagem: Não trava a navegação

🤔 Qual Escolher?

Para autenticação SMS: WebOTP API
Para compartilhamento: Web Share API
Para analytics/logs: Beacon API

💡 Próximos Passos

Qual dessas APIs você já usou ou vê potencial de uso aí no seu projeto? Se quiser, posso trazer um repositório com exemplo real usando na prática.

---

Este artigo apresenta APIs nativas pouco conhecidas que podem revolucionar a experiência do usuário. Para discussões técnicas, implementações ou dúvidas, me encontre no LinkedIn ou GitHub.