10个不那么知名但很实用的Web API
API 是 Application Programming Interface 的缩写，它定义了软件架构层次之间的交互。借助 API，程序员可以在软件开发中轻松地执行复杂的任务。如果没有 API，那么程序员的生活会很悲惨，没有合适（例如安全）的数据访问，要了解不必要的底层细节，等等。
在 Web API 中，有非常有用的对象、属性和函数可用于执行小到访问 DOM 这样的小任务，大到处理音频、视频、图形这样的复杂任务。
一些著名的 Web API
如果你有 Web 开发背景，那么你已经在使用其中的许多工具了。下面是一些非常著名的 Web API。
- Canvas
- Fetch
- History
- Geolocation
- DOM
- Console
- Drag & Drop API
在本文中，我将介绍另外 10 个不那么流行的 Web API。不那么流行并不意味着它们没有用处。你可以在项目的各种用例中使用它们。让我们逐个看一下。
摘要
如果你想立即查看源代码或演示，请移步下面的链接：
源代码： https://github.com/atapas/demolab/tree/master/code/src/demos/web-apis 演示： https://demo.greenroots.info/categories/web-apis/
注意：Web API 只不过是使用原生 JavaScript 编写和公开的接口、函数、对象和属性。然而，Web API 的使用并不仅限于基于原生 JavaScript 的应用程序。在基于 Angular、React 或 Vue 开发的应用程序中使用它们也非常简单。
本文中演示 Web API 的所有示例都是用 ReactJS 编写的。你可以在上面提到的 GitHub 链接中找到它们。欢迎创建分支、修改及使用！
Web API 的一大痛点
使用 Web API 的一大痛点是，它们中的大多数还没有标准化。这意味着，对 Web API 的支持可能因浏览器供应商的不同而有所不同。例如，你可能会发现一个 API 可以在 Chrome 浏览器上使用，但是 Firefox 或 Edge 浏览器还不支持它。
我建议通过以下两种方法进行检查：
- 在Can I Use网站上查看 Web API 的支持情况，只需要输入名称即可；
- 如果特定的 Web API 不受支持，则实现回退或反馈。大多数 Web API 都提供了方法检查 Web API 是否受支持。当不受支持的时候，你可以实现回退，或者至少向用户提供反馈。
不那么知名但有用的 Web API
好了，让我们来看下这些 API，希望对你有用。
1. ???? Fullscreen API
你是否需要在全屏模式下显示什么 DOM 元素？游戏应用程序、在线视频平台（如 YouTube）等是非常需要全屏的用例。
Fullscreen API 提供了以全屏模式显示特定元素（及其子元素）的方法。有一个方法可以让我们在不需要全屏模式时退出该模式。不仅如此，当 DOM 元素转换到全屏模式或脱离全屏模式时，这个 API 还可以帮助执行任何操作。
在下面的例子中，我最喜欢的圣诞老人可以轻松地进入全屏模式及退出。
你是否需要在全屏模式下显示什么 DOM 元素？游戏应用程序、在线视频平台（如 YouTube）等是非常需要全屏的用例。
Fullscreen API提供了以全屏模式显示特定元素（及其子元素）的方法。有一个方法可以让我们在不需要全屏模式时退出该模式。不仅如此，当 DOM 元素转换到全屏模式或脱离全屏模式时，这个 API 还可以帮助执行任何操作。
在下面的例子中，我最喜欢的圣诞老人可以轻松地进入全屏模式及退出。
在下面的代码中，manageFullScreen()函数在一个 id 为fs_id的元素上使用requestFullscreen()API。
const manageFullscreen = () => {
document.getElementById('fs_id').requestFullscreen();
}Id 为 fs_id 的元素是一个包含子元素（即圣诞老人图片）的 DIV。
<div className="column">
<div id="fs_id">
<Img fixed={imageData.image.childImageSharp.fixed} alt="santa" />
</div>
<StyledButton
onClick={manageFullscreen}>
Enter Fullscreen with Santa
</StyledButton>
</div>你可以检查一下浏览器是否支持 Fullscreen API。
if (document.fullscreenEnabled) {
setSupported(true);
} else {
setSupported(false);
}另外可以留意下这两个有用的处理程序：
另外可以留意下这两个有用的处理程序：
- onfullscreenchange：一个处理 fullscreenchange 事件的事件处理程序；
- onfullscreenerror：一个处理 fullscreenerror 事件的事件处理程序。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-fullscreen/
2. ???? Clipboard Async API
什么是剪切板？
剪切板是一些操作系统提供的一个缓冲区，用于短期存储，以及应用程序内部和应用程序之间的数据传输。
使用剪切板主要可以执行三种操作，它们是copy、cut和paste。Clipboard API 提供 了响应这三种操作的能力。
有趣的是，复制内容到剪切板是开放的，不需要用户许可。但是，要将内容从剪切板粘贴到用户应用程序则需要授权。这是使用另一个名为Permission API的 Web API 实现的。
下面是一个简单的复制 - 粘贴操作示例：
下面的代码检查浏览器是否支持该 API：
if (navigator.clipboard
&& navigator.clipboard.read
&& navigator.clipboard.write) {
setSupported(true);
} else {
setSupported(false);
}下面是将内容写入剪切板的 Async API 函数：
async function performCopy(event) {
event.preventDefault();
try {
await navigator.clipboard.writeText(copyText);
console.log(`${copyText} copied to clipboard`);
} catch (err) {
console.error('Failed to copy: ', err);
}
}Async API 函数从剪切板读取内容，并用它做一些事情：
async function performPaste(event) {
event.preventDefault();
try {
const text = await navigator.clipboard.readText();
setPastetext(text);
console.log('Pasted content: ', text);
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}注意：通过包含 Clipboard Async API，就可以不用 document.execCommad() 函数了，因为它现在已经过时了。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-clipboard-apis/
3. ???? Resize Observer API
你是否希望针对 DOM 元素内容或边框的变化做一些操作？你是否考虑自己编写一个处理程序？如果我告诉你，已经有 Web API 实现提供了一个呢？
在下面的示例中，我们可以使用范围滑动条来调整按钮的大小。当按钮大小被调整时，我们还想控制文本颜色，而按钮并不知道。
首先，创建一个按钮并指定 id，稍后我们可以使用这个 id 访问该按钮：-
<StyledButton id="dumbBtnId">
I am a Dumb Button
</StyledButton>现在，创建一个滑动条，使用 HTML5 的 input 类型 range。当滑动条的值变化时会触发 resize() 函数。
<div>
<input
onChange={(event) => resize(event)}
type="range"
min={minRange}
max={maxRange}
defaultValue={rangeValue} />
</div>resize() 函数根据滑动条的范围值设置按钮的宽度，从而动态地调整其大小：
const resize = event => {
const value = event.target.valueAsNumber;
setRangeValue(value);
let dumbBtn = document.getElementById('dumbBtnId');
dumbBtn.style.width = `${value}px`;
}到目前为止，没什么问题吧？现在，对于范围值的每一次改变，按钮大小都将被调整。我们用 ResizeObserver 观察这个变化并改变按钮文本的颜色。
useEffect(() => {
try {
let dumbBtn = document.getElementById('dumbBtnId');
var resizeObserver = new ResizeObserver(entries => {
for(const entry of entries) {
// Get the button element and color it
// based on the range values like this,
entry.target.style.color = 'green`;
}
});
resizeObserver.observe(dumbBtn);
} catch(e) {
setSupported(false);
console.log(e);
}
}, [rangeValue]);演示链接：
https://demo.greenroots.info/web-apis/web-api-resize-observer/
4. ???? Image Capture API
围绕音频，视频等用户媒体，有一些很酷而且很有用的 API。我喜欢Image Capture API，它可以帮助我们捕捉图像或从视频设备（如网络摄像头）抓取帧。不仅如此，你还可以在捕捉图像或抓取帧时执行操作。
首先，获得用户媒体访问权限。在这种情况下，我们获得了网络摄像头的访问权限。
navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
setTrack(track);
}).catch(error => {
console.error(` ${error} is not yet supported`);
setError(error);
});就像剪切板粘贴操作，摄像头媒体访问权限必须由用户授予。
现在抓取一帧，并做些操作。在这个例子中，我只是在画布上画出这一帧。
const imageCapture = new ImageCapture(track);
imageCapture.grabFrame()
.then(imageBitmap => {
const canvas = document.querySelector('#grabFrameCanvas');
drawCanvas(canvas, imageBitmap);
}).catch(error => {
console.log(error);
setError(error);
});我也可以拍一张照片并做类似的事情。
const imageCapture = new ImageCapture(track);
imageCapture.takePhoto().then(blob => createImageBitmap(blob))
.then(imageBitmap => {
const canvas = document.querySelector('#takePhotoCanvas');
drawCanvas(canvas, imageBitmap);
}).catch(error => {
console.log(error);
setError(error);
});要停止接收摄像头的视频流，只需要在正在运行的视频追踪上运行 stop() 方法。
const videoOff = () => {
track.stop();
}另外留意下下面的方法：
- getPhotoCapabilities()：获取可用配置选项的范围。
- getPhotoSettings()：获取当前照片的配置设置。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-image-capture/
5. ???? Broadcast Channel API
Broadcast Channel API允许浏览上下文（窗口、标签页、iframe）和同源 worker 之间进行通信。考虑这样一个用例，在你从一个在浏览器标签页中运行的应用程序注销时，你希望将其广播到在同一浏览器的其他标签中打开的应用程序实例。
在下面的示例中，发送方向接收方发送消息，同样的消息会广播到浏览上下文（在本例中为标签页）。
第一步是使用唯一名创建一个广播通道，还要定义要广播的内容（消息）。
const CHANNEL_NAME = "greenroots_channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
const message = 'I am wonderful!';要广播消息，在通道上调用 postMessage() 方法并传入消息。
const sendMessage = () => {
bc.postMessage(message);
}在接收端，广播监听者接收到消息通知。
const CHANNEL_NAME = "greenroots_channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
bc.addEventListener('message', function(event) {
console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);
const output = document.getElementById('msg');
output.innerText = event.data;
});演示链接：
https://demo.greenroots.info/web-apis/web-apis-broadcast/
6. ⏱️ Performance Interface API
Performance接口主要提供以下三个 API：
- Navigation
- Memory
- Timing
下面是输出内存使用情况的例子：
console.log(performance.memory);下面是另一个示例，它获得导航的性能统计数据：
const [entry] = performance.getEntriesByType("navigation");
console.table(entry)演示链接：
https://demo.greenroots.info/web-apis/web-api-performance/
7. ???? Battery Status API
对于你的笔记本电脑、PC 或设备，你想知道所有关于电池的信息吗？是的，有这样一个 Web API，名为Battery Status API。这个 API 可以帮助我们了解所有信息，如电池是否正在充电，还有多少电量，并提供了与充电相关的状态变化的处理程序。
下面的示例显示了我在插入和拔出笔记本电脑充电器时的状态变化：
下面的代码解释了如何处理和使用与电池相关的信息。-
navigator.getBattery().then(function (battery) {
// handle the charging change event
battery.addEventListener("chargingchange", function () {
console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
});
// handle charge level change
battery.addEventListener("levelchange", function () {
console.log("Battery level: " + battery.level * 100 + "%");
});
// handle charging time change
battery.addEventListener("chargingtimechange", function () {
console.log( "Battery charging time: " + battery.chargingTime + " seconds");
});
// handle discharging time change
battery.addEventListener("dischargingtimechange", function () {
console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
});
});我喜欢这个 API，它用起来很有趣。不好的是，这个 API 将来可能会被淘汰。
演示链接：
https://demo.greenroots.info/web-apis/web-apis-battery/
8. ???? Network Information API
Network Information API 提供关于网络类型（例如“WiFi”、“蜂窝”等）、数据保存模式、带宽等信息。
console.log(navigator.connection);演示链接：
https://demo.greenroots.info/web-apis/web-api-network-info/
9. ???? Vibration API
这是另一个连接到系统硬件并执行操作的示例。Vibration API 提供了启动设备振动（瞬间或持续）和停止振动的方法。
useEffect(() => {
if (start) {
// vibrate for 2 seconds
navigator.vibrate(2000);
} else {
// stop vibration
navigator.vibrate(0);
}
}, [start]);演示链接：
https://demo.greenroots.info/web-apis/web-apis-vibration/
10. ???? Bluetooth API
该 Web API 让你可以连接到蓝牙设备。
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
setDeviceName(device.name);
setDeviceId(device.id)
setDeviceConnected(device.connected);
}).catch(err => {
console.log(err);
setError(true);
})演示链接：
https://demo.greenroots.info/web-apis/web-apis-bluetooth/
更多 API
- Payment Request API：为商家和用户提供一致的支付体验。
- Touch Events：提供相对底层的 API，可用于支持特定于应用程序的多点触控交互，如双指手势。
- Page Visibility：提供可供监视的事件，以了解文档何时可见或隐藏。
- Channel Messaging API：另一种在浏览上下文中发送消息的好方法。然而，与广播不同的是，它是一对一地发送信息。
英文原文
- 发表于:
- 本文为 InfoQ 中文站特供稿件
- 首发地址：https://www.infoq.cn/article/wAzNDItOZxirdF4tZ9Up
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
