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

Chrome 84 版的新功能

Pete LePage

Chrome 第 84 版即將推出穩定版。

以下是一些注意事項：

使用者可以透過應用程式圖示捷徑，在應用程式中啟動常見工作。
Web Animations API 開始支援部分先前不支援的功能。
Wake Lock 可防止螢幕變暗或鎖定。
Content Indexing API 會顯示可離線觀看的內容。
閒置偵測和 Web Assembly SIMD 有新的來源試用功能。
相同網站 Cookie 政策的異動將再次生效。
還有更多功能。

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

應用程式圖示捷徑

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

只要在 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" }
    ]
  },
]

詳情請參閱「使用應用程式快速指令快速處理大小事務」。

網路動畫 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

我喜歡下廚，但我發現在依照食譜做菜時，螢幕保護程式會啟動，讓人感到非常沮喪！使用 Chrome 84 版來源試用的 Wake Lock API，網站可以要求 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，請參閱使用 Idle Detection API 偵測不活躍使用者。

Web 組件 SIMD

此外，Web Assembly SIMD 會啟動來源試用。其中導入了可對應至硬體中常見 SIMD 指示的作業。SIMD 作業是用來提高效能，特別是在多媒體應用程式中。

如要進一步瞭解 WebAssembly SIMD，請參閱「運用 WebAssembly SIMD 建構快速的平行應用程式」。

其他

Chrome 84 的尺寸相當龐大，但還有一些其他重要更新值得一提。

我們將逐步恢復SameSite Cookie 異動。
針對收到濫用權限要求或濫用通知的網站，系統會自動將其註冊到對等通知使用者介面中。
QuicTransport 提供新的來源試用。

延伸閱讀

這只涵蓋部分重點功能。請參閱下方連結，瞭解 Chrome 84 中的其他變更。

想隨時掌握最新消息，再訂閱我們的 Chrome 開發人員 YouTube 頻道，每當我們推出新影片時，您會收到電子郵件通知。

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