此页面由 Cloud Translation API 翻译。

Chrome 79 的新功能

Pete LePage

Twitter GitHub Glitch Mastodon 首页

Chrome 79 现已推出！

Android 上安装的渐进式 Web 应用现在支持可遮盖式图标。
您现在可以使用 WebXR Device API 创建沉浸式体验。
Wake Lock API 目前处于源试用阶段。
rendersubtree 属性作为源试用提供。
Chrome 开发者峰会上的视频现已可上线。
等等。

我是 Pete LePage，一起来深入了解下 Chrome 79 会为开发者带来哪些新功能吧！

可遮罩图标

如果您运行的是 Android O 或更高版本，并且已安装 Progressive Web App，那么您可能已经注意到图标周围有一个烦人的白色圆圈。

幸运的是，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，请参阅网络虚拟现实问世。

新的源试用

源试用让我们有机会验证实验性功能和 API，并让您能够针对其在更广泛的部署中的易用性和有效性提供反馈。

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

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

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

唤醒锁

关于 Google 幻灯片，我最大的烦恼之一就是如果您在某张幻灯片上长时间打开演示文稿，屏保就会启动。您需要解锁计算机，才能继续。呃，

但是，借助新的 Wake Lock API，页面可以请求锁定，并防止屏幕变暗或屏保启动。它非常适合 Google 幻灯片，但对于食谱网站等方面也很有用，在按照说明操作时，您可能需要让屏幕保持开启状态。

如需请求唤醒锁定，您需要调用 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