5个增强移动网页功能的JavaScript API

像这样的陈述

“移动市场正在增长”

和

“通过移动设备（智能手机，平板电脑等）访问网络的人们将超过通过台式机或笔记本电脑访问网络的人们”

不要再打动了。

今天，我们都知道，至少应该如此，在为网络开发任何东西时，移动市场都非常重要。

多年以来，关于本机应用程序与Web应用程序的讨论和观点存在分歧，哪种观点最好。 无论您的意见如何，过去都是一个事实，即本机移动应用程序允许访问网页无法访问的硬件组件。 但是这个差距在今天仍然有效吗？ Web技术是否已改进到我们作为开发人员可以仅使用HTML，CSS和JavaScript进行编码的地步？

在本文中，我将介绍一些JavaScript API，这些API允许您的网页访问移动设备的硬件组件，或者可以为移动设备上的Web应用程序提供支持。

电池状态API

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

如果您（或您的用户）在使用Web应用程序来努力处理文档的总线上而忘记保存所做的更改，则该API很有用。 突然，您的智能手机关闭，您发疯了，因为您浪费了很多时间和所有工作。 借助此API，我们可以开发能够检测电池当前电量并更频繁地保存更改的页面，以防止在电量不足或严重不足时丢失数据。

在撰写本文时，Firefox仅支持Battery Status API，但是检测对此API的支持很容易，如下所示：

if (window.navigator && window.navigator.battery) {
   // API supported
} else {
   // Not supported
}

以下是使用此API的简单示例：

// Print if battery is charging or not
console.log("The battery is " + (navigator.battery.charging ? "" : "not") + " charging");

如果您想尝试使用此API， 我们为您准备了一个演示 。 如果您想进一步调查， 我们在SitePoint 涵盖了Battery Status API 。

网络通知API

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

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

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

var notification = new Notification('Email received', {
  body: 'You received an email. Read it. Now!'
});

目前，Chrome，Firefox和Safari支持该API。 支持Web Notifications API的移动浏览器是Firefox，Android 4.4+和Blackberry。 你看到奇怪的东西了吗？ Chrome移动版不支持API！ 悲伤但真实。

由于确实支持该API的浏览器，所以覆盖了一半以上的市场，但是由于我们要确保我们的JavaScript代码不会尝试调用不受支持的方法，因此我们必须测试是否支持。 我们可以使用以下代码段来做到这一点：

if ('Notification' in window) {
  // API supported
} else {
  // Not supported
}

对此API感到兴奋吗？ 大！ 您可以在文章“ Web Notifications API简介 ”中阅读有关它的更多信息， 并进行实时演示 。

邻近API

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

从版本15开始，唯一支持此API的浏览器是Firefox，无论是在台式机还是移动版上，都可在台式机和移动设备上使用。

要检测对此API的支持，请执行以下操作：

if ('ondeviceproximity' in window) {
   // API supported
} else {
   // Not supported
}

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

window.addEventListener('userproximity', function(event) {
   console.log( (event.near ? '' : 'no ') + 'object detected nearby');
});

如果您想了解有关Proximity API的更多信息，我写了一篇标题为“ Proximity API简介 ”的文章。 如果您想观看它的运行，可以使用此演示 。

震动API

振动API是一种非常简单的API，由一种使我们能够振动设备的方法组成。 一个明显的用途是在游戏中，我们可以重新创建十年前某些游戏机引入的效果。 但是，这不是此API的唯一可能用法。

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

除Internet Explorer和Safari外，所有主要浏览器均支持此API。 尽管如此，这可能是在下一个项目中使用它的正确时机。 实际上，如果支持，则可以为用户提供更好的体验（当然，除非您滥用此功能）。 检测支持非常容易，如下所示：

if (window.navigator && window.navigator.vibrate) {
   // API supported
} else {
   // Not supported
}

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

// Vibrate for three seconds
navigator.vibrate(3000);

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

设备方向API

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

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

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

if (window.DeviceOrientationEvent) {
   // Event supported
} else {
   // Not supported
}

或者：

if ('ondeviceorientation' in window) {
   // Event supported
} else {
   // Not supported
}

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

if (window.DeviceMotionEvent) {
   // Event supported
} else {
   // Not supported
}

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

结论

在本文中，我向您展示了一些API，这些API可以为移动访问者启用网页。

这些API的用例无穷无尽，全都取决于您的幻想以及正在开发的应用程序或网站的类型。 希望您喜欢本文，让我知道您认为可能有用的任何其他API。

From: https://www.sitepoint.com/5-javascript-apis-empower-mobile-web-pages/