APIs nativas que poucos usam: WebOTP, Web Share e Beacon API

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

Estas são APIs nativas pouco conhecidas que podem melhorar a experiência do usuário. Para discussões técnicas, implementações ou dúvidas, me encontre no LinkedIn ou GitHub.