Wat is haptische feedback?

Haptische feedback is een tactiele respons — een kleine vibratie of tik — die een apparaat produceert om een actie te bevestigen of aandacht te trekken. Op smartphones wordt dit gegenereerd door een kleine motor (op iPhones, Apples "Taptic Engine") die korte, nauwkeurig getimede pulsen creëert. In tegenstelling tot een lange zoemende vibratie zijn moderne haptics scherp en subtiel, ontworpen om aan te voelen als een fysieke klik in plaats van een alarm.

In native iOS-apps gebruiken ontwikkelaars de UIFeedbackGenerator API om verschillende haptische patronen af te spelen, zoals een lichte tik, een "succes" dubbele tik of een "fout" drievoudige tik. Lange tijd had het webplatform op iOS Safari geen equivalent — navigator.vibrate() werd eenvoudigweg genegeerd op iPhones. De ios-haptics bibliotheek maakt gebruik van een bijeffect van het <input type="checkbox" switch> element (geïntroduceerd in Safari 17.4): het schakelen van die switch triggert de systeem haptische engine, waardoor webpagina's korte haptische patronen kunnen afspelen vanuit JavaScript.

Hulpprogrammabeschrijving

De iOS Haptics Tester laat je haptische feedback patronen rechtstreeks vanuit je browser triggeren om te verifiëren of je apparaat en OS-versie deze ondersteunen. Het biedt de drie patronen van de ios-haptics bibliotheek — een enkele tik, een "bevestiging" (twee snelle tikken) en een "fout" (drie snelle tikken) — en bevat ook een knop die de standaard navigator.vibrate() API aanroept als fallback voor Android en andere apparaten.

Voorbeelden

Actie Verwacht gevoel op iPhone (iOS 17.4–26.4) Verwacht gevoel op Android
Enkele haptic Één korte, scherpe tik Één korte vibratie (~200 ms)
Bevestiging (twee snelle) Twee snelle tikken achter elkaar Twee korte vibraties
Fout (drie snelle haptics) Drie snelle tikken achter elkaar Drie korte vibraties
Test navigator.vibrate() Niets op de meeste iOS-versies Één ~200 ms vibratie

Functies

  • Eenmaals tappen knoppen voor enkele, bevestigings- en fout haptische patronen
  • Automatische detectie van haptische ondersteuning op het huidige apparaat
  • Ingebouwde fallback test voor de standaard navigator.vibrate() Web API
  • Live gebeurtenissenlogboek met tijdstempels voor elk geactiveerd patroon
  • Duidelijke statusbanners die iOS-versiecompatibiliteit uitleggen

Gebruiksscenario's

  • Webontwikkelaars die verifiëren dat haptische feedback werkt op een echte iPhone voordat ze ios-haptics in hun eigen site of PWA integreren
  • QA-engineers die controleren hoe dezelfde patronen aanvoelen op verschillende apparaten, OS-versies en browsers
  • Nieuwsgierige gebruikers die het verschil willen ervaren tussen iOS-stijl "Taptic" feedback en de langere Android navigator.vibrate() puls

Hoe het werkt

Op iOS Safari maakt het hulpprogramma dynamisch een verborgen <input type="checkbox" switch>, schakelt het, en verwijdert het vervolgens uit de DOM. Het schakelen van die native switch is wat de Taptic Engine triggert — er is geen openbare Web API die dit rechtstreeks doet. De "bevestigings-" en "fout"-patronen herhalen de schakelaar eenvoudig twee of drie keer in snelle opeenvolging.

Op apparaten die de iOS switch-truc niet ondersteunen, valt de bibliotheek terug op navigator.vibrate(), wat veel ondersteund wordt op Android-browsers. De knop "Test navigator.vibrate()" in dit hulpprogramma roept die API rechtstreeks aan zodat je de twee mechanismen kunt vergelijken.

Opties uitgelegd

  • Enkele haptic — Speelt één korte tik af. Beste gebruikt om een kleine interactie zoals een schakelaar of een succesvol formulierveld te bevestigen.
  • Bevestiging (twee snelle haptics) — Speelt twee snelle tikken af. Ideaal voor "opgeslagen", "verzonden" of andere positieve bevestigingen.
  • Fout (drie snelle haptics) — Speelt drie snelle tikken af. Gebruik om validatiefouten of destructieve fouten aan te geven.
  • Test navigator.vibrate() — Roept de Web Vibration API aan met een duur van 200 ms. Nuttig voor het bevestigen van ondersteuning voor niet-iOS apparaten en voor het vergelijken van het gevoel met de iOS-patronen.
  • Logboek wissen — Verwijdert alle vermeldingen uit het gebeurtenissenlogboek.

Beperkingen

  • Programmatische iOS haptics werken alleen op iOS 17.4 tot en met 26.4. Apple patched het onderliggende gedrag in iOS 26.5, dus het aanroepen van deze patronen vanuit JavaScript triggert de Taptic Engine niet meer op de nieuwste iOS-versies. Directe gebruikersinteractie met een echte <input type="checkbox" switch> werkt nog steeds.
  • iOS Safari negeert navigator.vibrate() op vrijwel alle versies, dus de fallback-knop zal stil lijken op iPhones.
  • Desktopbrowsers kunnen geen haptische feedback produceren; de knoppen zullen werken maar je voelt niets.
  • Sommige Android-browsers vereisen dat de pagina op de voorgrond staat en een gebruikersgebaar voordat navigator.vibrate() wordt geactiveerd.
  • Haptische feedback kan ook worden uitgeschakeld in de systeeminstellingen van het apparaat (bijv. Instellingen → Geluiden en Haptics → Systeemhaptics op iOS).

Tips

  • Test op een echt apparaat, niet op een simulator of emulator — virtuele apparaten hebben geen Taptic Engine.
  • Als er niets gebeurt op iPhone, controleer dat Systeemhaptics ingeschakeld zijn in Instellingen en dat de stille modus deze niet onderdrukt op oudere iOS-versies.
  • Gebruik het bevestigingspatroon spaarzaam; overmatig gebruik van snelle haptics wordt snel vervelend.
  • Combineer haptics met visuele feedback — een haptic alleen is zelden genoeg om de status aan de gebruiker mee te delen.

Veelgestelde vragen

Waarom voel ik niets op mijn iPhone? Je bent waarschijnlijk op iOS 26.5 of nieuwer, waar Apple de techniek die door deze bibliotheek wordt gebruikt, heeft gepatched. Probeer een apparaat met iOS 17.4–26.4, of controleer dat Systeemhaptics ingeschakeld zijn in Instellingen.

Waarom werkt navigator.vibrate() niet op iPhone? Apple heeft de Web Vibration API nooit geïmplementeerd in iOS Safari. Er is momenteel geen standaardmanier om vibratie op iOS vanuit een webpagina te triggeren.

Is dit veilig om in productie te gebruiken? De bibliotheek is klein en zonder bijeffecten, maar omdat deze afhankelijk is van een eigenaardige eigenschap van één specifiek HTML-element, kan het breken in elke toekomstige iOS-update — zoals het al deed in iOS 26.5. Behandel haptische feedback altijd als een progressieve verbetering, nooit als een vereiste.

Werkt het in een PWA of "Toevoegen aan startscherm" app? Ja, op ondersteunde iOS-versies werkt dezelfde techniek in geïnstalleerde web-apps net zoals in Safari.