本頁面由 Cloud Translation API 翻譯而成。

Chrome 95 版的新功能

Pete LePage

以下是一些注意事項：

瀏覽器內建 URLPattern，讓路線規劃更輕鬆。
Eye Dropper API 提供內建工具，可選取顏色。
我們推出新的原始碼試用計畫，讓您現在就能選擇接收縮減的 UA 字串。
PWA 高峰會影片已全數上線。
還有許多其他功能。

我是 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 brings routing to the web platform」！

使用 Eye Dropper API 挑選顏色

我用過的設計應用程式幾乎都有滴管工具，方便找出某個項目的顏色。部分瀏覽器在 <input type=color> 中內建滴管功能，但並非理想做法。

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

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

與許多其他現代網頁 API 相同，這項 API 會以非同步方式運作，因此不會阻斷主執行緒。使用者點選所需顏色後，系統就會解析出該顏色。

PWA 峰會

您是否在本月初參加了 PWA 峰會？

很高興看到這麼多人討論 PWA，並分享使用體驗。如果你錯過了，所有影片都已上傳，請務必前往 PWASummit.org 或 PWA Summit YouTube 頻道觀看。

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

縮減使用者代理程式是為了減少被動式數位指紋採集介面，方法是減少使用者代理程式字串中的資訊，只保留瀏覽器品牌和重要版本、電腦或行動裝置的區別，以及執行的平台。

從 Chrome 95 版開始，我們提供新的來源試用，讓您選擇立即接收縮減的 UA 字串。這樣您就能在 Chrome 將減少的 UA 設為預設行為前，找出並修正問題。

這些變更會在多個版本中逐步套用，但您現在即可準備及測試所有必要項目。

如要瞭解所有詳細資料和時間軸，請參閱 developer.chrome.com 上的「使用者代理程式縮減原始試用」一文。

還有其他眾多資源！

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

如果您一直關注 Storage Foundation API 的開發工作，現在有新的 Access Handles 來源試用。
WebAssembly 現在提供例外狀況處理支援，可讓程式碼在擲回例外狀況時中斷控制流程。
Chrome 100 版將於明年推出。也就是說，現在請務必確保您的程式碼可以處理超過兩位數！

延伸閱讀

這僅涵蓋部分重點。如要瞭解 Chrome 95 的其他異動，請參閱下方連結。

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

我是 Pete LePage，Chrome 96 版一推出，我會立即為你介紹新功能！

Chrome 95 版的新功能 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

使用「URLPattern」規劃路線