00:00:00Ich bin gerade auf ein wirklich cooles Package gestoßen, das euren Websites ein kleines,
00:00:04aber geniales Detail hinzufügt, von dem ich gar nicht wusste, dass ich es will.
00:00:07WebHaptics hält genau das, was es verspricht, und ermöglicht es euren Websites,
00:00:11haptisches Feedback zu nutzen – egal ob auf Android oder iOS. Es sorgt dafür, dass
00:00:15sie sich wie eine native App anfühlen, und das auf eine sehr saubere und einfache Weise.
00:00:20Es ist im Grunde nur eine einzige Funktion.
00:00:21Und anscheinend bin ich nicht der Einzige, der das cool findet. Es trendet gerade
00:00:24überall auf Twitter und Polymarket hat dieses Package anscheinend schon implementiert.
00:00:29Tauchen wir also direkt ein und schauen uns an, was es mit dem Hype auf sich hat.
00:00:33Wir sprechen auch darüber, wie es funktioniert, denn das Package nutzt einen coolen Trick für iOS.
00:00:43Natürlich ist es schwer für mich, euch genau zu zeigen, was dieses Package macht,
00:00:46da es eine physische Vibration eures Telefons ist. Aber es ist genau die Art von Feedback,
00:00:50die man bekommt, wenn man in der YouTube-App auf "Abonnieren" klickt.
00:00:54Wenn ihr es selbst testen wollt, ist die WebHaptics-Website ein super Ort dafür.
00:00:59Nachdem ihr das Video gesehen habt, empfehle ich euch dringend, sie euch anzusehen.
00:01:02Dort sieht man Standard-Haptiken wie Erfolg, Fehler oder das Klicken eines Buttons.
00:01:06Es gibt auch einen coolen Editor, um eigene haptische Muster zu erstellen, auf den wir
00:01:10später noch zurückkommen werden.
00:01:11Aber fangen wir erst mal mit dem Coden an. Wie ihr seht, ist es ein simples npm-Package.
00:01:15Es gibt sogar Helfer für React, Vue und Svelte, aber ihr könnt natürlich auch
00:01:19die Vanilla-JavaScript-Variante nutzen. Die Trigger-Funktion ist bei allen gleich.
00:01:23In meinem Fall verwende ich React.
00:01:24Wie ihr seht, ist der Code unglaublich einfach. Alles, was wir tun müssen,
00:01:28ist den Hook "useWebHaptics" zu nutzen. Dadurch erhalten wir eine Trigger-Funktion,
00:01:32die wir dann mit etwas wie einem Button verknüpfen können, um Feedback auszulösen.
00:01:36Zusätzlich erhalten wir eine Cancel-Funktion, die laufendes Feedback abbricht,
00:01:39sowie einen "isSupported"-Boolean, um zu prüfen, ob der Browser haptisches Feedback
00:01:44überhaupt unterstützt.
00:01:45Mit diesem einfachen Code vibriert ein Android- oder iOS-Gerät kurz,
00:01:48wenn ich auf den Button klicke. Da ich gerade am Laptop bin, passiert hier natürlich nichts.
00:01:53Es gibt jedoch eine kleine Möglichkeit, wie wir das Ganze beim Entwickeln testen können:
00:01:54Wir setzen im Hook einfach "debug" auf "true".
00:01:57Das bewirkt, dass beim Klicken auf den Button ein Ton abgespielt wird,
00:02:00der das haptische Feedback simuliert.
00:02:04Wenn es darum geht, das Vibrationsmuster anzupassen, ist das ebenfalls extrem simpel.
00:02:05Das machen wir direkt in der Trigger-Funktion.
00:02:09Die erste Methode ist die Verwendung von Presets, die das Package bereits mitbringt.
00:02:10Ihr könnt "defaultPatterns" importieren und findet dort Voreinstellungen wie
00:02:14"buzz", "error", "heavy" und viele mehr. Ein Gefühl dafür bekommt ihr auf der Website.
00:02:18Die zweite Methode ist für komplett eigene Vibrationsmuster gedacht.
00:02:21Dazu übergebt ihr der Trigger-Funktion einfach ein Array mit euren Definitionen.
00:02:22Momentan habe ich vier Vibrationen in diesem Muster. Eine Vibration wird durch
00:02:25ein Objekt definiert, das ein "delay" (Verzögerung zur letzten Vibration in ms),
00:02:29eine "duration" (Dauer der Vibration in ms) sowie einen "intensity"-Wert besitzt,
00:02:33wobei 1 die stärkste Vibration darstellt.
00:02:37Bei dem Muster, das ich hier habe, könnt ihr hören, wie es klingen würde –
00:02:41aber stellt euch vor, es vibriert stattdessen auf dem Telefon des Nutzers.
00:02:46Ein guter Trick für eigene Muster ist die Website, da sie diesen tollen Editor hat.
00:02:49Hier könnt ihr klicken, um eine neue Vibration zum Array hinzuzufügen,
00:02:53die Dauer durch Ziehen ändern und die Intensität durch Rauf- oder Runterziehen anpassen.
00:02:57Mit "Play" könnt ihr es probehören. Wenn ihr es am Handy nutzt, spürt ihr es direkt.
00:03:02Wie gesagt, es ist im Video schwer zu demonstrieren, aber ihr versteht das Prinzip.
00:03:06Es ist ein simples Package, aber ich möchte euch zeigen, wie es funktioniert,
00:03:09da iOS es einem nicht gerade leicht gemacht hat.
00:03:11Zuerst einmal gibt es eigentlich eine API namens "navigator.vibrate",
00:03:14die die Vibrationsfunktion des Telefons ansprechen sollte.
00:03:19Das Problem: Auf Android funktioniert das super, aber iOS unterstützt das überhaupt nicht.
00:03:21Zum Glück gibt es einen anderen Weg für haptisches Feedback unter iOS:
00:03:24Man nutzt einen Input vom Typ "switch". Wenn der Nutzer diesen auf iOS anklickt,
00:03:27erzeugt das eine haptische Rückmeldung.
00:03:32Diese Library nutzt das aus. Wenn wir haptisches Feedback triggern,
00:03:36klickt sie im Grunde für uns auf einen unsichtbaren Schalter,
00:03:41der unser Vibrationsmuster imitiert. Wir sehen das hier unten an dieser Checkbox.
00:03:44Wenn ich den Trigger auslöse, schaltet sie sich mehrmals ein und aus –
00:03:49genau das wäre der Switch auf iOS.
00:03:53Wenn ihr diesen Schalter beim Debuggen selbst sehen wollt, müsst ihr im Hook
00:03:56nur die Einstellung "showSwitch" auf "true" setzen.
00:03:59Werfen wir einen kurzen Blick in den Code des Packages selbst.
00:04:03Wenn WebHaptics unterstützt werden, nutzt die "navigator.vibrate"-Funktion
00:04:06einfach das Vibrationsmuster. Falls nicht, wird hier unten der Switch geklickt.
00:04:11Diese Funktion hier ist dafür verantwortlich, das Muster zu erstellen,
00:04:15indem sie den Schalter mehrmals betätigt, wie wir hier unten sehen können.
00:04:19Ich fand das einen wirklich cleveren Workaround, den man mal zeigen sollte.
00:04:23Hoffentlich findet Apple keinen Weg, das zu unterbinden – oder falls doch,
00:04:27dass sie dann wenigstens die "vibrate"-Funktion unterstützen.
00:04:31Das ist im Grunde alles zu diesem Package. Schreibt mir gerne in die Kommentare,
00:04:32ob ihr so etwas verwenden würdet. Vergesst nicht zu abonnieren und wie immer:
00:04:35Wir sehen uns im nächsten Video!
00:04:38[Musik]
00:04:41[Musik]