---
title: "APIs Nativas que Poucos Usam: WebOTP, Web Share e Beacon API"
slug: native-web-apis
date: 2025-04-30
category: "Arquitetura"
tags: ["web-apis", "webotp", "web-share", "beacon-api", "user-experience", "native-apis", "javascript"]
readTime: "4 min"
excerpt: "Descubra 3 APIs nativas do navegador que podem revolucionar a experiência do usuário: WebOTP para autopreenchimento de SMS, Web Share para compartilhamento nativo e Beacon para envio de dados ao sair da página."
url: https://eliseu.dev/blog/native-web-apis
---

À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:
```javascript
// 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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
// 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](https://linkedin.com/in/eliseusantos) ou [GitHub](https://github.com/EliseuSantos).*