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

桃扇骨 2022-12-10 04:54 162阅读 0赞

![format_png][]

作者 | Tapas Adhikary

译者 | 平川

策划 | 小智

在本文中，我将介绍 10 个不那么流行的 Web API。不那么流行并不意味着它们没有用处。你可以在项目的各种用例中使用它们。

本文最初发布于 GreenRoots 博客，经原作者授权由 InfoQ 中文站翻译并分享。

`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 的支持情况，只需要输入名称即可；

![format_png 1][]

*  如果特定的 Web API 不受支持，则实现回退或反馈。大多数 Web API 都提供了方法检查 Web API 是否受支持。当不受支持的时候，你可以实现回退，或者至少向用户提供反馈。

![format_png 2][]

不那么知名但有用的 Web API

好了，让我们来看下这些 API，希望对你有用。

1. ???? Fullscreen API

你是否需要在全屏模式下显示什么 DOM 元素？游戏应用程序、在线视频平台（如 YouTube）等是非常需要全屏的用例。

`Fullscreen API`提供了以全屏模式显示特定元素（及其子元素）的方法。有一个方法可以让我们在不需要全屏模式时退出该模式。不仅如此，当 DOM 元素转换到全屏模式或脱离全屏模式时，这个 API 还可以帮助执行任何操作。

在下面的例子中，我最喜欢的圣诞老人可以轻松地进入全屏模式及退出。

![format_png 3][]

在下面的代码中，`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 实现的。

![format_png 4][]

下面是一个简单的复制 - 粘贴操作示例：

![format_png 5][]

下面的代码检查浏览器是否支持该 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 实现提供了一个呢？

在下面的示例中，我们可以使用范围滑动条来调整按钮的大小。当按钮大小被调整时，我们还想控制文本颜色，而按钮并不知道。

![format_png 6][]

首先，创建一个按钮并指定 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);
    });

就像剪切板粘贴操作，摄像头媒体访问权限必须由用户授予。

![format_png 7][]

现在抓取一帧，并做些操作。在这个例子中，我只是在画布上画出这一帧。

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();
     }

![format_png 8][]

另外留意下下面的方法：

*  `getPhotoCapabilities()`：获取可用配置选项的范围。
 *  `getPhotoSettings()`：获取当前照片的配置设置。

演示链接：

https://demo.greenroots.info/web-apis/web-apis-image-capture/

5. ???? Broadcast Channel API

`Broadcast Channel API`允许浏览上下文（窗口、标签页、iframe）和同源 worker 之间进行通信。考虑这样一个用例，在你从一个在浏览器标签页中运行的应用程序注销时，你希望将其广播到在同一浏览器的其他标签中打开的应用程序实例。

在下面的示例中，发送方向接收方发送消息，同样的消息会广播到浏览上下文（在本例中为标签页）。

![format_png 9][]

第一步是使用唯一名创建一个广播通道，还要定义要广播的内容（消息）。

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);

![format_png 10][]

下面是另一个示例，它获得导航的性能统计数据：

const [entry] = performance.getEntriesByType("navigation");
    console.table(entry)

![format_png 11][]

演示链接：

https://demo.greenroots.info/web-apis/web-api-performance/

7. ???? Battery Status API

对于你的笔记本电脑、PC 或设备，你想知道所有关于电池的信息吗？是的，有这样一个 Web API，名为`Battery Status API`。这个 API 可以帮助我们了解所有信息，如电池是否正在充电，还有多少电量，并提供了与充电相关的状态变化的处理程序。

下面的示例显示了我在插入和拔出笔记本电脑充电器时的状态变化：

![format_png 12][]

下面的代码解释了如何处理和使用与电池相关的信息。

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);

![format_png 13][]

演示链接：

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：另一种在浏览上下文中发送消息的好方法。然而，与广播不同的是，它是一对一地发送信息。

### 学习交流 ###

*  关注公众号【前端宇宙】,每日获取好文推荐
 *  添加微信,入群交流

![format_png 14][]

“在看和转发”就是最大的支持

[format_png]: /images/20221123/7198bf60d45e42de957f9053480bd698.png
[format_png 1]: /images/20221123/d8c0f515798645cba6fa61ff8f924ad7.png
[format_png 2]: /images/20221123/aa3a70355b7b4a409f168fbc03c1d0ca.png
[format_png 3]: /images/20221123/235a92bf56fe4ae48177bdb620e044a8.png
[format_png 4]: /images/20221123/e81c0b2dea1e42ccb50ff8e176faad55.png
[format_png 5]: /images/20221123/38f27722e7154c5c99e4a0a32ab44634.png
[format_png 6]: /images/20221123/9ed98da0cd7143619577e0bec3876ff1.png
[format_png 7]: /images/20221123/ba40bb6c3b874da8bdc856c9a5fe05cf.png
[format_png 8]: /images/20221123/9298351e17c344dd8f35c7c91e506742.png
[format_png 9]: /images/20221123/3fab480b9c8c4a2dadc840ba3aaec67f.png
[format_png 10]: /images/20221123/46298a41c9e1430387c0cb139da31751.png
[format_png 11]: /images/20221123/069b1cffaa504c4e9afa833513667ff2.png
[format_png 12]: /images/20221123/83d3bbe9e9924f189ab19541d66823c8.png
[format_png 13]: /images/20221123/1027381c46674ad586e6e447858a66af.png
[format_png 14]: /images/20221123/18a3071bbaa84625ac8096012399fe4f.png