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 可以安装。 请参阅推广 PWA 安装的模式，了解我们推荐的关于推广 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

使用 text()、arrayBuffer() 和 stream() 这三种新方法，Blob 更易于阅读；这意味着我们不再需要为文件读取器创建封装容器！

// 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 开发者 YouTube 频道，这样，每当我们发布新视频时，您都会收到电子邮件通知。

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