10个不那么知名但很实用的Web API

2020 年 9 月 16 日

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);
}
{1}

另外可以留意下这两个有用的处理程序:

另外可以留意下这两个有用的处理程序:

  • onfullscreenchange:一个处理 fullscreenchange 事件的事件处理程序;
  • onfullscreenerror:一个处理 fullscreenerror 事件的事件处理程序。

演示链接:

https://demo.greenroots.info/web-apis/web-apis-fullscreen/

2. 📋 Clipboard Async API

什么是剪切板?

剪切板是一些操作系统提供的一个缓冲区,用于短期存储,以及应用程序内部和应用程序之间的数据传输。

使用剪切板主要可以执行三种操作,它们是copycutpaste。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:另一种在浏览上下文中发送消息的好方法。然而,与广播不同的是,它是一对一地发送信息。

英文原文

10 lesser-known Web APIs you may want to use

2020 年 9 月 16 日 16:46 4274
用户头像
小智 InfoQ高级编辑

发布了 385 篇内容, 共 298.4 次阅读, 收获喜欢 1612 次。

关注

评论

发布
暂无评论
发现更多内容

第一周学习总结

CraspLion

第四周作业

橘子皮嚼着不脆

【建议收藏】18个适合程序员的在线学习网站,每个我都帮您试过了

Java后端技术全栈

学习 程序员 成长 网站

面试官角度,聊聊写简历这事

Java后端技术全栈

程序员 面试 奇葩面试

Spring Boot 过滤器、监听器、拦截器的使用

Java后端技术全栈

程序员 过滤器 拦截器

架构师训练营第 1 期 -Week5 - 课后练习

鲁小鲁

架构师训练营第 1 期

第五周作业

架构师训练营第 1 期

第5周 技术选型(一)总结

bearlu

第01周学习总结[架构师训练营第 2 期]

Airship

架构师训练营第 2 期

第一周学习总结

Alvin

架构师训练营第 2 期 2组 每周学习总结

只争朝夕乘势上,不负韶华开新局——区块链上升为国家战略今日迎来一周年

CECBC区块链专委会

区块链 数字经济

第一周作业

阿呆

数字人民币将如何改变金融生态?

CECBC区块链专委会

数字人民币

架构师第一周作业

丁乐洪

架构师训练营第 1 期 - 第五周作业提交

Todd-Lee

架构师训练营第 1 期

架构师训练营第 1 期第 5 周学习总结

du tiezheng

架构师训练营第 1 期

年薪50万开发者相亲失败:程序员,别输在不会说话上

Java后端技术全栈

程序员 好好说话 不会说话

牛逼的程序员,都长什么样?

Java后端技术全栈

程序员 牛逼

手把手教你理解决策树:从概念到应用

计算机与AI

Python 机器学习 决策树

程序员是不是青春饭?年纪大了何去何从

Java后端技术全栈

程序员 大龄程序员 青春饭

技术是否要追新?基于4点判断谈谈4点认识

Java后端技术全栈

程序员 技术 最新 技术追新

架构师训练营 Week5 - 课后作业

算法 分布式缓存 一致性哈希

架构师训练营第 1 期 - 第五周总结

Todd-Lee

架构师训练营第 1 期

架构师训练营第五周课后作业

Gosling

「架构师训练营第 1 期」

极客时间架构师培训 1 期 - 第 5 周作业

Kaven

一致性哈希算法 Java 实现

escray

极客大学 课程作业 架构师训练营第 1 期

架构师训练营第五周学习总结

Gosling

「架构师训练营第 1 期」

朋友被“卖”了两次:程序员,真的别去外包公司!

Java后端技术全栈

程序员 外包 外包公司

【原创】90%的人都不会做的一道笔试题

Java后端技术全栈

程序员 面试

食堂就餐卡系统设计

Sandman

作业 架构师训练营第 2 期

【第五周】技术选型(一)

云龙

云原生来袭,企业上云如何平滑迁移增效避险?

云原生来袭,企业上云如何平滑迁移增效避险?

10个不那么知名但很实用的Web API-InfoQ