此页面由 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 添加快捷方式非常简单，只需在网络应用清单中创建新的 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 Animations API

Chrome 84 向 Web Animations API 添加了一系列之前不受支持的功能。

animation.ready 和 animation.finished 已采用 Promise 形式。
浏览器现在可以清理和移除旧动画，从而节省内存并提升性能。
现在，您可以使用 add 和 accumulate 选项，通过复合模式组合动画。

我实在无法在这里详尽介绍所有改进或提供示例，因此请参阅 Chromium 84 中的 Web Animations API 改进，了解完整详情。

Content Indexing 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',
  }],
});

想查看索引中已有的内容？对服务工作器注册调用 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

我喜欢烹饪，但在按照食谱操作时，屏幕保护程序启动会让我非常沮丧！借助唤醒锁定 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,
});

如需详细了解该 API 以及如何立即开始对其进行实验，请参阅使用 Idle Detection API 检测非活跃用户。

Web Assembly 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 中的新功能！