本頁面由 Cloud Translation API 翻譯而成。

Chrome 84 版的新功能

Pete LePage

Chrome 84 即將推出穩定版。

以下是一些注意事項：

使用者可以透過應用程式圖示捷徑，在應用程式中啟動常見工作。
Web Animations API 新增了對許多先前不支援的功能的支援。
喚醒鎖定可防止螢幕調暗或鎖定。
Content Indexing API 可協助顯示離線內容。
閒置偵測和 Web Assembly SIMD 有新的來源試用功能。
SameSite Cookie 政策異動已開始再次推出。
以及更多。

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

應用程式圖示捷徑

應用程式圖示捷徑可讓使用者輕鬆在應用程式中快速開始執行常見的作業，例如撰寫新推文、傳送訊息或查看通知。這些功能在 Android 版 Chrome 中受支援。

只要在 Android 裝置上長按應用程式圖示，即可叫用這些捷徑。為 PWA 新增捷徑很簡單，只要在網頁應用程式資訊清單中建立新的 shortcuts 屬性、說明捷徑，然後新增圖示即可。

"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 動畫 API

Chrome 84 為 Web Animations API 新增了許多先前不支援的功能。

animation.ready 和 animation.finished 已轉換為 Promise。
瀏覽器現在可以清理並移除舊動畫，節省記憶體並改善效能。
您現在可以使用 add 和 accumulate 選項，透過合成模式結合動畫。

我實在無法在這裡說明所有改善項目或提供良好範例，因此請參閱 Chromium 84 中的 Web Animations API 改善項目，瞭解完整詳情。

內容索引 API

如要提供離線內容，但使用者不知道嗎？這項功能真的可用嗎？發現問題！

您可以使用剛從原始測試階段畢業的 Content Indexing API，為離線可用的內容新增網址和中繼資料。系統會使用該結構描述資料，向使用者顯示內容，進而提升可發現度。

如要在索引中新增內容，請在服務工作者註冊時呼叫 index.add()，並提供內容的必要中繼資料。

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

想查看索引中已有哪些內容嗎？在服務 worker 註冊上呼叫 index.getAll()。

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

詳情請參閱「使用 Content Indexing API 為可離線的網頁建立索引」。

Wake Lock API

我喜歡下廚，但我發現在依照食譜做菜時，螢幕保護程式會啟動，讓人感到非常沮喪！透過 Wake Lock API (在 Chrome 84 的初始測試中也已完成測試)，網站可以要求 Wake Lock，以防止螢幕調低亮度和鎖定。

事實上，Betty Crocker 網站目前正在使用這項功能，並在 web.dev 上發布個案研究，顯示購買意願指標增加了 300%。

如要取得喚醒鎖定，請呼叫 navigator.wakeLock.request()，它會傳回 WakeLockSentinel 物件，用於「釋放」喚醒鎖定。

// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

當然，這還涉及其他一些問題，請參閱「使用 Screen Wake Lock API 保持喚醒狀態」一文。不過，至少我的螢幕不會再沾滿麵粉了！

來源試用

我想提及兩項新的來源測試。如果您不熟悉來源試用功能，請參閱「開始使用 Chrome 的來源試用功能」一文。

閒置偵測

當使用者處於閒置狀態時，Idle Detection API 會通知您，表示使用者可能已離開電腦。這項功能非常適合用於聊天應用程式或社群網站，讓使用者知道聯絡人是否可用。

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

請參閱「使用閒置偵測 API 偵測閒置使用者」，進一步瞭解 API 的相關資訊，並瞭解如何立即開始嘗試使用。

Web Assembly SIMD

Web Assembly SIMD 會開始原點試驗。它會引入作業，將硬體中常用的 SIMD 指令對應至硬體。SIMD 運算可用於提升效能，尤其是在多媒體應用程式中。

如要進一步瞭解 WebAssembly SIMD，請參閱「使用 WebAssembly SIMD 打造快速並行應用程式」。

其他

Chrome 84 是重大更新，但還有幾項重要更新值得一提。

我們將逐步推出 SameSite Cookie 異動。
含有濫用權限要求或濫用通知的網站，會自動加入低擾式通知 UI。
QuicTransport 推出了新的原點測試。

延伸閱讀

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

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

我是 Pete LePage，我還是需要理髮，但 Chrome 85 一推出，我就會在這裡告訴你 Chrome 的新功能！