Categories
程式開發

10個不那麼知名但很實用的Web API


API 是Application Programming Interface 的縮寫,它定義了軟件架構層次之間的交互。 借助API,程序員可以在軟件開發中輕鬆地執行複雜的任務。 如果沒有API,那麼程序員的生活會很悲慘,沒有合適(例如安全)的數據訪問,要了解不必要的底層細節,等等。

在Web API 中,有非常有用的對象、屬性和函數可用於執行小到訪問DOM 這樣的小任務,大到處理音頻、視頻、圖形這樣的複雜任務。

一些著名的Web API

如果你有Web 開發背景,那麼你已經在使用其中的許多工具了。 下面是一些非常著名的Web API。

  • 帆布
  • 歷史
  • 地理位置
  • 判斷
  • 安慰
  • 拖放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 1

  • 如果特定的Web API 不受支持,則實現回退或反饋。 大多數Web API 都提供了方法檢查Web API 是否受支持。 當不受支持的時候,你可以實現回退,或者至少向用戶提供反饋。

10個不那麼知名但很實用的Web API 2

不那麼知名但有用的Web API

好了,讓我們來看下這些API,希望對你有用。

1.📺全屏API

你是否需要在全屏模式下顯示什麼DOM 元素? 遊戲應用程序、在線視頻平台(如YouTube)等是非常需要全屏的用例。

Fullscreen API 提供了以全屏模式顯示特定元素(及其子元素)的方法。 有一個方法可以讓我們在不需要全屏模式時退出該模式。 不僅如此,當DOM 元素轉換到全屏模式或脫離全屏模式時,這個API 還可以幫助執行任何操作。

在下面的例子中,我最喜歡的聖誕老人可以輕鬆地進入全屏模式及退出。

你是否需要在全屏模式下顯示什麼DOM 元素? 遊戲應用程序、在線視頻平台(如YouTube)等是非常需要全屏的用例。

Fullscreen API提供了以全屏模式顯示特定元素(及其子元素)的方法。 有一個方法可以讓我們在不需要全屏模式時退出該模式。 不僅如此,當DOM 元素轉換到全屏模式或脫離全屏模式時,這個API 還可以幫助執行任何操作。

在下面的例子中,我最喜歡的聖誕老人可以輕鬆地進入全屏模式及退出。

10個不那麼知名但很實用的Web API 3

在下面的代碼中,manageFullScreen()函數在一個id 為fs_id的元素上使用requestFullscreen()API。

const manageFullscreen = () => {
   document.getElementById('fs_id').requestFullscreen();
}

Id 為fs_id 的元素是一個包含子元素(即聖誕老人圖片)的DIV。

聖塔
Enter Fullscreen with Santa

你可以檢查一下瀏覽器是否支持Fullscreen API。


if (document.fullscreenEnabled) {
   setSupported(true);
} else {
   setSupported(false);
}

另外可以留意下這兩個有用的處理程序:

另外可以留意下這兩個有用的處理程序:

  • onfullscreenchange:一個處理fullscreenchange 事件的事件處理程序;
  • onfullscreenerror:一個處理fullscreenerror 事件的事件處理程序。

演示鏈接:

https://demo.greenroots.info/web-apis/web-apis-fullscreen/

2.📋剪貼板異步API

什麼是剪切板?

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

使用剪切板主要可以執行三種操作,它們是copycutpaste。 Clipboard API 提供了響應這三種操作的能力。

有趣的是,複製內容到剪切板是開放的,不需要用戶許可。 但是,要將內容從剪切板粘貼到用戶應用程序則需要授權。 這是使用另一個名為Permission API的Web API 實現的。

10個不那麼知名但很實用的Web API 4

下面是一個簡單的複制- 粘貼操作示例:

10個不那麼知名但很實用的Web API 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.🧐調整觀察者API的大小

你是否希望針對DOM 元素內容或邊框的變化做一些操作? 你是否考慮自己編寫一個處理程序? 如果我告訴你,已經有Web API 實現提供了一個呢?

在下面的示例中,我們可以使用範圍滑動條來調整按鈕的大小。 當按鈕大小被調整時,我們還想控製文本顏色,而按鈕並不知道。

10個不那麼知名但很實用的Web API 6

首先,創建一個按鈕並指定id,稍後我們可以使用這個id 訪問該按鈕:-


   I am a Dumb Button

現在,創建一個滑動條,使用HTML5 的input 類型range。 當滑動條的值變化時會觸發resize() 函數。

resize(event)} type="range" min={minRange} max={maxRange} defaultValue={rangeValue} />

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.📷圖像捕獲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 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();
 }

10個不那麼知名但很實用的Web API 8

另外留意下下面的方法:

  • getPhotoCapabilities():獲取可用配置選項的範圍。
  • getPhotoSettings():獲取當前照片的配置設置。

演示鏈接:

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

5.📡廣播頻道API

Broadcast Channel API允許瀏覽上下文(窗口、標籤頁、iframe)和同源worker 之間進行通信。 考慮這樣一個用例,在你從一個在瀏覽器標籤頁中運行的應用程序註銷時,你希望將其廣播到在同一瀏覽器的其他標籤中打開的應用程序實例。

在下面的示例中,發送方向接收方發送消息,同樣的消息會廣播到瀏覽上下文(在本例中為標籤頁)。

10個不那麼知名但很實用的Web API 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:

  • 導航
  • 記憶
  • 定時

下面是輸出內存使用情況的例子:

console.log(performance.memory);

10個不那麼知名但很實用的Web API 10

下面是另一個示例,它獲得導航的性能統計數據:

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

10個不那麼知名但很實用的Web API 11

演示鏈接:

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

7.🔋電池狀態API

對於你的筆記本電腦、PC 或設備,你想知道所有關於電池的信息嗎? 是的,有這樣一個Web API,名為Battery Status API。 這個API 可以幫助我們了解所有信息,如電池是否正在充電,還有多少電量,並提供了與充電相關的狀態變化的處理程序。

下面的示例顯示了我在插入和拔出筆記本電腦充電器時的狀態變化:

10個不那麼知名但很實用的Web API 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.📶網絡信息API

Network Information API 提供關於網絡類型(例如“WiFi”、“蜂窩”等)、數據保存模式、帶寬等信息。

console.log(navigator.connection);

10個不那麼知名但很實用的Web API 13

演示鏈接:

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

9.📳振動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.🤙藍牙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個鮮為人知的Web API