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

来自公众号:前端之巅
作者 | Tapas Adhikary
译者 | 平川
策划 | 小智

本文最初发布于 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 的支持情况,只需要输入名称即可;

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

不那么知名但有用的 Web API

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

1. 📺 Fullscreen 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

什么是剪切板?

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

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

延伸阅读

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

扫码关注公众号获取新鲜技术文章,免费领取前端工程师必备资源