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 上的「使用者代理程式縮減來源測試」文章中。

還有更多獎品等著您！

當然，還有更多功能。

延伸閱讀

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

訂閱

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

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