Chrome 89 版的新功能

Chrome 89 即將推出穩定版。

以下是一些注意事項:

我是 Pete LePage,我在家工作並拍攝影片,現在就讓我們一起來看看 Chrome 89 有哪些新功能吧!

WebHID、WebNFC 和 Web Serial

我非常期待 WebHID、WebNFC 和 Web Serial。為使用者開啟前所未曾有的全新情境,讓他們與真實世界的硬體互動。

開發人員可以透過這些 API 連結有趣的硬體和視訊會議應用程式,使用專用喇叭上的專用電話按鈕。或任何其他用途。

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

在 2019 年 CDS 期間,François 使用 Web NFC 編寫了有趣的記憶力遊戲。你必須依照正確順序,將手機輕觸正確的資訊卡。

搭配 Daft Punk 鼓墊的 StreamDeck

我最喜歡的 @bramus 使用 WebHID 連線至 StreamDeck,建立 Daft Punk 鼓墊。如果沒有 StreamDeck,請參閱 YouTube 上的示範影片,並查看 GitHub 上的程式碼

無論是您的網站與硬體互動,或是硬體可與許多網站互動,使用者都不需要安裝特殊驅動程式或軟體,因此可說是雙贏。

如要進一步瞭解可連線的裝置,請前往 web.dev/devices,或查看 WebHIDWebNFCWeb Serial 的入門指南。

PWA 安裝規定變更

從一開始,離線支援功能就是漸進式網頁應用程式可安裝性標準的重要條件。就像其他已安裝的應用程式一樣,使用者會期待應用程式可靠運作。應該要快速,而且絕對不會出現離線恐龍!

我們預計在今年稍晚修補漏洞,以免讓部分網站在沒有離線體驗的情況下,仍能通過可安裝性條件。如果您的 PWA 已提供離線體驗,就表示一切就緒。您不需要採取任何行動,但如果沒有,現在是時候新增了!

自 Chrome 89 起,如果您的 PWA 在離線時未提供有效回應,您會在「Issues」分頁的開發人員工具中看到警告,而 Lighthouse 也會指出問題。今年稍晚推出的 Chrome 93 版將開始實施這項政策。

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

您可以決定要提供哪種離線體驗。理想情況下,您應盡可能提供體驗。但至少可以像離線備用網頁一樣簡單。

如要進一步瞭解這項異動以及異動原因,請參閱「改善漸進式網頁應用程式離線支援偵測功能」。

如果不確定要從何處著手,請參閱 Workbox。其中包含一組程式庫,可為 PWA 提供可供正式發布的服務工作者。如要建立簡單的離線備用網頁,請參閱「建立離線備用網頁」一文,其中有您需要的所有程式碼,您可以直接複製並貼到網站中。

電腦版的「分享至網路」和「分享至網路」目標

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

使用者可透過 Web Share 將檔案或資料傳送至裝置上已安裝的其他應用程式,例如將 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 中的其他異動。

訂閱

如要隨時掌握最新影片,請訂閱 Chrome 開發人員 YouTube 頻道,這樣一來,我們發布新影片時,你就會收到電子郵件通知。

我是 Pete LePage,Chrome 90 一推出,我就會在這裡告訴你 Chrome 有哪些新功能!

抵免額

Raspberry Pi 和 Arduino 的相片由 Harrison Broadbent 在 Unsplash 上提供