你可能想知道的 HTML5 Web API

几天前，我在博客上发布了这篇文章，想与大家分享，征求一些反馈。希望大家能够学习 API，提升项目的用户体验，祝大家玩得开心！

我明天将在 BBL 期间介绍这个超级有趣的主题，所以我最好写下来以巩固我的发现。

我们将讨论 HTML5 在过去几年中引入的 Web API，这些 API 允许您仅用几行代码即可为您的应用程序增添新的用户体验，并且潜力巨大。对于每个 API，我将展示如何实现它、它的浏览器支持情况以及如何在具体项目中使用它们的想法。

页面可见性👀

通过捕获以下事件，您可以知道该页面当前是否对用户可见：

正如您所见，它实现起来很简单，并且有相当好的浏览器支持：

这使得它可以在大多数应用程序上投入生产。

这是我制作的一个小演示，展示了此 API 的一个用例：每当您离开当前选项卡时，视频就会暂停，并且图标会发生变化以反映这一点。

我确信您已经有了一千个关于如何实现此 API 的其他想法，但这是我的两点看法：

• 避免用户在 Tab 键退出时进行无用的操作
• 当收到新数据但尚未查看时，通过选项卡的标题通知用户（就像 Messenger 和 Whatsapp 已经做的那样）
• 当用户退出时暂停浏览器游戏

环境光💡

它公开了用户传感器感知到的当前照明水平的数据。

正如您所见，这些 API 的共同点在于易于实现。您只需捕捉事件并通过获取勒克斯devicelight数即可！e.value

值得注意的是，这种方式最终会被弃用，因为通用传感器API 正在开发中，它将包含大量传感器数据。

最终它会更像这样：实例化传感器，启动它，捕捉其状态变化，并在需要时停止它：

很遗憾，正如你在这里看到的，浏览器支持不太好

一旦通用传感器 API 正式获得推荐状态，这种情况可能不会持续很长时间。

以下是关于如何使用它的一些想法：

• 根据当前光照调整应用程序的对比度（强光可能会使某些对比度更难读取）
• 每当用户在夜间阅读时，就进入黑暗模式（尽管我认为你应该始终处于黑暗模式😛）

在线状态📡

很明显，它告诉我们用户当前是否连接到网络。它还允许我们捕获网络变化，如下所示：

而且它的支持非常好：

这是一个小演示，展示了如何使用它。

用例包括：

• 当用户未登录网络时通知用户
• 当用户长时间后重新上线时提取数据

振动📳

最后但同样重要的一点是，此 API 允许我们让用户的设备振动。

浏览器对此功能的支持还有待提高，但它的用例几乎都集中在移动设备上。正如你所见，大多数 Android 浏览器都支持此功能，而 iOS 的 Safari 则不支持。

这是另一个展示其使用情况的演示，请确保在兼容的浏览器上尝试它。

实施思路包括：

• 为表单输入添加触觉反馈，例如，当用户输入错误的电子邮件地址时，可以感觉到振动。
• 为移动浏览器游戏添加振动（如果有的话）

结论

还有许多其他 Web API 可以帮助您构建真正有趣且独特的用户体验。我推荐一个名为“ Web 今日所能做的”的网站，它列出了所有这些 API 的完整列表，请务必查看。

感谢阅读，

@christo_kade