Chrome 107 新功能

Adriana Jara

以下是一些注意事項：

我是 Adriana Jara，讓我們深入瞭解 Chrome 107 為開發人員帶來哪些新功能。

Screen Capture API 的新屬性

在這個版本中，Screen Capture API 新增了新的屬性，以改善螢幕分享體驗。

DisplayMediaStreamOptions 已加入 selfBrowserSurface 屬性。有了這個提示，應用程式就能在呼叫 getDisplayMedia() 時告訴瀏覽器，應排除目前的分頁。

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

這有助於避免意外拍到自己，並避免出現我們在視訊會議中看到的「鏡廳」效果。

DisplayMediaStreamOptions 現在也具有 surfaceSwitching 屬性。這個屬性會新增一個選項，可透過程式輔助方式控制 Chrome 在分享螢幕畫面時，是否要顯示切換分頁的按鈕。這些選項會傳遞至 getDisplayMedia()。Share this tab instead 按鈕可讓使用者切換至新分頁，而無須返回視訊會議分頁或從長長的分頁清單中選取，但如果網路應用程式未處理這項行為，則會以條件式方式顯示。

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

此外，MediaTrackConstraintSet 會新增屬性 displaySurface。呼叫 getDisplayMedia() 時，瀏覽器會提供使用者選擇顯示介面：分頁、視窗或螢幕。使用 displaySurface 限制後，網頁應用程式現在可以向瀏覽器提示，指出應優先提供哪一種途徑類型。

舉例來說，這項功能可避免你不小心過度分享，因為預設情況下，系統會以單一分頁的形式分享內容。 舊版和新版媒體挑選器提示的螢幕截圖。

找出會妨礙顯示的資源

開發人員必須掌握可靠的網頁效能洞察資料，才能打造快速的使用者體驗，而他們目前只能依靠複雜的經驗法則，判斷資源是否會造成轉譯阻斷。

現在，Performance API 包含 renderBlockingStatus 屬性，可提供瀏覽器的直接信號，用於識別會阻止網頁顯示的資源，直到這些資源下載完成為止。

以下程式碼片段說明如何取得所有資源的清單，並使用新的 renderBlockingStatus 屬性，列出所有會造成轉譯阻斷的資源。

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

改善資源載入方式有助於提升 Core Web Vitals 和使用者體驗。請參閱 MDN 文件，進一步瞭解 Performance API，找出會阻斷轉譯的資源，並加以改善。

待處理的 Beacon API 來源試用

宣告式 PendingBeacon API 可讓瀏覽器控制發送信標的時機。

信標是傳送至後端伺服器的資料組合，不會期待特定回應。

應用程式通常會在使用者造訪結束時傳送這些信標，但並沒有適合發出「send」呼叫的時機。這個 API 會將傳送作業委派給瀏覽器本身，因此可支援 page unload 或 page hide 上的信標，開發人員不必在正確的時間實作傳送呼叫。

報名參加來源試用計畫，試用 API，並提供意見回饋，協助我們改善用途。

還有更多獎品等著您！

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

  • expect-ct http 標頭已淘汰。
  • <form> 元素現已支援 rel 屬性。
  • 上次我提到 grid-template 插補，這次應該要納入。

延伸閱讀

這份報告僅涵蓋部分重點。請參閱下列連結，瞭解 Chrome 107 的其他異動。

訂閱

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

我是 Adriana Jara，Chrome 108 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！