5 JavaScript API授权您的移动网页

关键要点

• 电池状态 API: 提供设备电池电量或状态信息，有助于在电量低时更频繁地保存更改，防止数据丢失。
• Web 通知 API: 规范化开发者通知用户的方式，允许在网页上下文之外发出警报（例如电子邮件送达）。但不同浏览器的显示样式可能有所不同。
• 接近传感器 API: 检测物体与运行网页的设备之间的距离，目前仅 Firefox 支持。
• 振动 API: 允许设备振动，在游戏中可用于模拟特定效果。而设备方向 API则检测设备方向，有利于导航应用和游戏。

“移动市场正在增长”和“通过移动设备（智能手机和平板电脑等）访问网络的用户将超过通过台式机或笔记本电脑访问网络的用户”这类说法已经不再令人印象深刻。

如今，我们（至少应该）都意识到，在为网络开发任何内容时，移动市场都至关重要。

多年来，关于原生应用与 Web 应用的讨论和观点差异很大，究竟哪个更好一直存在争议。无论您的观点如何，原生移动应用程序过去能够访问网页无法访问的硬件组件，这都是事实。但这种差距今天仍然有效吗？Web 技术是否已经发展到足以让我们作为开发者仅使用 HTML、CSS 和 JavaScript 进行编码的程度？

在本文中，我将介绍一些 JavaScript API，它们允许您的网页访问移动设备的硬件组件，或增强您在移动设备上的 Web 应用程序的功能。

电池状态 API

电池状态 API 提供有关系统电池电量或状态的信息。借助此 API，您可以知道电池是否正在充电、电池完全放电前还有多长时间，或者只是其当前电量。这些详细信息可以通过属于 window.navigator.battery 对象的四个属性访问。此 API 还定义了当上述属性发生更改时可以触发的事件。

此 API 在以下情况下非常有用：例如，您（或您的用户）在公共汽车上努力使用 Web 应用程序处理文档，并且忘记保存所做的更改。突然，您的智能手机关机了，您会因为浪费了大量时间和所有工作而感到沮丧。借助此 API，我们可以开发能够检测当前电池电量并更频繁地保存更改的页面，以防止在电池电量低或不足时发生数据丢失。

在撰写本文时，电池状态 API 仅受 Firefox 支持，但检测对该 API 的支持非常容易，如下所示：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

使用此 API 的一个简单示例如下：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

如果您想尝试使用此 API，我们为您准备了一个演示。如果您想进一步研究，我们已在此处在 SitePoint 上介绍了电池状态 API。

Web 通知 API

在移动设备上，我们熟悉通知的概念，许多已安装在设备上的应用程序都实现了通知。在 Web 上，网站以不同的方式实现它们。想想 Google 和 Twitter，它们都有通知机制，但实现方式不同。

Web 通知 API 是为此目的而创建的 API，用于规范化开发者通知用户的方式。通知允许在网页上下文中之外提醒用户某个事件，例如电子邮件送达。虽然开发者创建通知的方式相同，但规范并未描述 UI 应该如何以及在何处显示它们。这意味着我们将在不同的浏览器上看到不同的样式。例如，在移动设备上，我们可能会在通知栏中看到它们。

Web 通知 API 通过 window 对象的 Notification 属性公开。它是一个构造函数，允许我们创建通知实例。要创建新的通知，我们可以编写如下代码：

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

目前，Chrome、Firefox 和 Safari 支持此 API。支持 Web 通知 API 的移动浏览器包括 Firefox、Android 4.4 和 Blackberry。您看到什么奇怪的地方了吗？Chrome 移动版不支持此 API！令人难过但却是事实。

由于支持此 API 的浏览器覆盖了超过一半的市场，但为了确保我们的 JavaScript 代码不会尝试调用不受支持的方法，我们必须测试支持情况。我们可以使用以下代码片段来做到这一点：

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

对这个 API 感到兴奋吗？太好了！您可以在文章“Web 通知 API 入门”中了解更多信息，还可以试用实时演示。

接近传感器 API

接近传感器 API 是一个 JavaScript API，我们可以使用它来检测物体与运行网页的设备之间的距离。距离由接近传感器测量（如果您的设备有接近传感器）。接近传感器 API 不提供属性或方法，只在 window 对象上触发两个事件。我们可以监听它们来执行操作。第一个事件 deviceproximity 提供有关设备与附近物体之间实际距离的信息，而第二个事件 userproximity 仅指定附近是否有物体。

唯一支持此 API 的浏览器是 Firefox（桌面版和移动版），从 15 版开始。不幸的是，由于许多笔记本电脑和台式机没有接近传感器，因此我们主要针对移动设备。

检测对该 API 的支持：

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

一个简单的使用示例如下所示：

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

如果您想了解有关接近传感器 API 的更多信息，我写了一篇文章，标题为“接近传感器 API 入门”。如果您想实际操作，可以使用此演示。

振动 API

振动 API 是一个非常简单的 API，它包含一个方法，使我们能够使设备振动。一个显而易见的使用是在游戏中，我们可以重现十年前一些游戏机引入的效果。然而，这并不是此 API 的唯一可能用途。

正如我提到的，振动 API 只公开了一种名为 vibrate() 的方法。后者属于 window.navigator 对象，在其最简单的形式下接受一个整数，该整数指定设备应振动的毫秒数。

除了 Internet Explorer 和 Safari 之外，所有主要浏览器都支持此 API。尽管如此，现在可能是将其用于下一个项目的好时机。事实上，如果它受支持，您将为用户提供更好的体验（除非您滥用此功能）。检测支持非常容易，如下所示：

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

API 的一个非常简单的用法如下：

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

要了解有关此 API 的更多信息，请阅读文章“如何使用 HTML5 振动 API”，并且不要忘记试用演示。

设备方向 API

我想讨论的最后一个 API 是设备方向 API。检测设备的方向对于各种情况都很有用，从导航应用程序到游戏。此 API 定义了几个事件，这些事件提供有关设备的物理方向和运动的信息。此 API 是 W3C 工作草案，这意味着规范不稳定，我们可能会预期将来会发生一些变化。

该 API 公开了以下三个事件：deviceorientation、devicemotion 和 compassneedscalibration。当加速度计检测到设备方向发生变化时，会触发第一个事件。每次设备加速或减速时，都会触发第二个事件。当用户代理确定指南针需要校准时，会触发最后一个事件。

几乎所有主要浏览器（除了 Safari）都支持此 API，但支持是部分的或存在不一致之处。例如，在撰写本文时，很少有浏览器支持 compassneedscalibration 事件。因此，我的建议是测试每个事件以了解它是否受支持。要测试 deviceorientation 事件的存在，您可以编写：

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

或者：

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

例如，如果您想测试 devicemotion 事件，您可以编写：

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

如果您想使用此 API，我们有一个您可以使用的演示。如果您想学习它，我们有文章“在 HTML5 中使用设备方向”。

结论

在本文中，我向您展示了一些可以增强移动访客网页的 API。

这些 API 的用例是无限的，这一切都取决于您的想象力和您正在开发的应用程序或网站的类型。我希望您喜欢这篇文章，请告诉我您认为可能还有哪些有用的 API。

关于移动网页 JavaScript API 的常见问题

什么是 JavaScript API，它们如何增强移动网页？

JavaScript API（应用程序编程接口）是一组规则和协议，允许不同的软件应用程序相互通信。它们通过使移动网页能够与设备硬件和其他软件应用程序交互来增强移动网页，从而增强其功能和用户体验。例如，JavaScript API 可以允许网页访问设备的摄像头、地理位置甚至电池状态。这为开发人员创造了更多互动性、参与性和用户友好的移动网页的可能性。

如何在我的移动网页中使用地理位置 API？

地理位置 API 是一个强大的工具，允许您访问设备的地理位置。要使用它，您首先需要检查用户的浏览器是否支持它。这可以使用 navigator.geolocation 属性来完成。如果它返回 true，那么您可以使用 getCurrentPosition() 方法来获取用户的当前位置。请记住，在访问用户的位置数据之前，始终要征得用户的许可。

什么是电池状态 API，如何使用它？

电池状态 API 提供有关主机设备电池状态的信息。这对于根据设备的电池电量优化网页的性能非常有用。例如，当电池电量低时，您可以降低更新频率或禁用某些功能以节省电量。要使用此 API，您可以使用 navigator.getBattery() 方法，该方法返回一个 promise，该 promise 解析为 BatteryManager 对象。

如何在我的移动网页中使用振动 API？

振动 API 允许您控制主机设备的振动机制。这对于向用户提供触觉反馈非常有用。要使用此 API，您可以使用 navigator.vibrate() 方法。您可以传递单个值以振动特定时间，或者传递一系列值以创建振动和暂停模式。

什么是环境光传感器 API，如何使用它？

环境光传感器 API 提供有关设备环境环境光照水平的信息。这对于调整网页的亮度或对比度以在不同的光照条件下提高可读性非常有用。要使用此 API，您需要创建一个新的 AmbientLightSensor 对象实例，然后使用 start() 方法开始感测光照水平。

如何在我的移动网页中使用网络信息 API？

网络信息 API 提供有关设备网络连接的信息。这对于根据网络状况优化网页的性能非常有用。例如，当网络连接缓慢时，您可以降低图像或视频的质量以确保平滑加载。要使用此 API，您可以使用 navigator.connection 属性，该属性返回 NetworkInformation 对象。

什么是设备方向 API，如何使用它？

设备方向 API 提供有关设备物理方向的信息。这对于创建对设备移动做出响应的交互式体验非常有用。要使用此 API，您可以为 deviceorientation 事件添加事件侦听器，该事件在设备方向发生变化时触发。

如何在我的移动网页中使用页面可见性 API？

页面可见性 API 允许您检测网页何时可见或隐藏。这对于根据页面的可见性暂停或恢复活动非常有用。例如，当用户切换到另一个选项卡时，您可以暂停视频，并在他们返回时恢复视频。要使用此 API，您可以使用 document.visibilityState 属性和 visibilitychange 事件。

什么是全屏 API，如何使用它？

全屏 API 允许您以全屏模式显示元素。这对于为视频或游戏等提供更沉浸式的体验非常有用。要使用此 API，您可以对任何元素使用 requestFullscreen() 方法以使其全屏显示。

如何在我的移动网页中使用 Web 通知 API？

Web 通知 API 允许您向用户显示通知。这对于提醒用户重要事件非常有用，即使您的网页没有焦点也是如此。要使用此 API，您首先需要使用 Notification.requestPermission() 方法请求用户的许可。如果用户授予许可，那么您可以创建一个新的 Notification 对象来显示通知。

以上是5 JavaScript API授权您的移动网页的详细内容。更多信息请关注PHP中文网其他相关文章！