阿里、微众、PingCAP专家分享如何解决可观测性带来的埋点成本上升、观测数据割裂等挑战。戳 了解详情
写点什么

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

  • 2020 年 9 月 16 日
  • 本文字数:6012 字

    阅读完需:约 20 分钟

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);}
复制代码


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


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


  • 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:464787
用户头像
小智 前 InfoQ 主编

发布了 408 篇内容, 共 344.8 次阅读, 收获喜欢 1897 次。

关注

评论

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

Techo Day 腾讯技术开放日「轻量级云开发与云应用」

Techo Day 腾讯技术开放日「轻量级云开发与云应用」

10个不那么知名但很实用的Web API_前端_Tapas Adhikary_InfoQ精选文章