Testador de Háptica iOS

O que é feedback háptico?

Feedback háptico é uma resposta tátil — uma pequena vibração ou toque — que um dispositivo produz para confirmar uma ação ou chamar atenção. Em smartphones, é gerado por um pequeno motor (nos iPhones, o "Taptic Engine" da Apple) que cria pulsos curtos e precisamente cronometrados. Diferentemente de uma vibração longa e zumbante, os hápticos modernos são nítidos e sutis, projetados para parecerem um clique físico em vez de um alarme.

Em aplicativos nativos do iOS, desenvolvedores usam a API UIFeedbackGenerator para reproduzir diferentes padrões hápticos, como um toque leve, um duplo toque de "sucesso" ou um triplo toque de "erro". Por muito tempo, a plataforma web no iOS Safari não tinha equivalente — navigator.vibrate() era simplesmente ignorado em iPhones. A biblioteca ios-haptics explora um efeito colateral do elemento <input type="checkbox" switch> (introduzido no Safari 17.4): alternar esse switch dispara o mecanismo háptico do sistema, permitindo que páginas web reproduzam padrões hápticos curtos a partir de JavaScript.

Descrição da ferramenta

O iOS Haptics Tester permite disparar padrões de feedback háptico diretamente do seu navegador para verificar se seu dispositivo e versão do SO os suportam. Ele expõe os três padrões fornecidos pela biblioteca ios-haptics — um toque único, uma "confirmação" (dois toques rápidos) e um "erro" (três toques rápidos) — e também inclui um botão que chama a API padrão navigator.vibrate() como fallback para Android e outros dispositivos.

Exemplos

Recursos

• Botões de um toque para padrões hápticos únicos, de confirmação e de erro
• Detecção automática de suporte a hápticos no dispositivo atual
• Teste de fallback integrado para a Web API padrão navigator.vibrate()
• Log de eventos ao vivo com timestamps para cada padrão disparado
• Banners de status claros explicando compatibilidade de versão do iOS

Casos de uso

• Desenvolvedores web verificando se o feedback háptico funciona em um iPhone real antes de integrar ios-haptics em seu próprio site ou PWA
• Engenheiros de QA verificando como os mesmos padrões se sentem em diferentes dispositivos, versões do SO e navegadores
• Usuários curiosos que querem experimentar a diferença entre feedback "Taptic" estilo iOS e o pulso navigator.vibrate() mais longo do Android

Como funciona

No iOS Safari, a ferramenta cria dinamicamente um <input type="checkbox" switch> oculto, o alterna e depois o remove do DOM. O ato de alternar esse switch nativo é o que dispara o Taptic Engine — não há uma Web API pública que faça isso diretamente. Os padrões "confirmação" e "erro" simplesmente repetem a alternância duas ou três vezes em rápida sucessão.

Em dispositivos que não suportam o truque do switch do iOS, a biblioteca volta para navigator.vibrate(), que é amplamente suportado em navegadores Android. O botão "Testar navigator.vibrate()" nesta ferramenta chama essa API diretamente para que você possa comparar os dois mecanismos.

Opções explicadas

• Háptico único — Reproduz um toque curto. Melhor usado para confirmar uma pequena interação, como um toggle ou um campo de formulário bem-sucedido.
• Confirmação (dois hápticos rápidos) — Reproduz dois toques rápidos. Ideal para "salvo", "enviado" ou outras confirmações positivas.
• Erro (três hápticos rápidos) — Reproduz três toques rápidos. Use para sinalizar erros de validação ou falhas destrutivas.
• Testar navigator.vibrate() — Chama a Web Vibration API com duração de 200 ms. Útil para confirmar suporte a dispositivos não-iOS e para comparar a sensação com os padrões do iOS.
• Limpar log — Remove todas as entradas do log de eventos.

Limitações

• Hápticos iOS programáticos funcionam apenas no iOS 17.4 até 26.4. Apple corrigiu o comportamento subjacente no iOS 26.5, então chamar esses padrões a partir de JavaScript não dispara mais o Taptic Engine nas versões mais recentes do iOS. A interação direta do usuário com um <input type="checkbox" switch> real ainda funciona.
• iOS Safari ignora navigator.vibrate() em praticamente todas as versões, então o botão de fallback parecerá silencioso em iPhones.
• Navegadores de desktop não podem produzir feedback háptico; os botões serão executados, mas você não sentirá nada.
• Alguns navegadores Android exigem que a página esteja em primeiro plano e um gesto do usuário antes que navigator.vibrate() seja acionado.
• Feedback háptico também pode ser desabilitado nas configurações do sistema do dispositivo (por exemplo, Configurações → Sons e Hápticos → Hápticos do Sistema no iOS).

Dicas

• Teste em um dispositivo real, não em um simulador ou emulador — dispositivos virtuais não possuem um Taptic Engine.
• Se nada acontecer no iPhone, verifique se Hápticos do Sistema estão ativados em Configurações e se o Modo Silencioso não os está suprimindo em versões antigas do iOS.
• Use o padrão de Confirmação com moderação; usar hápticos rápidos em excesso rapidamente se torna irritante.
• Combine hápticos com feedback visual — um háptico sozinho raramente é suficiente para comunicar estado ao usuário.

Perguntas frequentes

Por que não sinto nada no meu iPhone? Você provavelmente está no iOS 26.5 ou mais recente, onde Apple corrigiu a técnica usada por esta biblioteca. Tente um dispositivo executando iOS 17.4–26.4 ou verifique se Hápticos do Sistema estão ativados em Configurações.

Por que navigator.vibrate() não funciona no iPhone? Apple nunca implementou a Web Vibration API no iOS Safari. Atualmente não há uma forma padronizada de disparar vibração no iOS a partir de uma página web.

É seguro usar em produção? A biblioteca é pequena e sem efeitos colaterais, mas como depende de uma peculiaridade de um elemento HTML específico, pode quebrar em qualquer atualização futura do iOS — como já aconteceu no iOS 26.5. Sempre trate feedback háptico como um aprimoramento progressivo, nunca como um requisito.

Funciona dentro de uma PWA ou aplicativo "Adicionar à Tela Inicial"? Sim, nas versões do iOS suportadas, a mesma técnica funciona em aplicativos web instalados assim como no Safari.