Chrome 84 的新功能

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

以下是您有必要知道的信息:

我是 Pete LePage,在家工作和拍摄。我们来深入了解一下 Chrome 84 为开发者提供了哪些新功能!

应用图标快捷方式

Twitter PWA 的应用图标快捷方式

利用应用图标快捷方式,用户可轻松快速启动应用中的常见任务。例如,撰写新推文、发送消息或查看其通知。Android 版 Chrome 支持这些浏览器。

长按 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.readyanimation.finished 执行承诺。
  • 浏览器现在可以清理和移除旧的动画,从而节省内存并提升性能。
  • 现在,您可以使用复合模式(通过 addaccumulate 选项)组合动画。

我无法完全体现所有改进,也没法在此处提供好的示例,因此请查看 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',
  }],
});

想查看索引中已有的内容吗?对 Service 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 将支持离线访问的网页编入索引

唤醒锁定 API

Betty Crocker 网站上的唤醒锁定实现。

我喜欢做饭,但是按食谱烹饪会很烦恼 这时屏幕保护程序就派上用场了!借助唤醒锁定 API(已在 Chrome 84 中结束其源试用),网站可以请求唤醒锁定,以防止屏幕变暗和锁定。

事实上,Betty Crocker 网站如今也在使用该 API,并在 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 以及如何立即开始试用。

Web Assembly SIMD

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

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

等等

Chrome 84 是一个大号,不过还有一些其他的重要更新。

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 84 中的其他变化,请点击以下链接。

订阅

如果您想及时了解我们的视频,请订阅我们的 Chrome 开发者 YouTube 频道,这样,每当我们发布新视频时,您都会收到电子邮件通知。

我是 Pete LePage,虽然还是需要理发,但 Chrome 85 发布后,我会立即告诉大家 - Chrome 有什么新变化!