Chrome 79 的新功能

Pete LePage

Chrome 79 现已发布！

我是 Pete LePage，让我们深入了解 Chrome 79 中面向开发者的新变化！

可遮盖式图标

如果您使用的是 Android O 或更高版本，并且已安装渐进式 Web 应用，那么您可能已经注意到图标周围有令人讨厌的白色圆圈。

幸运的是，Chrome 79 现在支持为已安装的渐进式 Web 应用设计可蒙版的图标。您需要将图标设计为适合放置在安全区域内，该区域本质上是一个直径为画布 80% 的圆圈。

然后，在 Web 应用清单中，您需要为图标添加新的 purpose 属性，并将其值设为 maskable。


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes 在 CSS Tricks 上发表了一篇很棒的文章 - Maskable Icons: Android Adaptive Icons for Your PWA，其中包含所有详细信息，并提供了一款很棒的工具，可用于测试图标以确保其适用。

Web XR

现在，您可以使用 WebXR Device API 为智能手机和头戴式显示屏打造沉浸式体验。

WebXR 支持各种沉浸式体验。从在购买前使用增强现实技术查看新沙发在家中的效果，到虚拟现实游戏和 360 度电影等，不一而足。

如需开始使用新 API，请参阅虚拟现实技术登陆 Web。

新的来源试用

通过源代码试用，我们可以验证实验性功能和 API，您也可以就这些功能在更广泛部署中的易用性和有效性提供反馈。

实验性功能通常仅在启用标志后可用，但当我们针对某项功能提供初始试用时，您可以注册该初始试用，为您源站上的所有用户启用该功能。

通过选择参与源试用，您可以构建演示版和原型，让您的 Beta 版测试用户可以在试用期间试用，而无需在 Chrome 中切换任何特殊标志。

如需详细了解源代码试用，请参阅面向 Web 开发者的源代码试用指南。您可以在 Chrome 源代码试用页面上查看正在进行的源代码试用列表，并注册参与这些试用。

唤醒锁定

我对 Google 幻灯片最不满意的地方之一是，如果演示文稿在单个幻灯片上停留的时间过长，系统就会启动屏保。您需要先解锁计算机，然后才能继续。唉。

不过，借助新的 Wake Lock API，网页可以请求锁定，并防止屏幕变暗或启动屏幕保护程序。此功能非常适合幻灯片，但对于食谱网站等内容也非常有用，因为您可能希望在按照说明操作时让屏幕保持开启状态。

如需请求唤醒锁定，您需要调用 navigator.wakeLock.request()，并保存它返回的 WakeLockSentinel 对象。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

锁定状态会一直保持，直到用户离开该页面，或者您对之前保存的 WakeLockSentinel 对象调用 release。

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

如需了解详情，请访问 web.dev/wakelock。

rendersubtree 个属性

有时，您不希望部分 DOM 立即呈现。例如，包含大量内容的滚动条，或在任何给定时间都仅显示部分内容的标签页式界面。

新的 rendersubtree 属性会告知浏览器可以跳过渲染该子树。这样，浏览器就可以花更多时间处理页面的其余部分，从而提高性能。

将 rendersubtree 设置为 invisible 后，系统不会绘制或进行点击测试元素的内容，从而实现渲染优化。

将 rendersubtree 更改为 activatable，通过移除 invisible 属性并渲染内容，使内容可见。

2019 年 Chrome 开发者峰会

如果您错过了 Chrome 开发者峰会，可以访问我们的 YouTube 频道观看所有演讲。

Jake 还写了一篇精彩的 Twitter 会话，其中包含讲座期间发生的所有有趣的事情，包括我们团队的最新成员 Surjiko。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 78 中的其他变更，请点击以下链接。

订阅

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

我是 Pete LePage，Chrome 80 发布后，我会立即为您介绍 Chrome 中的新变化！