Chrome 95 版的新功能

Pete LePage

以下是一些注意事項：

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

使用 URLPattern 進行路由

幾乎所有網頁應用程式都會以某種方式依賴路由，無論是執行在伺服器上的程式碼 (將磁碟上的檔案對應至路徑)，或是單頁應用程式中的邏輯 (在網址變更時更新 DOM) 皆是如此。URLPattern 是新的網路平台 API，可將路由模式語法標準化。

這項服務建立在現有架構的基礎上，可讓您更輕鬆地執行常見的路由工作。例如，比對完整網址或網址路徑，然後傳回符記和群組比對結果的相關資訊。

如果您已熟悉 Express、Ruby on Rails 或 path-to-regexp 中使用的路由語法，這可能會讓您覺得熟悉。

如要使用此功能，請建立新的 URLPattern()，並提供您要比對模式的詳細資料。模式可包含萬用字元、命名符記群組、規則運算式群組和群組修飾符。

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

舉例來說，我們來看看 Google 文件可能會使用的 URLPattern。我們會指定檔案的 kind、檔案 ID，以及要用哪個 mode 開啟檔案。接著，我們可以呼叫 test() 或 exec() 來使用模式。

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

根據預設，Chrome 和 Edge 95 以上版本會啟用 URLPattern。對於尚未支援的瀏覽器或環境 (例如 Node)，您可以使用 urlpattern-polyfill 程式庫。

詳情請參閱 Jeff 的文章「URLPattern 為網頁平台提供路由功能」！

使用 Eye Dropper API 挑選顏色

我用過的幾乎所有設計應用程式都有滴管工具，可讓您輕鬆找出某個項目的顏色。部分瀏覽器在 <input type=color> 中內建滴管功能，但這不是理想做法。

微軟的部分人員實作了滴管 API，將這項功能帶入網路。如要使用它，請建立新的 EyeDropper() 例項，然後對其呼叫 open()。

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

與許多其他新型網頁 API 一樣，這個 API 會以非同步方式運作，因此不會阻斷主執行緒。使用者點選所需顏色時，系統會以他們點選的顏色解析。

您可以試用快速示範，並查看 Glitch 上的程式碼。

PWA 高峰會

你有參加本月初的 PWA 大會嗎？

很高興看到許多人討論 PWA 並分享相關經驗。如果你錯過了，別擔心，影片都已上傳，請務必前往 PWASummit.org 或 PWA Summit YouTube 頻道觀看。

使用者代理程式縮減來源試驗

User-Agent 縮減是為了減少被動式數位指紋的途徑，將 User-Agent 字串中的資訊縮減至瀏覽器品牌和主要版本、電腦或行動裝置的區別，以及執行的平台。

自 Chrome 95 版起，我們推出了新的來源試用功能，讓您選擇接收縮減的 UA 字串。這樣一來，您就能在 Chrome 將縮減的使用者代理程式設為預設行為前，先找出並修正問題。

這些變更將逐步套用至多個版本，但您現在就能準備和測試所有相關項目。

所有詳細資料和時間表都收錄在 developer.chrome.com 的「使用者代理程式縮減來源測試」文章中。

還有更多獎品等著您！

當然，還有許多其他功能。

  • 如果您一直在追蹤 Storage Foundation API 的相關工作，請注意，我們推出了新的存取句柄來源試用版。
  • WebAssembly 現在提供例外狀況處理支援，可在發生例外狀況時中斷程式碼的控制流程。
  • Chrome 100 將於明年推出。也就是說，您必須確保程式碼可處理超過 兩 位數！

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 95 的其他變更。

訂閱

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

我是 Pete LePage，Chrome 96 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！