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"}, ...},
//   ...
// }

根據預設，URLPattern 會在 Chrome 和 Edge 95 以上版本中啟用。 對於尚未支援的瀏覽器或環境 (例如 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 字串。如此一來，您就可以在受影響的通用 Analytics 成為 Chrome 的預設行為前找到並修正問題。

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

如需所有詳細資訊和時間表，請參閱 developer.chrome.com 上的「使用者代理程式縮減來源試用」文章。

還有更多獎品等著您！

當然，還有更多功能。

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

延伸閱讀

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

訂閱

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

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