Mikä on haptinen palaute?

Haptinen palaute on taktiili-ilmoitus — pieni värinä tai napahdus — jonka laite tuottaa toiminnon vahvistamiseksi tai huomion herättämiseksi. Älypuhelimissa sen tuottaa pieni moottori (iPhoneissa Applen "Taptic Engine"), joka luo lyhyitä, tarkasti ajoitettuja pulsseja. Toisin kuin pitkä suhinaava värinä, nykyaikaiset haptiset palauteet ovat terävät ja hienovaraiset, suunnitellut tuntemaan fyysiseltä napsautukselta eikä hälytysääneltä.

Natiiveissa iOS-sovelluksissa kehittäjät käyttävät UIFeedbackGenerator API:a eri haptisten kuvioiden toistamiseen, kuten kevyt napahdus, "onnistumisen" kaksoisnapahdus tai "virhe"-kolmoisnapahdus. Pitkään iOS:n web-alusta Safari-selaimessa ei ollut vastaavaa — navigator.vibrate() yksinkertaisesti jätettiin huomiotta iPhoneissa. ios-haptics-kirjasto hyödyntää <input type="checkbox" switch> -elementin sivuvaikutusta (esitelty Safari 17.4:ssä): kytkimen vaihtaminen laukaisee järjestelmän haptisen moottorin, mikä mahdollistaa web-sivuille lyhyiden haptisten kuvioiden toistamisen JavaScriptistä.

Työkalun kuvaus

iOS Haptics Tester -työkalu antaa sinulle mahdollisuuden laukaista haptisia palautekuvioita suoraan selaimestasi ja varmistaa, tukeeko laitteesi ja käyttöjärjestelmäsi versiosi niitä. Se tarjoaa kolme ios-haptics-kirjaston tarjoamaa kuviota — yhden napahduksen, "vahvistuksen" (kaksi nopeaa napahdusta) ja "virheen" (kolme nopeaa napahdusta) — ja sisältää myös painikkeen, joka kutsuu vakio-navigator.vibrate() API:a varasuunnitelmaksi Android-laitteille ja muille laitteille.

Esimerkit

Toiminto Odotettu tunne iPhonella (iOS 17.4–26.4) Odotettu tunne Androidilla
Yksittäinen haptinen palaute Yksi lyhyt, terävä napahdus Yksi lyhyt värinä (~200 ms)
Vahvistus (kaksi napahdusta) Kaksi nopeaa napahdusta peräkkäin Kaksi lyhyttä värinää
Virhe (kolme napahdusta) Kolme nopeaa napahdusta peräkkäin Kolme lyhyttä värinää
Testaa navigator.vibrate() Ei mitään useimmissa iOS-versioissa Yksi ~200 ms värinä

Ominaisuudet

  • Yksittäisen napahduksen painikkeet vahvistus- ja virhe-haptisille kuvioille
  • Automaattinen haptisen tuen tunnistaminen nykyisellä laitteella
  • Sisäänrakennettu varasuunnitelma vakio-navigator.vibrate() Web API:lle
  • Reaaliaikainen tapahtumaloki, jossa on aikaleima jokaiselle laukaistalle kuviolle
  • Selkeät tilabannerit, jotka selittävät iOS-version yhteensopivuuden

Käyttötapaukset

  • Web-kehittäjät, jotka varmistavat, että haptinen palaute toimii oikealla iPhonella ennen ios-haptics-integraatiota omille sivuilleen tai PWA:lle
  • QA-insinöörit, jotka tarkistavat, miltä samat kuviot tuntuvat eri laitteilla, käyttöjärjestelmäversioilla ja selaimissa
  • Uteliaat käyttäjät, jotka haluavat kokea eron iOS-tyylisen "Taptic"-palautteen ja pidemmän Android-navigator.vibrate()-pulssin välillä

Kuinka se toimii

iOS Safarissa työkalu dynaamisesti luo piilotetun <input type="checkbox" switch> -elementin, vaihtaa sen tilaa ja poistaa sen DOM:sta. Natiivin kytkimen tilan vaihtaminen on se, mikä laukaisee Taptic Enginen — ei ole olemassa julkista Web API:a, joka tekee tätä suoraan. "Vahvistus"- ja "virhe"-kuviot yksinkertaisesti toistavat kytkimen vaihtamisen kaksi tai kolme kertaa nopeassa peräkkäisyydessä.

Laitteissa, jotka eivät tue iOS-kytkimen temppua, kirjasto palaa navigator.vibrate()-funktioon, jota tuetaan laajasti Android-selaimissa. Tämän työkalun "Testaa navigator.vibrate()"-painike kutsuu tätä API:a suoraan, jotta voit vertailla kahta mekanismia.

Vaihtoehdot selitettynä

  • Yksittäinen haptinen palaute — Toistaa yhden lyhyen napahduksen. Parhaiten käytettävissä pienen vuorovaikutuksen, kuten kytkimen tai onnistuneen lomakekentän, vahvistamiseen.
  • Vahvistus (kaksi nopeaa napahdusta) — Toistaa kaksi nopeaa napahdusta. Ihanteellinen "tallennettu", "lähetetty" tai muille positiivisille vahvistuksille.
  • Virhe (kolme nopeaa napahdusta) — Toistaa kolme nopeaa napahdusta. Käytä validointivirheiden tai tuhoavien virheiden signaloimiseen.
  • Testaa navigator.vibrate() — Kutsuu Web Vibration API:a 200 ms kestolla. Hyödyllinen ei-iOS-laitteiden tuen vahvistamiseen ja tunteen vertailuun iOS-kuvioita vastaan.
  • Tyhjennä loki — Poistaa kaikki merkinnät tapahtumalogista.

Rajoitukset

  • Ohjelmallinen iOS-haptinen palaute toimii vain iOS 17.4–26.4. Apple korjasi taustalla olevan käyttäytymisen iOS 26.5:ssä, joten näiden kuvioiden kutsuminen JavaScriptistä ei enää laukaise Taptic Enginea uusimmissa iOS-versioissa. Suora käyttäjän vuorovaikutus oikean <input type="checkbox" switch> -elementin kanssa toimii edelleen.
  • iOS Safari jättää navigator.vibrate() huomiotta lähes kaikissa versioissa, joten varasuunnittelupainike näyttää hiljaiselta iPhoneissa.
  • Pöytäkoneen selaimet eivät voi tuottaa haptista palautetta; painikkeet toimivat, mutta et tunne mitään.
  • Jotkut Android-selaimet vaativat, että sivu on etualalla ja käyttäjän ele ennen kuin navigator.vibrate() laukeaa.
  • Haptinen palaute voidaan myös poistaa käytöstä laitteen järjestelmäasetuksissa (esim. Asetukset → Äänet ja haptiikka → Järjestelmän haptiikka iOS:ssä).

Vinkkejä

  • Testaa oikealla laitteella, ei simulaattorissa tai emulaattorissa — virtuaalisilla laitteilla ei ole Taptic Enginea.
  • Jos iPhonella ei tapahdu mitään, tarkista, että Järjestelmän haptiikka on käytössä Asetuksissa ja että Hiljaisuustila ei estä sitä vanhemmissa iOS-versioissa.
  • Käytä Vahvistus-kuviota säästäväisesti; nopeiden haptisten palauteiden liiallinen käyttö muuttuu nopeasti ärsyttäväksi.
  • Yhdistä haptiikka visuaaliseen palautteeseen — pelkkä haptiikka on harvoin riittävä käyttäjälle tilan välittämiseen.

Usein kysytyt kysymykset

Miksi en tunne mitään iPhonellani? Olet todennäköisesti iOS 26.5:ssä tai uudemmassa, jossa Apple korjasi tämän kirjaston käyttämän tekniikan. Kokeile laitetta, jossa on iOS 17.4–26.4, tai tarkista, että Järjestelmän haptiikka on käytössä Asetuksissa.

Miksi navigator.vibrate() ei toimi iPhonella? Apple ei ole koskaan toteuttanut Web Vibration API:a iOS Safarissa. Tällä hetkellä ei ole standardoitua tapaa laukaista värinää iOS:ssä web-sivulta.

Onko tämä turvallista käyttää tuotannossa? Kirjasto on pieni ja sivuvaikutukseton, mutta koska se perustuu yhden tietyn HTML-elementin omituisuuteen, se voi rikkoutua missä tahansa tulevassa iOS-päivityksessä — kuten se jo teki iOS 26.5:ssä. Käsittele haptinen palaute aina progressiivisena parantamisena, ei koskaan vaatimuksena.

Toimiiko se PWA:ssa tai "Lisää kotinäyttöön" -sovelluksessa? Kyllä, tuetuissa iOS-versioissa sama tekniikka toimii asennetuissa web-sovelluksissa aivan kuten Safarissa.