¿Qué es la retroalimentación háptica?

La retroalimentación háptica es una respuesta táctil — una pequeña vibración o toque — que un dispositivo produce para confirmar una acción o llamar la atención. En smartphones se genera mediante un pequeño motor (en iPhones, el "Taptic Engine" de Apple) que crea pulsos cortos y precisamente cronometrados. A diferencia de una vibración larga y zumbante, los haptics modernos son nítidos y sutiles, diseñados para sentirse como un clic físico en lugar de una alarma.

En aplicaciones nativas de iOS, los desarrolladores utilizan la API UIFeedbackGenerator para reproducir diferentes patrones hápticos como un toque ligero, un doble toque de "éxito" o un triple toque de "error". Durante mucho tiempo, la plataforma web en iOS Safari no tenía equivalente — navigator.vibrate() simplemente se ignoraba en iPhones. La biblioteca ios-haptics aprovecha un efecto secundario del elemento <input type="checkbox" switch> (introducido en Safari 17.4): alternar ese switch activa el motor háptico del sistema, permitiendo que las páginas web reproduzcan patrones hápticos cortos desde JavaScript.

Descripción de la herramienta

El Probador de Haptics de iOS te permite activar patrones de retroalimentación háptica directamente desde tu navegador para verificar si tu dispositivo y versión del sistema operativo los soportan. Expone los tres patrones proporcionados por la biblioteca ios-haptics — un toque único, una "confirmación" (dos toques rápidos) y un "error" (tres toques rápidos) — e incluye también un botón que llama a la API estándar navigator.vibrate() como alternativa para Android y otros dispositivos.

Ejemplos

Acción Sensación esperada en iPhone (iOS 17.4–26.4) Sensación esperada en Android
Haptic único Un toque corto y nítido Una vibración corta (~200 ms)
Confirmación (dos haptics rápidos) Dos toques rápidos en sucesión Dos vibraciones cortas
Error (tres haptics rápidos) Tres toques rápidos en sucesión Tres vibraciones cortas
Probar navigator.vibrate() Nada en la mayoría de versiones de iOS Una vibración de ~200 ms

Características

  • Botones de un toque para patrones hápticos únicos, de confirmación y de error
  • Detección automática del soporte háptico en el dispositivo actual
  • Prueba de alternativa integrada para la Web API estándar navigator.vibrate()
  • Registro de eventos en vivo con marcas de tiempo para cada patrón activado
  • Banners de estado claros que explican la compatibilidad de versiones de iOS

Casos de uso

  • Desarrolladores web que verifican que la retroalimentación háptica funciona en un iPhone real antes de integrar ios-haptics en su propio sitio o PWA
  • Ingenieros de QA que comprueban cómo se sienten los mismos patrones en diferentes dispositivos, versiones del sistema operativo y navegadores
  • Usuarios curiosos que desean experimentar la diferencia entre la retroalimentación "Taptic" de estilo iOS y el pulso más largo de navigator.vibrate() de Android

Cómo funciona

En iOS Safari, la herramienta crea dinámicamente un <input type="checkbox" switch> oculto, lo alterna y luego lo elimina del DOM. El acto de alternar ese switch nativo es lo que activa el Taptic Engine — no hay una Web API pública que haga esto directamente. Los patrones de "confirmación" y "error" simplemente repiten la alternancia dos o tres veces en rápida sucesión.

En dispositivos que no soportan el truco del switch de iOS, la biblioteca recurre a navigator.vibrate(), que es ampliamente soportado en navegadores Android. El botón "Probar navigator.vibrate()" en esta herramienta llama a esa API directamente para que puedas comparar los dos mecanismos.

Opciones explicadas

  • Haptic único — Reproduce un toque corto. Se usa mejor para confirmar una pequeña interacción como un toggle o un campo de formulario exitoso.
  • Confirmación (dos haptics rápidos) — Reproduce dos toques rápidos. Ideal para "guardado", "enviado" u otras confirmaciones positivas.
  • Error (tres haptics rápidos) — Reproduce tres toques rápidos. Úsalo para señalar errores de validación o fallos destructivos.
  • Probar navigator.vibrate() — Llama a la Web Vibration API con una duración de 200 ms. Útil para confirmar el soporte de dispositivos que no son iOS y para comparar la sensación con los patrones de iOS.
  • Limpiar registro — Elimina todas las entradas del registro de eventos.

Limitaciones

  • Los haptics programáticos de iOS solo funcionan en iOS 17.4 a 26.4. Apple parcheó el comportamiento subyacente en iOS 26.5, por lo que llamar a estos patrones desde JavaScript ya no activa el Taptic Engine en las versiones más recientes de iOS. La interacción directa del usuario con un <input type="checkbox" switch> real sigue funcionando.
  • iOS Safari ignora navigator.vibrate() en prácticamente todas las versiones, por lo que el botón de alternativa aparecerá silencioso en iPhones.
  • Los navegadores de escritorio no pueden producir retroalimentación háptica; los botones se ejecutarán pero no sentirás nada.
  • Algunos navegadores Android requieren que la página esté en primer plano y un gesto del usuario antes de que navigator.vibrate() se active.
  • La retroalimentación háptica también puede estar deshabilitada en la configuración del sistema del dispositivo (p. ej. Configuración → Sonidos y Haptics → Haptics del Sistema en iOS).

Consejos

  • Prueba en un dispositivo real, no en un simulador o emulador — los dispositivos virtuales no tienen un Taptic Engine.
  • Si nada sucede en iPhone, verifica que los Haptics del Sistema estén habilitados en Configuración y que el Modo Silencioso no los esté suprimiendo en versiones antiguas de iOS.
  • Usa el patrón de Confirmación con moderación; el uso excesivo de haptics rápidos se vuelve molesto rápidamente.
  • Combina haptics con retroalimentación visual — un haptic solo rara vez es suficiente para comunicar el estado al usuario.

Preguntas frecuentes

¿Por qué no siento nada en mi iPhone? Probablemente estés en iOS 26.5 o más nuevo, donde Apple parcheó la técnica utilizada por esta biblioteca. Intenta con un dispositivo que ejecute iOS 17.4–26.4, o verifica que los Haptics del Sistema estén habilitados en Configuración.

¿Por qué navigator.vibrate() no funciona en iPhone? Apple nunca ha implementado la Web Vibration API en iOS Safari. Actualmente no hay una forma basada en estándares para activar la vibración en iOS desde una página web.

¿Es seguro usar esto en producción? La biblioteca es pequeña y sin efectos secundarios, pero como se basa en una peculiaridad de un elemento HTML específico, puede romperse en cualquier actualización futura de iOS — como ya sucedió en iOS 26.5. Siempre trata la retroalimentación háptica como una mejora progresiva, nunca como un requisito.

¿Funciona dentro de una PWA o aplicación "Agregar a la pantalla de inicio"? Sí, en versiones de iOS soportadas, la misma técnica funciona en aplicaciones web instaladas tal como lo hace en Safari.