你可能想使用的 10 个鲜为人知的 Web API
一些著名的 Web API
总结
关于 Web API 的要点
鲜为人知但实用的 Web API
...还有更多
进一步阅读
API是应用程序编程接口 (API) 的首字母缩写，它定义了多个软件架构层之间的交互。程序员在软件开发中使用 API 可以轻松执行复杂的任务。如果没有 API，程序员的生活将会非常痛苦，因为他们无法获得适当的数据访问权限（例如安全性），无法了解不必要的底层细节等等。
说到 Web API，有极其有用的对象、属性和函数可用于执行从访问 DOM 等简单任务到管理音频、视频、图形等复杂任务。
一些著名的 Web API
如果您有 Web 开发经验，那么您一定在使用其中的许多 API。以下列出了一些非常知名的 Web API。
在本文中，我将讨论另外 10 个不太流行的 Web API。不太流行并不意味着它们没用。您可以在项目的各种用例中使用它们。请仔细阅读。
总结
如果您想立即查看源代码或查看演示，以下是它们的快速链接：
- 源代码链接@GitHub
- 链接至 Web API DemoLab
- 您可以在 Twitter 上关注我@tapasadhikary以了解讨论和更新信息。
注意：Web API 实际上是使用原生 JavaScript 编写和公开的接口、函数、对象和属性。然而，Web API 的使用范围并不仅限于基于原生 JavaScript 的应用程序。在基于 Angular、React 或 Vue 的应用程序中，它们也同样简单易用。
本文中用于演示 Web API 的所有示例均使用 React.js 编写。您可以在上述 GitHub 链接中找到它们。欢迎随时 fork、修改和使用！
关于 Web API 的要点
使用 Web API 的一大痛点是，大多数 API 尚未标准化。这意味着不同浏览器厂商对 Web API 的支持可能有所不同。例如，你可能会发现某个 API 可以在 Chrome 浏览器上运行，但 Firefox 或 Edge 浏览器尚未支持。
我建议用几种方法来检查这个问题，
- 只需输入 Web API 的名称，即可从“我可以使用”网站检查其是否支持该 Web API 。
- 如果某个 Web API 不受支持，请实现回退或反馈。大多数 Web API 都提供了检查 API 是否受支持的方法。您可以选择在 API 不受支持时实现回退，或者至少通过提供反馈消息来通知用户。
鲜为人知但实用的 Web API
好了，现在开始了解它们吧。希望你也觉得这些有用。
1. 📺 全屏 API
您是否需要在全屏模式下显示任何 DOM 元素？全屏用例对于游戏应用、在线视频平台（例如 YouTube）等应用来说非常苛刻。
提供Fullscreen API了以全屏模式呈现特定元素（及其子元素）的方法。此外，还提供了在不再需要时退出全屏模式的方法。不仅如此，此 API 还可以帮助执行 DOM 元素在进入或退出全屏模式时的任何操作。
在下面的例子中，我最喜欢的圣诞老人可以轻松进入全屏模式并退出。
在下面的代码中，函数对具有 id 的元素manageFullScreen()使用API 。requestFullscreen()fs_id
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：全屏更改事件的事件处理程序。onfullscreenerror：全屏错误事件的事件处理程序。
演示的直接链接：https://demo.greenroots.info/web-apis/web-apis-fullscreen/
2. 📋 剪贴板异步 API
计算机中的剪贴板是什么？
剪贴板是某些操作系统提供的缓冲区，用于应用程序内部和应用程序之间的短期存储和传输。
剪贴板主要可以执行三种操作。它们是 、copy和cut。paste剪贴板 API 提供了响应这三种操作的能力。
有趣的是，将内容复制到剪贴板是开放的，无需用户权限。但是，要将内容从剪贴板粘贴到用户应用程序，则需要用户授予权限。这可以通过另一个名为“权限 API”的 Web API 来实现。
这是一个复制粘贴操作的简单示例，
这是检查浏览器是否支持该功能的方法，
if (navigator.clipboard
&& navigator.clipboard.read
&& navigator.clipboard.write) {
setSupported(true);
} else {
setSupported(false);
}
这是用于将内容写入剪贴板的异步 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);
}
}
异步 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. 🧐 调整观察者 API
您是否想根据 DOM 元素的内容或边框的变化执行某些操作？您是否正在考虑自己编写一个处理程序？如果我告诉您，Web API 实现已经提供了一个处理程序，您会怎么做？
这是一个关于哑按钮的故事。我们使用一个范围滑块来调整按钮的大小。当按钮大小调整时，我们想控制文本的颜色，但又不想让按钮感知到太多信息。
首先，创建一个按钮并指定一个 id，以便我们稍后可以使用 id 访问该按钮。
<StyledButton id="dumbBtnId">
I am a Dumb Button
</StyledButton>
现在我们使用 HTML5 的输入类型创建一个滑块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.📷 图像捕获 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);
});
就像剪贴板粘贴操作一样，用户必须授予网络摄像头媒体访问权限。
现在抓取一个框架并执行一些操作。在这个例子中，我只是在 Canvas 上绘制了框架。
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. 📡 广播频道 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.⏱️性能接口API
该Performance接口提供对三大 API 的访问，即
- 导航
- 记忆
- 定时
以下是内存使用情况的一个例子，
console.log(performance.memory);
这是另一个如何获取导航性能统计数据的示例，
const [entry] = performance.getEntriesByType("navigation");
console.table(entry)
演示的直接链接：https://demo.greenroots.info/web-apis/web-api-performance/
7. 🔋 电池状态 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. 📶 网络信息 API
提供Network Information API有关网络类型（例如“wifi”、“蜂窝”等）、保存数据模式、带宽等的信息。
console.log(navigator.connection);
演示的直接链接：https://demo.greenroots.info/web-apis/web-api-network-info/
9. 📳 振动 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.🤙 蓝牙 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：为商家和用户提供一致的支付用户体验。
- 触摸事件：提供相对低级的 API，可用于支持特定于应用程序的多点触控交互，例如双指手势。
- 页面可见性：提供您可以观察的事件，以了解文档何时可见或隐藏
- Channel Messaging API：另一种在浏览上下文中发送消息的好方法。然而，与广播不同，这里发送的是一对一消息。
我将很快把每个示例添加到Web API DemoLab。
进一步阅读
如果对您有用，请点赞/分享，以便其他人也能看到。封面图片是在freepik的一张酷炫作品基础上即兴创作的。
- 您可以从https://blog.greenroots.info/订阅我未来的文章
- 在 Twitter 上关注我@tapasadhikary了解最新动态和技术讨论。