上週末，谷歌瀏覽器官方部落格宣佈釋出Chrome 89 Beta版本，該版本帶來一系列的新鮮功能，請和蟲蟲一起嚐鮮學習下。

WebHID API

Chrome 89 Beta版本中最引人注目的功能之一WebHID API，用來解決人機介面裝置（HID）現實應用的問題。WebHID API透過提供一種透過JavaScript實現特定於裝置的邏輯的方法來解決此問題。

人機介面裝置是一種供人獲取輸入或向人提供輸出的裝置。常見的人機介面裝置包括鍵盤，滑鼠，觸控式螢幕等指示裝置以及遊戲板。

在瀏覽器中訪問這些罕見或異常的HID裝置是一種很費勁的事情。比如，要在Web遊戲中使用遊戲手柄。由於遊戲手柄的輸入和輸出標準化程度不高，Web瀏覽器通常需要針對特定​裝置的自定義邏輯。由於沒有一種可持續的定向支援，使得對於較舊或者不常見的裝置不能給予支援。

一個WebHID的連線Joy-Con裝置例項程式碼：

device.addEventListener("inputreport", event => {const { data, device, reportId } = event;// Handle only the Joy-Con Right device and a specific report ID.if (device.productId !== 0x2007 && reportId !== 0x3f) return;const value = data.getUint8(0);if (value === 0) return;const someButtons = { 1: "A", 2: "X", 4: "B", 8: "Y" };console.log(`User pressed button ${someButtons[value]}.`);});

WEB NFC

NFC很多人可能都熟悉，並且日常都在使用，比如刷用手機公交卡，刷門禁等。

Web NFC可以允許Web應用程式讀寫NFC標籤。這樣可以對Web使用提供很大便捷，比如倉儲管理，物流供應鏈追溯等，透過網站就可以使用而無需專門的APP。Chrome 89中將預設啟用Web NFC。

使用WEB NFC，讀寫操作非常簡單。只需要一些指令來構造和解釋有效載荷：

將字串寫入NFC標籤：

if ("NDEFReader" in window) {const ndef = new NDEFReader();await ndef.write("Hello world!");}

掃描來自NFC標籤的訊息：

if ("NDEFReader" in window) {const ndef = new NDEFReader();await ndef.scan();ndef.onreading = ({ message }) => {console.log(`Records read from a NFC tag: ${message.records.length}`);};}

一個完整的例子：

scanButton.addEventListener("click", async () => {log("User clicked scan button");try {const ndef = new NDEFReader();await ndef.scan();log("> Scan started");ndef.addEventListener("readingerror", () => {log("Argh! Cannot read data from the NFC tag. Try another one?");});ndef.addEventListener("reading", ({ message, serialNumber }) => {log(`> Serial Number: ${serialNumber}`);log(`> Records: (${message.records.length})`);});} catch (error) {log("Argh! " + error);}});writeButton.addEventListener("click", async () => {log("User clicked write button");try {const ndef = new NDEFReader();await ndef.write("Hello world!");log("> Message written");} catch (error) {log("Argh! " + error);}});

Web序列API

串列埠是雙向通訊介面，允許逐位元組傳送和接收資料。Web串列埠API將是網站可以和序列裝置通訊，可以在瀏覽器上控制諸如微控制器和3D印表機之類的裝置。

目前在教學演示，業餘愛好者和特定工業環境中，用Web控制外圍裝置已經不是什麼新鮮事，但是這些例項中，都需要安裝硬體介面卡和驅動程式，比如ActiveX空間等。

Web序列API則會讓這一切都變得簡單和標準化，改善開發和使用者的體驗。

Chrome瀏覽器（Android版）開始在Chrome 61和75之間添加了這些功能功能。在Chrome 89中，Windows和ChromeOS上也可以使用Web共享，ChromeOS支援註冊為共享目標。在這些平臺上，站點可以使用navigator.share()在桌面上彈出一個觸​共享對話方塊。Web應用程式清單的介面允許PWA充當為共享目標。

if (navigator.share) {navigator.share({title: 'web.dev',text: 'Check out web.dev.',url: 'web.dev',}).then(() => console.log('Successful share')).catch((error) => console.log('Error sharing', error));}

其他功能AVIF影象解碼

新版本的Chrome支援使用Android和WebView上的AV1解碼器本地解碼AVIF內容。（在Chrome 85中添加了對桌面的支援。）

跨域開啟者政策報告API

新增加的報告API可幫助開發人員部署跨域開放者政策。除了在強制執行COOP時報告損壞之外，API還為COOP提供了僅報告模式。COOP的僅報告模式不會強制執行COOP，但會報告如果我們強制執行COOP可能發生的潛在損壞。開發人員可以使用Chrome DevTools檢查報告API。

在網路應用清單中顯示替代

display_overrideWeb應用程式清單的新 欄位允許開發人員為該display欄位指定一個顯式的後備鏈。

流API：位元組流

流API提供了無處不在的，可互操作的原語，用於建立，組合和使用資料流。對於表示位元組的流，Chrome現在支援可讀流的擴充套件版本，以有效地處理位元組，特別是透過最小化副本。

位元組流允許獲取自己的緩衝區（BYOB）讀取器。預設實現可以提供一系列不同的輸出，例如Web套接字的字串或陣列緩衝區，而位元組流則保證位元組輸出。

支援SVG元素上的完整“過濾器”屬性語法

Chrome現在允許將該'filter'屬性的完整語法用於以前僅支援單個url()引用的SVG元素。這使過濾器的功能，例如blur()，sepia()和grayscale()同時適用於SVG元素和非SVG元素。它使平臺支援'filter'更加統一，並允許更輕鬆地應用某些“罐頭”效果。

WebAuthentication API

Chrome現在支援與Web身份驗證API相關的兩項新功能：AuthenticatorSelectionCriteria.residentKey和credProps。前者指定Web身份驗證憑據註冊是否應建立客戶端可發現憑據。credProps副檔名向依賴部分建立的憑據是否可在客戶端發現。

客戶端可發現憑據（client-side discoverable credentials）是一種WebAuthn憑據，依賴方對它質疑時候，可以無需WebAuthn API請求中提供憑據ID。瀏覽器顯示來自給定驗證器（外部安全金鑰或內建驗證器）的所有可發現憑據的列表，並允許使用者選擇一個憑據進行登入。

CSS和JavaScript:: target-text偽元素

新增突出顯示偽元素，以允許作者以與預設使用者代理突出顯示不同的方式設定scroll-to-text片段的樣式。

flow-relative圓角屬性

現在，flow-relative的圓角舍入屬性允許使用邏輯對映來控制拐角。這樣，開發者可以根據頁面的方向和書寫方式設定不同的角邊框半徑，更加符合CSS邏輯屬性和值規範。本次新添加了以下邏輯屬性：

border-start-start-radiusborder-start-end-radiusborder-end-start-radiusborder-end-end-radius

強制顏色屬性

forced-colors媒體特徵檢測使用者代理是否執行頁面上的使用者選擇的有限調色盤。

強制顏色調整屬性

forced-color-adjust屬性允許作者從強制顏色模式中選擇特定元素，從而將對顏色的完全控制恢復到CSS。

頂級await

新版本的Chrome中引入了JavaScript V8引擎8.9版本，包括新功能有：

Chrome 89中允許await在JavaScript模組中將關鍵字放在頂層。這樣可以將非同步呼叫更加無縫地整合到模組載入過程中。目前，該功能只能透過將模組包裝在非同步函式中來實現的，增加了模組實現的複雜性，並使得模組可以獲取任何實現細節。

新版本的Chrome還移除一些功能

刪除<link rel = prerender>的字首事件

傳統字首事件（webkitprerenderstart，webkitprerenderstop，webkitprerenderload和webkitprerenderdomcontentloaded）出動<link rel=prerender> 現在從Chrome中刪除。

停止克隆使用noopener開啟的Windows的sessionStorage

當使用noopener開啟視窗時，Chrome將不再克隆sessionStorage開啟器。相反，它將啟動一個空的sessionStorage名稱空間。這使Chrome符合HTML規範。