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 包含轉譯封鎖狀態屬性，可直接在瀏覽器中提供信號，識別導致網頁無法顯示的資源，直到使用者下載為止。

這裡的程式碼片段說明如何取得所有資源的清單，並使用新的轉譯封鎖狀態屬性，列出所有使用轉譯封鎖的資源。

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

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

最佳化資源載入方式有助於改善網站體驗核心指標，並提供更優質的使用者體驗。請參閱 MDN 說明文件，進一步瞭解 Performance API、尋找這些算繪封鎖資源，並進行最佳化。

PendingBeacon API 來源試用

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

信標是傳送至後端伺服器的資料組合，其中沒有收到特定回應。

應用程式通常希望在使用者造訪的結束時傳送這些信標，但目前沒有適合用來「傳送」呼叫的適當時機。這個 API 會將傳送內容委派給瀏覽器本身，因此可以支援 page unload 或 page hide 上的信標，無需開發人員在正確的時間執行傳送呼叫。

申請來源試用，試用 API 並提供意見回饋，讓我們能改善這項用途。

還有更多獎品等著您！

當然還有許多其他事物。

  • expect-ct HTTP 標頭已淘汰。
  • <form> 元素現在支援 rel 屬性。
  • 我上次提到grid-template內插類型，這次應納入。

其他資訊

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 107 的其他變更，請點選下方連結。

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Adriana Jara。Chrome 108 推出後，我馬上就能 為您介紹 Chrome 的新功能！