Chrome 76 中的新功能

Pete LePage

在 Chrome 76 中，我们添加了对以下内容的支持：

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

PWA 多功能框安装按钮

在 Chrome 76 中，我们在地址栏（有时也称为全能搜索框）中添加了安装按钮，以便用户更轻松地在桌面设备上安装渐进式 Web 应用。

如果您的网站符合渐进式 Web 应用可安装性条件，Chrome 会在万能搜索框中显示一个安装按钮，以向用户表明您的 PWA 可供安装。如果用户点击安装按钮，这在本质上与对 beforeinstallprompt 事件调用 prompt() 相同；它会显示安装对话框，以便用户轻松安装您的 PWA。

如需了解完整详情，请参阅桌面设备上的渐进式 Web 应用的地址栏安装。


更好地控制 PWA 迷你信息栏

AirHorner 的“添加到主屏幕”迷你信息栏示例

在移动设备上，如果您的网站符合渐进式网络应用可安装性条件，当用户首次访问该网站时，Chrome 会显示迷你信息栏。您曾向我们反映，希望能够阻止显示迷你信息栏，并改为提供自己的安装促销活动。

从 Chrome 76 开始，对 beforeinstallprompt 事件调用 preventDefault() 会停止显示迷你信息栏。

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

请务必更新界面，以便用户知道可以安装您的 PWA。 如需了解我们推荐的有关促进用户安装渐进式 Web 应用的最佳实践，请参阅促进 PWA 安装的模式。

WebAPK 更新速度更快

在 Android 设备上安装渐进式 Web 应用时，Chrome 会自动请求并安装 Web APK。安装后，Chrome 会定期检查 Web 应用清单是否发生了变化（例如，您更新了图标、颜色或更改了应用名称），以确定是否需要新的 WebAPK。

从 Chrome 76 开始，Chrome 会更频繁地检查清单，每天检查一次，而不是每三天检查一次。如果任何关键属性发生更改，Chrome 都会请求并安装新的 WebAPK，以确保标题、图标和其他属性是最新的。

如需了解完整详情，请参阅更频繁地更新 WebAPK。

深色模式

许多操作系统现在都支持深色模式或深色主题。

借助 prefers-color-scheme 媒体查询，您可以调整网站的外观和风格，使其与用户的首选模式相匹配。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom 在 web.dev 上撰写了一篇很棒的文章《Hello darkness, my old friend》（黑暗，我的朋友，您好！），其中包含您需要了解的所有信息，以及有关如何构建样式表以同时支持浅色模式和深色模式的提示。

等等！

当然，这只是 Chrome 76 中面向开发者的部分变更，还有许多其他变更。

Promise.allSettled()

我个人非常期待 Promise.allSettled()。它与 Promise.all() 类似，但它会等待所有 promise 都完成后再返回。

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

更轻松地读取 Blob

Blob 更易于读取，因为新增了 text()、arrayBuffer() 和 stream() 三个方法；这意味着，我们不必再为文件读取器创建封装容器！

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Async Clipboard API 中的图片支持

此外，我们还向 Asynchronous Clipboard API 添加了图片支持，以便您轻松通过编程方式复制和粘贴图片。

深入阅读

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

订阅

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

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