10个鲜为人知但很实用的Web API

2024-03-14 22:13:59

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

本文经原作者授权由 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 的支持情况，只需要输入名称即可；

10个鲜为人知但很实用的Web API

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

10个鲜为人知但很实用的Web API

不那么知名但有用的 Web API

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

1.  Fullscreen API

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

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

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

10个鲜为人知但很实用的Web 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 实现的。

10个鲜为人知但很实用的Web API

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

10个鲜为人知但很实用的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 实现提供了一个呢？

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

10个鲜为人知但很实用的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);
});

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

10个鲜为人知但很实用的Web API

现在抓取一帧，并做些操作。在这个例子中，我只是在画布上画出这一帧。
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();
 }

10个鲜为人知但很实用的Web API

另外留意下下面的方法：

  • getPhotoCapabilities()：获取可用配置选项的范围。

  • getPhotoSettings()：获取当前照片的配置设置。

演示链接：

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

5.  Broadcast Channel API

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

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

10个鲜为人知但很实用的Web API

第一步是使用唯一名创建一个广播通道，还要定义要广播的内容（消息）。
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);

10个鲜为人知但很实用的Web API

下面是另一个示例，它获得导航的性能统计数据：
const [entry] = performance.getEntriesByType("navigation");
console.table(entry)

10个鲜为人知但很实用的Web API

演示链接：

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

7.Battery Status API

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

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

10个鲜为人知但很实用的Web 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 APINetwork Information API提供关于网络类型（例如“WiFi”、“蜂窝”等）、数据保存模式、带宽等信息。
console.log(navigator.connection);

10个鲜为人知但很实用的Web API

演示链接：

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

延伸阅读

https://blog.greenroots.info/10-lesser-known-web-apis-you-may-want-to-use-ckejv75cr012y70s158n85yhn

上一篇：Web APIs(四)


下一篇：vtk学习记录（一）——vtk工程配置与生成