00:00:00I just came across a really cool package that adds a small but awesome detail to your sites
00:00:04that I didn't even know I wanted until now.
00:00:07WebHaptics does exactly what it says on the tin and it allows your websites to utilise
00:00:11haptic feedback whether that's on Android or iOS and it just makes them feel more like
00:00:15a native app and it does so in a really clean and simple way, I mean it is literally just
00:00:20one function.
00:00:21And it turns out I'm not the only one that thinks this is really cool, it's been trending
00:00:24all over on Twitter and apparently Polymarket has already implemented this package.
00:00:29So lets just dive in and see what all of this buzz is about and also talk a bit about how
00:00:33it works as the package actually has a very cool trick to get it working on iOS.
00:00:43Now obviously it's quite hard for me to show you exactly what this package does as it is
00:00:46a physical vibration of your phone but it's the exact same kind that you get when you click
00:00:50subscribe in the YouTube app but if you are already subscribed and you still want to test
00:00:54this out the WebHaptics website is a super fun place to do so so after you've watched
00:00:59the video I highly recommend checking it out as it shows you some of the common haptics
00:01:02like success and error and obviously haptics when you click on a button.
00:01:06It also has a super cool editor to build out your own haptic patterns that we'll come back
00:01:10to in a bit.
00:01:11For now though lets get coding and as you can see it is a very simple npm package and it
00:01:15even has helpers for react, vue and svelte but obviously you can still use the vanilla
00:01:19javascript variant if you want and this trigger function is going to be the same across all
00:01:23of them.
00:01:24In my case I'll be using react and you can see the code is incredibly simple all we need
00:01:28to do is use the hook useWebHaptics and out of this we get a trigger function which we
00:01:32can then link up to something like a button to trigger some haptic feedback.
00:01:36You can also see out of this hook we get a cancel function which is going to cancel any
00:01:39running haptic feedback and also an issupported boolean so you can check if the browser supports
00:01:44haptic feedback.
00:01:45With this simple code then it will mean that when I click on this button on an android
00:01:48iOS device it will have a small vibration but obviously I'm on a laptop at the moment so
00:01:53it's not going to do anything.
00:01:54There is one small way that we can know this is working though while we're developing it
00:01:57and that is setting debug to true inside of the hook here and this just means that when
00:02:00I click on the button it's going to play a noise that simulates what the haptic feedback
00:02:04is.
00:02:05When it comes to actually customizing the vibration pattern that is also super simple and we can
00:02:09do that in the trigger function.
00:02:10The first method is by using some presets that the package actually comes with so you can
00:02:14import default patterns and on here you'll find some presets like buzz, error, heavy and
00:02:18loads more and you can actually get a feel for what these are like on the website as
00:02:21well.
00:02:22The second method though is when you want a completely custom vibration pattern all you
00:02:25need to do is provide an array to the trigger function and in here to find your vibrations.
00:02:29At the moment I have four vibrations in this pattern you can see you can define a vibration
00:02:33with an object where we have a delay which is going to be the delay from the last vibration
00:02:37in milliseconds then we have a duration in milliseconds for how long that vibration will
00:02:41last then also an intensity value where one is the strongest vibration.
00:02:46With this pattern I've got here when I click on the button you can hear what it will sound
00:02:49like but obviously imagine that will be vibrating on the user's phone.
00:02:53A good trick to actually creating custom vibration patterns is to use that website as they have
00:02:57a really nice editor here where you can click to add in a new vibration to the array you
00:03:02can drag to change its duration drag up and down to change its intensity and also click
00:03:06play here to hear what it sounds like but you can also use this on a phone so you can actually
00:03:09get a feel for what it feels like.
00:03:11As I said it's a little hard to show this one off in a video but hopefully you do get the
00:03:14idea it's a pretty simple package but what I do want to show you now is how this works
00:03:19as iOS did not make this easy.
00:03:21The first thing to know is there is actually an API that should expose the vibration function
00:03:24off your phone by simply doing navigator.vibrate.
00:03:27The trouble is though this works great on Android but iOS has absolutely zero support for it.
00:03:32Luckily though there is another way to get haptic feedback on iOS and that is to use an
00:03:36input that has the type of switch when the user clicks this on iOS it has haptic feedback.
00:03:41What this library does to take advantage of that is when we trigger our haptic feedback
00:03:44it essentially clicks an invisible switch for us that mimics our vibration pattern and we
00:03:49see that down here with this checkbox but when I trigger the haptic feedback it toggles on
00:03:53and off multiple times as that would be the switch on iOS.
00:03:56If you want to see this switch yourself while you're debugging your application all you need
00:03:59to do in the hook here is add in the settings show switch and toggle it to true.
00:04:03If we quickly take a look at the code of the package itself you can see what it's doing.
00:04:06If web haptics are supported so the navigator.vibrate function is simply going to use that to play
00:04:11our vibration pattern however if they're not supported down here it's going to be clicking
00:04:15on that switch and then we also have this function here which is responsible for actually creating
00:04:19the vibration pattern where it clicks on that switch multiple times as we can see down here.
00:04:23I just saw that was a really neat workaround that was worth showing and I hope Apple don't
00:04:27find a way to patch this or at least if they do patch it they add support for the vibrate
00:04:31function.
00:04:32That's pretty much all there is to this package so let me know in the comments down below if
00:04:35this is something that you would use while you're down there subscribe and as always see
00:04:38you in the next one.
00:04:41[Music]