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 Properties 和 Values API，定義自訂屬性的類型和備用值。先前我們支援以 JavaScript 定義這些函式時，我曾提到 Chrome 78 版的新功能 介紹的相關內容。

從 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,
});

舉例來說，您可以使用此 API 為伺服器暖機，或串流從麥克風或相機擷取的音訊或視訊。

Jake 將深入介紹 on web.dev 的使用擷取 API 串流要求，並在最新的「HTTP203 - 串流要求與擷取作業」影片中說明。

其他更新

當然，還有許多應用程式等著您。

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，AVIF 是採用 AV1 編碼的圖片格式，並由 Open Media 適用的聯盟進行標準化。近期的 Netflix 研究顯示，與 JPEG 和 WebP 相比，AVIF 可大幅提升壓縮效率。與標準 JPEG 相比，前者可省下 50% 的費用，更可省下 60% 的 4:4:4 內容。

我們已開始移除 AppCache。

其他資訊

這份文件僅涵蓋部分重點功能。請查看下方連結，瞭解 Chrome 85 版的其他異動。

訂閱

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

我是 Pete LePage，最後開始剪髮！

Chrome 86 推出後，我會在這裡通知您，Chrome 有哪些新功能！