你的网站现在会振动了... (Web Haptics)

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
Computing/SoftwareCell PhonesInternet Technology

Transcript

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[音乐]

Key Takeaway

WebHaptics 通过巧妙的底层技术手段，让开发者能够仅用几行代码就在移动端网页上实现媲美原生应用的触感反馈体验。

Highlights

  • WebHaptics 是一个能为网页添加原生应用级触感反馈（振动）的轻量级软件包

  • 该工具已在 Twitter 走红，并被 Polymarket 等知名项目采用

  • 支持 React、Vue、Svelte 等主流框架，同时也提供原生 JavaScript 版本

  • 针对 iOS 不支持标准 vibrate API 的问题，采用了模拟点击“隐形开关”的巧妙变通方案

  • 提供官方在线编辑器，允许开发者通过拖拽可视化地自定义振动频率、持续时间和强度

  • 内置调试模式（Debug Mode），可在非移动端设备上通过声音模拟振动反馈

Timeline

WebHaptics 简介与初印象

视频开篇介绍了一个令人兴奋的软件包 WebHaptics，它能显著提升网页的用户体验细节。演讲者指出，该工具能让网站在安卓和 iOS 设备上产生触感反馈，使其操作手感更接近原生应用。目前该包在社交媒体上热度极高，甚至 Polymarket 等应用已经开始将其投入实战。实现这一功能非常简单，核心逻辑通常只需要调用一个函数即可完成。这一阶段重点强调了该工具的易用性以及它在提升移动端网页质感方面的独特价值。

功能演示与官方测试工具

由于视频无法直接展示物理振动，演讲者建议观众通过 YouTube 订阅按钮的触感来联想其效果。他强烈推荐访问 WebHaptics 官网，那里提供了针对“成功”、“错误”和“按钮点击”等常见场景的交互演示。官网还配备了一个功能强大的编辑器，允许用户实时构建和调整自己的触感模式。这种直观的测试环境能帮助开发者在编写代码前，先在真实手机上感受不同振动组合的差异。通过这些示例，用户可以更清晰地理解触感反馈如何增强交互的确定性。

代码实现与开发技巧

在代码实践环节，演讲者以 React 为例展示了如何使用 useWebHaptics 这个 Hook。开发者可以轻松获取 trigger 函数来触发反馈，或使用 cancel 函数停止正在运行的振动。为了增强兼容性处理，Hook 还导出了 isSupported 布尔值来检查浏览器支持情况。由于在笔记本电脑上开发时无法感受到振动，开启 debug 模式后系统会播放一段模拟声音。这一设计巧妙地解决了跨平台开发时的反馈感知问题，让逻辑调试变得更加顺畅。

自定义模式与可视化编辑器

视频详细介绍了自定义振动模式的两种主要方法。首先是使用内置的默认预设，如嗡嗡声（buzz）或重度反馈（heavy），这能覆盖大部分常规需求。其次是传入自定义数组，通过定义延迟（delay）、持续时间（duration）和强度（intensity）来创造独特节奏。演讲者演示了如何利用官网编辑器进行拖拽式设计，用户可以上下拖动调整强度，左右拖动调整时长。这种可视化方式极大降低了调试参数的门槛，使得创造复杂的触感节奏变得轻而易举。

揭秘 iOS 的底层实现原理

最后一部分深入探讨了 WebHaptics 的核心技术亮点，即如何攻克 iOS 的限制。虽然安卓支持标准的 navigator.vibrate API，但苹果的 iOS 浏览器多年来一直未提供支持。WebHaptics 采用了一个极其巧妙的“漏洞”：利用 iOS 在用户点击 switch 类型 input 元素时产生的原生触感。该库在底层创建一个“隐形开关”，通过程序化地快速启闭该开关来模拟各种振动模式。这种变通方法展示了开发者在受限环境下的创造力，演讲者也表达了希望苹果未来能正式支持标准 API 的愿望。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video