Chrome 89 即將推出穩定版。
以下是一些注意事項:
- WebHID、WebNFC 和 Web Serial 已完成原始測試,現在已推出穩定版。
- 我們將堵住漏洞,以免部分開發人員規避 PWA 安裝規定檢查。
- 網頁分享和網頁分享目標功能已在電腦版上推出。
- 還有更多功能。
我是 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 編寫了有趣的記憶力遊戲。你必須依照正確順序,將手機輕觸正確的資訊卡。
我最喜歡的 @bramus 使用 WebHID 連線至 StreamDeck,建立 Daft Punk 鼓墊。如果沒有 StreamDeck,請參閱 YouTube 上的示範影片,並查看 GitHub 上的程式碼。
無論是您的網站與硬體互動,或是硬體可與許多網站互動,使用者都不需要安裝特殊驅動程式或軟體,因此可說是雙贏。
如要進一步瞭解可連線的裝置,請前往 web.dev/devices,或查看 WebHID、WebNFC 和 Web Serial 的入門指南。
PWA 安裝規定變更
從一開始,離線支援功能就是漸進式網頁應用程式可安裝性標準的重要條件。就像其他已安裝的應用程式一樣,使用者會期待應用程式可靠運作。應該要快速,而且絕對不會出現離線恐龍!
我們預計在今年稍晚修補漏洞,以免讓部分網站在沒有離線體驗的情況下,仍能通過可安裝性條件。如果您的 PWA 已提供離線體驗,就表示一切就緒。您不需要採取任何行動,但如果沒有,現在是時候新增了!
自 Chrome 89 起,如果您的 PWA 在離線時未提供有效回應,您會在「Issues」分頁的開發人員工具中看到警告,而 Lighthouse 也會指出問題。今年稍晚推出的 Chrome 93 版將開始實施這項政策。
您可以決定要提供哪種離線體驗。理想情況下,您應盡可能提供體驗。但至少可以像離線備用網頁一樣簡單。
如要進一步瞭解這項異動以及異動原因,請參閱「改善漸進式網頁應用程式離線支援偵測功能」。
如果不確定要從何處著手,請參閱 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 在網址列中顯示的圖示。
如果您已使用信任的網頁活動,讓 Play 商店適用於 ChromeOS 的 PWA 可供使用,可以註冊 Digital Goods API 來源試用版。
延伸閱讀
這份文件僅涵蓋部分重點。請參閱下方連結,瞭解 Chrome 89 中的其他異動。
- Chrome 開發人員工具 (89 版) 的新功能
- Chrome 89 淘汰與移除項目
- Chrome 88 的 ChromeStatus.com 更新
- Chrome 88 中的 JavaScript 新功能
- Chromium 來源存放區變更清單
訂閱
如要隨時掌握最新影片,請訂閱 Chrome 開發人員 YouTube 頻道,這樣一來,我們發布新影片時,你就會收到電子郵件通知。
我是 Pete LePage,Chrome 90 一推出,我就會在這裡告訴你 Chrome 有哪些新功能!
抵免額
Raspberry Pi 和 Arduino 的相片由 Harrison Broadbent 在 Unsplash 上提供