Chrome 85 版的新功能

Pete LePage

Chrome 85 穩定版現已開始推出。

以下是一些注意事項：

我是 Pete LePage，在家工作並拍攝影片。現在就讓我們一起來看看 Chrome 85 有哪些新功能吧！

內容瀏覽權限

瀏覽器算繪程序

將 HTML 轉換為使用者可見的內容時，瀏覽器必須經過多個步驟，才能繪製第一個像素。而且，這項作業會套用至整個網頁，甚至是可視區域中看不到的內容。

將 content-visibility: auto 套用至元素，可讓瀏覽器在捲動至檢視區之前，略過該元素的算繪作業，進而加快初始算繪作業。


.my-class {
  content-visibility: auto;
}

如要充分發揮 content-visibility 的效用，請將其套用至具有較複雜版面配置演算法的父項，例如 flexbox 和 grid，或是具有包含自身版面配置的子項。

透過切割內容並新增 content-visibility: auto;，這個網頁的算繪時間從 232 毫秒縮短為 30 毫秒。

請參閱內容顯示設定，瞭解如何運用這項設定來改善算繪效能。

@property 和 CSS 變數

CSS 變數 (技術上稱為自訂屬性) 非常實用。您可以使用 Houdini CSS 屬性和值 API，為自訂屬性定義類型和預設備用值。我在 Chrome 78 的新功能一文中曾介紹這些元素，當時我們新增了在 JavaScript 中定義這些元素的支援功能。

自 Chrome 85 起，您也可以直接在 CSS 中定義及設定 CSS 屬性。我喜歡 CSS 屬性的原因是，它可提供屬性語意意義、備用值，甚至可啟用 CSS 測試。

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una 曾撰寫一篇很棒的文章「@property：讓 CSS 變數發揮超能力」，說明如何使用這些變數。

取得已安裝的相關應用程式

getInstalledRelatedApps() API 可讓您檢查您的應用程式是否已安裝，然後自訂使用者體驗。

舉例來說，如果使用者已安裝應用程式，您可以在到達網頁上向他們顯示不同的內容。將重疊的功能集中在單一應用程式中，以免造成混淆。或者，如果原生應用程式已安裝，請勿宣傳 PWA 的安裝作業。

這項功能最初在 Chrome 80 中推出時，僅適用於 Android 應用程式。如今，Android 也能檢查是否已安裝 PWA。而且，在 Windows 上，它可以檢查是否已安裝 Windows UWP 應用程式。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

請參閱我的文章「你的應用程式是否已安裝？getInstalledRelatedApps() 會告訴您！請前往 web.dev 瞭解其運作方式，以及如何簽署應用程式以證明這些應用程式屬於您。

應用程式圖示捷徑

Windows 上的應用程式圖示捷徑

在 Chrome 84 中，我們新增了對應用程式圖示捷徑的支援。我誤以為這項功能適用於所有地區，但其實只適用於 Android。如今，Chrome 85 已支援 Android 和 Windows 版 Chrome 和 Edge 瀏覽器。


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

如需完整詳細資料，請參閱 web.dev 上的「應用程式圖示捷徑」一文。很抱歉造成你的困惑。

來源測試：使用 fetch() 進行串流要求

自 Chrome 85 版起，fetch 上傳串流功能已可做為來源測試。讓您在要求主體準備就緒前開始擷取。先前，您必須先準備好整個內容，才能開始要求。但現在，即使您仍在產生內容，也可以開始傳送內容。

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

例如，您可以使用這項功能暖機伺服器，或在麥克風或攝影機擷取音訊或影像時進行串流。

Jake 在 web.dev 的「使用 fetch API 串流傳送要求」一文中深入探討這項技術，並在最新的 HTTP203 - 使用 fetch 串流傳送要求 影片中進一步說明。

其他

當然，還有更多功能。

Promise.any 會傳回一個承諾，該承諾會由第一個指定的承諾來履行或拒絕。

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

使用 .replaceAll() 更容易取代字串中的所有例項，不必再使用規則運算式！

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 新增了對 AVIF 的解碼支援，這是一種使用 AV1 編碼的圖片格式，並由 Alliance for Open Media 標準化。與 JPEG 和 WebP 相比，AVIF 可提供顯著的壓縮效益。根據最近的 Netflix 研究，與標準 JPEG 相比，AVIF 可節省 50% 的檔案大小，而 4:4:4 內容的節省幅度則超過 60%。

AppCache 移除作業已開始。

延伸閱讀

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

訂閱

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

我是 Pete LePage，我終於去理髮了！

只要 Chrome 86 一推出，我就會在這裡告訴你 Chrome 的新功能！