此页面由 Cloud Translation API 翻译。

Chrome 84 的新功能

Pete LePage

Chrome 84 现已开始面向稳定版发布。

以下是您需要知晓的相关信息：

用户可以使用应用图标快捷方式在您的应用中启动常规任务。
Web Animations API 添加了对许多以前不受支持的功能的支持。
唤醒锁定可以防止屏幕变暗或锁定。
Content Indexing API 有助于显示可离线访问的内容。
有针对空闲检测和 Web Assembly SIMD 的新源试用。
同一网站 Cookie 政策方面的变更将重新开始实施。
更多。

我是 Pete LePage，在家办公和录制视频。我们来深入了解一下 Chrome 84 中面向开发者的新功能吧！

应用图标快捷方式

借助应用图标快捷方式，用户可以轻松在您的应用中快速启动常用任务，例如撰写新推文、发送消息或查看通知。Chrome 浏览器（Android 版）支持这些功能。

在 Android 设备上，长按应用图标即可调用这些快捷方式。向 PWA 添加快捷方式很简单，只需在 Web 应用清单中创建新的 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 改进，了解完整详情。

Content Indexing API

您的内容可以在没有网络连接的情况下播放。但用户并不知道？真的可以吗？发现问题！

借助刚刚从最初试用阶段升级的 Content Indexing API，您可以为可离线访问的内容添加网址和元数据。然后，利用该元数据将内容呈现给用户，从而提高可检测性。

如需将内容添加到索引中，请对 Service Worker 注册调用 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',
  }],
});

想查看索引中已有的内容？对服务工作器注册调用 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 将支持离线功能的网页编入索引。

唤醒锁定 API

我喜欢烹饪，但在按照食谱操作时，屏幕保护程序启动会让我非常沮丧！借助 wake lock API（也从 Chrome 84 的原始试用版结束下来），网站可以请求唤醒锁定以防止屏幕调暗和锁定。

事实上，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,
});

请参阅使用 Idle Detection API 检测非活跃用户，详细了解该 API 以及如何立即开始试用。

WebAssembly SIMD

Web Assembly SIMD 会启动源试用。它引入了映射到硬件中常用的 SIMD 指令的操作。SIMD 操作用于提高性能，尤其是在多媒体应用中。

如需详细了解 WebAssembly SIMD，请参阅使用 WebAssembly SIMD 的快速并行应用。

等等

Chrome 84 很重要，但我还要指出一些其他重要更新。

我们将恢复逐步推出 SameSite Cookie 变更。
发出滥用权限请求或滥发通知的网站将自动加入干扰性更低的通知界面。
QuicTransport 推出了新的源试用。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 84 中的其他变更，请点击以下链接。

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，我还需要理发，但 Chrome 85 一发布，我就会立即为您介绍 Chrome 中的新功能！