Chrome 89 版的新功能

Pete LePage

Chrome 89 現正推出穩定版。

以下是一些注意事項：

我是 Pete LePage，目前在工作和射手拍攝。接下來，讓我們深入探索 Chrome 89 為開發人員提供的新功能！

WebHID、WebNFC 和網路序號

我對 WebHID、WebNFC 和網路序號感到非常期待。並且為使用者開啟了前所未有的新情境，並與真實世界的硬體互動。

可讓製造商連線至有趣新奇的硬體和視訊會議應用程式，也能在特殊的喇叭上使用專屬的電話按鈕。或有多少其他用途

@AndreBan 使用 Web Serial 和 60 行程式碼，建立了網頁，可以在 Raspberry Pico 上與 MicroPython REPL 互動。Espruino 也會在網頁式 IDE 中使用 Web Serial。

在 2019 年 CDS 期間，Francois 使用網路 NFC 打造出一款有趣的記憶體風格遊戲。在手機上輕觸正確的卡片，順序正確。

StreamDeck 搭配 Daft Punk Drum Pad 使用

我最愛的 @bramus 使用 WebHID 連線到 StreamDeck，建構 Daft Punk 鼓棒。如果您沒有 StreamDeck，請查看 YouTube 上的示範影片，並查看 GitHub 上的程式碼。

無論使用者是與硬體互動的網站，還是與許多網站互動的硬體，都能取得優勢，因為使用者不需要安裝特殊的驅動程式或軟體。

您可以前往 web.dev/devices 進一步瞭解可以連線的部分裝置，或查看 WebHID、WebNFC 和 Web Serial 的入門指南。

PWA 安裝性條件異動

從一開始，離線支援就一直是漸進式網頁應用程式標準中不可或缺的一環。和其他已安裝的應用程式一樣，使用者期望應用程式可以穩定運作。它應該可以快速運作，而且不應看到離線恐龍的圖案！

我們計劃在今年稍晚關閉一個漏洞，讓有些網站能在沒有離線體驗的情況下通過安裝條件。如果您的 PWA 已有離線體驗，那麼就不必採取任何行動。您不一定要採取任何行動，但否則，就該先新增一項程式碼！

從 Chrome 第 89 版開始，如果 PWA 在離線時無法提供有效回應，開發人員工具中的「問題」分頁下會顯示警告，而 Lighthouse 則會指出發生問題。此外，我們將於今年稍晚 從 Chrome 93 版開始實施違規處置

開發人員工具顯示控制台中的警告訊息。
Chrome 開發人員工具控制台的警告訊息。
開發人員工具在「應用程式」分頁中顯示警告訊息。
「應用程式」分頁中的警告訊息 >「資訊清單」>「安裝性」。

您可以自行決定要提供哪種離線體驗。在理想的情況下，您應盡可能提供最多的使用體驗。但至少也可以簡化為離線備用頁面。

如要進一步瞭解異動內容，以及我們推動這項改變的原因，請參閱「改善漸進式網頁應用程式離線支援偵測」一文。

如果不確定該從何處著手，請參考 Workbox。其中包含一組程式庫，可以為 PWA 支援可在實際工作環境中使用的 Service Worker。或者，對於簡易的離線備用頁面，請參閱「建立離線備用頁面」一文中所需的所有程式碼，您可以直接複製程式碼並貼到網站中。

電腦版的網頁分享和網頁分享目標

如果您的網站允許使用者建立、編輯檔案或與檔案互動，則應使用 Web Share 和 Web Share Target API。這些 API 已在行動裝置上使用一段時間，但現在 ChromeOS 和 Windows 已支援。

透過「網路分享」，使用者可將檔案或資料傳送到裝置上其他已安裝的應用程式，例如透過 Google 相簿將相片分享到 Twitter。

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

如要註冊為目標，讓其他應用程式可以與您分享檔案或資料，請使用 Web Share Target API。

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

如需入門指南，請參閱「透過 Web Share API 整合 OS 共用 UI」和「透過 Web Share Target API 接收共用資料」一文。

其他更新

當然還有許多其他東西。

Chrome 現已允許在 JavaScript 模組中使用頂層 await。

PWA 適用的全新網址列安裝圖示

為避免造成使用者混淆，我們更新了網址列中適用於可安裝 PWA 的圖示。


如果您曾使用信任的網路活動，在 Play 商店為 ChromeOS 提供 PWA，也可以註冊 Digital Goods API 來源試用。

其他資訊

這僅涵蓋部分重點功能。如要瞭解 Chrome 89 的其他變更，請點選下方連結。

訂閱

如要隨時掌握 YouTube 影片的最新消息，然後訂閱我們的 Chrome Developers YouTube 頻道，每當推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage。Chrome 90 推出後，我很樂意立即為您說明 Chrome 的新功能！

抵免額

Raspberry Pis 和 Arduino 的相片是由 Harrison Broadbent on Unsplash 提供