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

什麼是剪切板？

剪切板是一些操作系統提供的一個緩衝區，用於短期存儲，以及應用程序內部和應用程序之間的數據傳輸。

使用剪切板主要可以執行三種操作，它們是copy、cut和paste。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