iOS Haptics Tester

Vad är haptisk återkoppling?

Haptisk återkoppling är en taktil respons — en liten vibration eller knackning — som en enhet producerar för att bekräfta en åtgärd eller få uppmärksamhet. På smartphones genereras den av en liten motor (på iPhones, Apples "Taptic Engine") som skapar korta, exakt tidsstyrda pulser. Till skillnad från en lång surande vibration är moderna haptik skarp och subtil, utformad för att kännas som ett fysiskt klick snarare än ett larm.

I inbyggda iOS-appar använder utvecklare UIFeedbackGenerator API för att spela olika haptiska mönster såsom ett lätt tryck, en "framgångs"-dubbelknackning eller ett "fel"-trippelknackning. Under lång tid hade webplattformen på iOS Safari ingen motsvarighet — navigator.vibrate() ignorerades helt enkelt på iPhones. Biblioteket ios-haptics utnyttjar en bieffekt av elementet <input type="checkbox" switch> (introducerat i Safari 17.4): att växla denna switch utlöser systemets haptiska motor, vilket gör det möjligt för webbsidor att spela korta haptiska mönster från JavaScript.

Verktygsbeskrivning

iOS Haptics Tester låter dig utlösa haptiska återkopplingmönster direkt från din webbläsare för att verifiera om din enhet och OS-version stöder dem. Den exponerar de tre mönstren som tillhandahålls av biblioteket ios-haptics — ett enda tryck, en "bekräftelse" (två snabba tryck) och ett "fel" (tre snabba tryck) — och innehåller också en knapp som anropar standard-API:n navigator.vibrate() som reserv för Android och andra enheter.

Exempel

Funktioner

• Enkla knappar för enskilda, bekräftelse- och felmönster för haptik
• Automatisk detektering av haptikstöd på den aktuella enheten
• Inbyggd reserv för standard-API:n navigator.vibrate() Web
• Live-händelselogg med tidsstämplar för varje utlöst mönster
• Tydliga statusbanderoller som förklarar iOS-versionskompatibilitet

Användningsfall

• Webbutvecklare som verifierar att haptisk återkoppling fungerar på en riktig iPhone innan de integrerar ios-haptics i sin egen webbplats eller PWA
• QA-ingenjörer som kontrollerar hur samma mönster känns på olika enheter, OS-versioner och webbläsare
• Nyfikna användare som vill uppleva skillnaden mellan iOS-stil "Taptic"-återkoppling och den längre Android navigator.vibrate()-pulsen

Hur det fungerar

På iOS Safari skapar verktyget dynamiskt en dold <input type="checkbox" switch>, växlar den och tar sedan bort den från DOM. Det är själva växlingen av denna inbyggda switch som utlöser Taptic Engine — det finns inget offentligt Web API som gör detta direkt. Mönstren "bekräftelse" och "fel" upprepar helt enkelt växlingen två eller tre gånger i snabb följd.

På enheter som inte stöder iOS switch-tricket faller biblioteket tillbaka till navigator.vibrate(), som är allmänt stödd på Android-webbläsare. Knappen "Testa navigator.vibrate()" i detta verktyg anropar det API:n direkt så att du kan jämföra de två mekanismerna.

Alternativ förklarade

• Enskild haptik — Spelar ett kort tryck. Bäst använt för att bekräfta en liten interaktion såsom en växel eller ett framgångsrikt formulärfält.
• Bekräftelse (två snabba tryck) — Spelar två snabba tryck. Idealisk för "sparad", "skickad" eller andra positiva bekräftelser.
• Fel (tre snabba tryck) — Spelar tre snabba tryck. Använd för att signalera valideringsfel eller destruktiva fel.
• Testa navigator.vibrate() — Anropar Web Vibration API med en varaktighet på 200 ms. Användbar för att bekräfta stöd för enheter utan iOS och för att jämföra känslan mot iOS-mönstren.
• Rensa logg — Tar bort alla poster från händelsebloggen.

Begränsningar

• Programmatisk iOS-haptik fungerar bara på iOS 17.4 till 26.4. Apple patchar det underliggande beteendet i iOS 26.5, så att anropa dessa mönster från JavaScript utlöser inte längre Taptic Engine på de senaste iOS-versionerna. Direkt användarinteraktion med en riktig <input type="checkbox" switch> fungerar fortfarande.
• iOS Safari ignorerar navigator.vibrate() på praktiskt taget alla versioner, så reservknappen kommer att verka tyst på iPhones.
• Skrivbordswebbläsare kan inte producera haptisk återkoppling; knapparna körs men du kommer inte att känna något.
• Vissa Android-webbläsare kräver att sidan är i förgrunden och en användargest innan navigator.vibrate() utlöses.
• Haptisk återkoppling kan också vara inaktiverad i enhetens systeminställningar (t.ex. Inställningar → Ljud och haptik → Systemhaptik på iOS).

Tips

• Testa på en riktig enhet, inte en simulator eller emulator — virtuella enheter har ingen Taptic Engine.
• Om ingenting händer på iPhone, kontrollera att Systemhaptik är aktiverad i Inställningar och att Tyst läge inte undertrycker dem på äldre iOS-versioner.
• Använd bekräftelsemönstret sparsamt; överanvändning av snabb haptik blir snabbt irriterande.
• Kombinera haptik med visuell återkoppling — en haptik ensam räcker sällan för att kommunicera tillstånd till användaren.

Vanliga frågor

Varför känner jag ingenting på min iPhone? Du är förmodligen på iOS 26.5 eller senare, där Apple patchar tekniken som används av detta bibliotek. Prova en enhet som kör iOS 17.4–26.4, eller kontrollera att Systemhaptik är aktiverad i Inställningar.

Varför fungerar inte navigator.vibrate() på iPhone? Apple har aldrig implementerat Web Vibration API i iOS Safari. Det finns för närvarande inget standardbaserat sätt att utlösa vibration på iOS från en webbsida.

Är det säkert att använda i produktion? Biblioteket är litet och bieffektfritt, men eftersom det förlitar sig på en egenhet hos ett specifikt HTML-element kan det brytas i någon framtida iOS-uppdatering — som det redan gjorde i iOS 26.5. Behandla alltid haptisk återkoppling som en progressiv förbättring, aldrig ett krav.

Fungerar det inuti en PWA eller "Lägg till på hemskärmen"-app? Ja, på stödda iOS-versioner fungerar samma teknik i installerade webbappar precis som i Safari.