以下是一些注意事項:
- 將
URLPattern
整合至瀏覽器,讓路線規劃更加輕鬆。 - Eye Dropper API 提供可用來選取色彩的內建工具。
- 有新的來源試用可讓您選擇立即接收縮減後的通用 Analytics (分析) 字串。
- 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 提供網路平台的轉送功能。
使用 Eye Dropper API 挑選顏色
我用過的所有設計應用程式都含有一個取景工具,方便您輕鬆瞭解什麼顏色。某些瀏覽器在 <input type=color>
中內建了滴管功能,但還是不太理想。
由 Microsoft 部分人員實作的 eye 植入程式 API,將其功能帶到網路上。如要使用,請建立新的 EyeDropper()
執行個體,然後在該例項上呼叫 open()
。
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
如同許多其他新型網路 API,它會以非同步方式運作,因此不會封鎖主執行緒。使用者按一下想要的顏色後,顏色就會消失。
您可以先試用快速示範,也可以在 Glitch 中查看程式碼。
PWA 高峰會
你本月稍早參加 PWA 高峰會嗎?
看到許多人在談論 PWA 及分享自身經驗,真是太棒了。如果您錯過任何影片,請務必前往 PWASummit.org 或 PWA Summit YouTube 頻道觀看。
使用者代理程式縮減來源試用
User-Agent Reduction 將 User-Agent 字串中的資訊縮減為僅包含瀏覽器的品牌和主要版本、電腦版或行動裝置差異,以及執行平台,進而減少被動指紋列印介面。
從 Chrome 95 版開始,我們推出了新的來源試用,可讓您選擇立即接收縮減的通用 Analytics (分析) 字串。如此一來,您就能在縮短的通用 Analytics (分析) 成為 Chrome 的預設行為之前,發現並修正問題。
相關變更將逐步套用至多個版本,但您可以立即準備及測試所有必要內容。
所有詳細資訊和時程都已列於 developer.chrome.com 的「User-Agent Reduction 來源試用」文章中。
還有更多獎品等著您!
當然還有許多其他東西。
- 如果您已按照 Storage Foundation API 的運作方式完成相關作業,我們準備了新的存取帳號代碼來源試用。
- WebAssembly 現在提供例外狀況處理支援,允許程式碼在擲回例外狀況時中斷控制流程。
- Chrome 100 將於明年推出。這表示該確保程式碼可處理超過兩位數數字!
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 95 版的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (95)
- Chrome 95 淘汰或移除
- 適用於 Chrome 95 的 ChromeStatus.com 更新
- Chrome 95 版 JavaScript 新功能
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道。每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,只要 Chrome 96 版推出,我就會在這裡為您提供 Chrome 的新功能!