Chrome 68 的新功能

Pete LePage

还有更多功能！

我是 Pete LePage。我们来深入了解一下 Chrome 68 中面向开发者的新功能！

想要查看完整的变更列表？请查看 Chromium 源代码库更改列表。

“添加到主屏幕”功能的变更

如果您的网站符合“添加到主屏幕”条件，Chrome 将不再显示“添加到主屏幕”横幅。而是由您控制何时以及如何提示用户。

如需提示用户，请监听 beforeinstallprompt 事件，然后保存事件，并向应用添加按钮或其他界面元素，以表明可以安装该事件。

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

当用户点击“安装”按钮时，对保存的 beforeinstallprompt 事件调用 prompt()，然后 Chrome 会显示“添加到主屏幕”对话框。


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

为了给您留出时间更新网站，当用户首次访问符合“添加到主屏幕”条件的网站时，Chrome 会显示一个迷你信息栏。关闭迷你信息栏后，系统在一段时间内不会再次显示该栏。

如需了解完整详情（包括可供使用的代码示例等），请参阅“添加到主屏幕”行为变更。

Page Lifecycle API

当用户运行大量标签页时，内存、CPU、电池和网络等关键资源可能会超额预订，从而导致用户体验不佳。

如果您的网站在后台运行，系统可能会暂停该网站以节省资源。借助新的 Page Lifecycle API，您现在可以监听这些事件并做出响应。

例如，如果用户的某个标签页在后台运行了一段时间，浏览器可能会选择暂停该网页上的脚本执行，以节省资源。在此之前，它会触发 freeze 事件，让您可以关闭打开的 IndexedDB 或网络连接，或保存任何未保存的视图状态。然后，当用户重新聚焦到该标签页时，系统会触发 resume 事件，您可以在该事件中重新初始化之前拆解的所有内容。

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

如需了解更多详情（包括代码示例、提示等），请参阅 Phil 的 Page Lifecycle API 博文。您可以在 GitHub 上找到相关规范和说明文档。

Payment Handler API

Payment Request API 是一种基于标准的开放式付款方式。Payment Handler API 通过实现基于网络的付款应用来扩展支付请求的功能范围，以便直接在支付请求体验中加入付款功能。

对于卖家而言，添加现有的基于网络的付款应用就像向 supportedMethods 属性添加条目一样简单。

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

如果已安装可处理指定付款方式的服务工件，它将显示在付款请求界面中，用户可以使用它付款。

Eiji 撰写了一篇精彩的文章，介绍了如何为商家网站和付款处理程序实现此功能。

等等！

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

DevTools 中的新功能

请务必参阅 Chrome 开发者工具的新变化，了解 Chrome 68 中 DevTools 的新变化。

订阅

然后，点击我们的 YouTube 频道上的订阅按钮，这样每当我们发布新视频时，您就会收到电子邮件通知。

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