00:00:00我刚刚发现了一个非常酷的软件包，它能为你的网站添加一个虽小但很棒的细节
00:00:04——直到现在我才知道自己竟然一直想要这个功能。
00:00:07WebHaptics 的功能正如其名，它能让你的网站利用
00:00:11触感反馈（haptic feedback），无论是在安卓还是 iOS 上，它都能让网站感觉更像
00:00:15原生应用。而且它的实现方式非常简洁明了，实际上
00:00:20只需要一个函数。
00:00:21看来不只是我觉得这东西很酷，它已经在 Twitter 上火遍了，
00:00:24而且据我所知，Polymarket 已经使用了这个包。
00:00:29那么，让我们直接深入了解一下这些热议背后的东西，并聊聊
00:00:33它的工作原理，因为这个包其实用了一个非常巧妙的技巧来实现在 iOS 上的运行。
00:00:43显然，我很难在视频里向你准确展示这个包的效果，因为它
00:00:46是手机的物理振动；就像你在 YouTube 应用中
00:00:50点击“订阅”按钮时的那种感觉。如果你已经订阅了但也想测试一下，
00:00:54WebHaptics 的官方网站是一个非常有趣的测试地点。在你看完
00:00:59这个视频后，我强烈建议去看看，它展示了一些常见的触感反馈，
00:01:02比如“成功”、“错误”，当然还有点击按钮时的反馈。
00:01:06它还有一个超级酷的编辑器来构建你自己的触感模式，我们稍后
00:01:10会再讲到。
00:01:11现在，让我们开始写代码。如你所见，它是一个非常简单的 npm 包，
00:01:15它甚至还提供了 React、Vue 和 Svelte 的辅助函数，但如果你愿意，
00:01:19依然可以使用原生 JavaScript 版本。这个 trigger 函数在所有框架中
00:01:23都是一样的。
00:01:24在我的案例中，我会使用 React。你可以看到代码非常简单，
00:01:28我们要做的就是使用 useWebHaptics 这个 Hook，从中我们可以得到一个 trigger 函数，
00:01:32然后将其绑定到像按钮之类的组件上，来触发触感反馈。
00:01:36你也可以看到，这个 Hook 还提供了一个 cancel 函数，用于取消任何
00:01:39正在运行的触感反馈；还有一个 isSupported 布尔值，方便你检查
00:01:44浏览器是否支持触感反馈。
00:01:45通过这段简单的代码，意味着当我点击安卓或
00:01:48iOS 设备上的这个按钮时，它会产生轻微的振动。但由于我目前正在用笔记本电脑，
00:01:53所以它不会产生任何效果。
00:01:54不过，在开发过程中，有一种小方法可以让我们知道它是否在工作，
00:01:57那就是在 Hook 中将 debug 设置为 true。这意味
00:02:00当我点击按钮时，它会播放一段模拟触感反馈的
00:02:04声音。
00:02:05说到实际自定义振动模式，操作也非常简单，
00:02:09我们可以在 trigger 函数中完成。
00:02:10第一种方法是使用该包内置的一些预设模式，
00:02:14你可以导入 defaultPatterns，在这里你会发现 buzz（嗡嗡）、error（错误）、heavy（重度）等
00:02:18很多预设。你也可以在官网上
00:02:21体验这些预设的效果。
00:02:22第二种方法是当你想要完全自定义的振动模式时，
00:02:25你只需向 trigger 函数提供一个数组，并在其中定义你的振动细节。
00:02:29目前在这个模式中我有四次振动。你可以看到，
00:02:33你可以用一个对象来定义振动：delay（延迟）是距离上次振动
00:02:37的毫秒数；duration（持续时间）是以毫秒计的振动时长；
00:02:41还有 intensity（强度）值，其中 1 代表最强振动。
00:02:46使用我这里的这个模式，当你点击按钮时，你可以听到它的声音效果，
00:02:49但请想象一下，那实际上是用户手机上的振动。
00:02:53创建自定义振动模式的一个好技巧是利用那个网站，
00:02:57因为他们有一个非常棒的编辑器，你可以点击向数组添加新的振动，
00:03:02通过拖动来改变持续时间，上下拖动来改变强度，
00:03:06还可以点击播放来试听效果。你也可以在手机上使用它，
00:03:09这样你就能实际感受它的触感。
00:03:11正如我所说，在视频里展示这个有点难，但希望你已经
00:03:14理解了。这是一个非常简单的包，但我现在想展示的是
00:03:19它的工作原理，因为 iOS 并没有让这件事变得容易。
00:03:21首先要知道的是，原本应该有一个 API 可以通过简单的
00:03:24navigator.vibrate 来调用手机的振动功能。
00:03:27问题是，这在安卓上运行良好，但 iOS 完全不支持它。
00:03:32幸好，还有另一种方法可以在 iOS 上获得触感反馈，
00:03:36那就是使用类型为 switch（开关）的 input 元素，当用户在 iOS 上点击它时，会产生触感反馈。
00:03:41这个库为了利用这一点，当我们要触发触感反馈时，
00:03:44它本质上是为我们点击了一个“隐形开关”，来模拟我们的振动模式。
00:03:49我们可以通过下面这个复选框看到：当我触发触感反馈时，它会多次
00:03:53开启和关闭，因为在 iOS 上这就是开关的操作感。
00:03:56如果你想在调试应用程序时亲自看到这个开关，
00:03:59你只需在 Hook 的设置中添加 showSwitch 并将其设为 true。
00:04:03如果我们快速看一下这个包本身的源码，你就能明白它的逻辑。
00:04:06如果支持 Web Haptics，那么它会直接使用 navigator.vibrate 函数
00:04:11来播放振动模式。然而，如果不受支持（如下方所示），它会去点击
00:04:15那个开关。我们还有这个函数，它负责实际创建
00:04:19振动模式，也就是像我们在下面看到的那样，多次点击那个开关。
00:04:23我觉得这是一个非常巧妙的变通方案，值得展示。我希望苹果不要
00:04:27想办法封杀这个漏洞，或者至少即使他们封杀了，也请加上
00:04:31对 vibrate 函数的支持。
00:04:32这个包的内容大概就是这些。请在下方评论区告诉我，
00:04:35你是否会使用它。在评论的同时记得订阅，一如既往，
00:04:38我们下期再见。
00:04:41[音乐]