Chrome 76 中的新功能

在 Chrome 76 中,我们新增了对以下功能的支持:

我是 Pete LePage,一起来深入了解下,看看 Chrome 76 为开发者提供了哪些新功能!

PWA 多功能框安装按钮

在 Chrome 76 中,我们在地址栏(有时称为多功能框)中添加了安装按钮,让用户能够更轻松地在桌面设备上安装渐进式 Web 应用。

如果您的网站符合渐进式 Web 应用安装标准,Chrome 将在多功能框中显示一个安装按钮,向用户表明您的 PWA 可以安装。如果用户点击安装按钮,这与对 beforeinstallprompt 事件调用 prompt() 基本相同;它会显示安装对话框,以便用户轻松安装 PWA。

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


更好地控制 PWA 迷你信息栏

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

在移动设备上,如果用户首次访问您的网站,并且符合渐进式 Web 应用可安装性标准,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 上发表了一篇很棒的文章 Hellodarkness,我的老朋友,其中包含您需要了解的一切内容,以及有关如何设计样式表的提示,以便同时支持浅色模式和深色模式。

还有更多其他奖励!

以上只是我们针对开发者在 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);
});

异步剪贴板 API 中的图片支持

此外,我们还在 Aasync Clipboard API 中添加了对图片的支持,以便以编程方式复制和粘贴图片。

深入阅读

此处仅涵盖部分主要亮点,请点击以下链接,了解 Chrome 76 中的其他变化。

订阅

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

我叫 Pete LePage