Source: Chrome 68 测试版：添加到主页面，付款处理程序，页面生命周期 from 谷歌开发者-中文博客

code { background-color: transparent } h1, h2, h3, h4 { margin-top: .7em; } 除非另外注明，否则，下面介绍的更改均适用于最新 Chrome 测试版（Android、Chrome 操作系统、Linux、macOS 和 Windows）。可以在 ChromeStatus.com 上查看 Chrome 68 中功能的完整列表。Chrome 68 测试版于 2018 年 6 月 7 日发布。

针对渐进式网页应用新增“添加到主页面”行为

我们从开发者那里了解到，他们想要对“添加到主页面”提示出现的方式和时机拥有更多控制。从 Android 上的 Chrome 68 开始，这一行为开始发生变化，旨在让开发者对提示出现的时机进行更多控制。开发者现在可以为其“添加到主页面”体验提供额外的上下文，并提高点击率。

“添加到主页面”对话框

如果某个网站符合“添加到主页面”条件，Chrome 将触发 beforeinstallprompt 事件，并且不再自动显示“添加到主页面”横幅。相反，当事件触发时，开发者可以保存事件并向应用添加按钮或其他界面元素，以便指明可以安装该按钮或元素。当用户点击安装按钮时，开发者可对保存的 beforeinstallprompt 事件调用 prompt() 以显示新的“添加到主页面”模态对话框。尽管 beforeinstallprompt 事件无需用户手势即可触发，但调用 prompt() 还是需要用户手势。

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 UI notify the user they can add to home screen
  document.querySelector('#install-button').disabled = false;
});

为了给开发者留出时间处理 beforeinstallpromptevent 并向其应用添加安装按钮，暂时的解决方法是，当用户第一次访问符合“添加到主页面”条件的网站时，Chrome 会显示一个迷你信息栏。一旦被忽略，迷你信息栏需要过一段时间（目前为 3 个月）后才会再次显示。

“添加到主页面”迷你信息栏

如需了解完整详情、代码示例和新界面元素的屏幕截图，请参阅“添加到主页面”行为变更。

Payment Handler API

Payment Request API 通过将无缝的原生浏览器界面与用户首选付款方式和收货地址相结合，为网络提供了一种更简单、快捷的在线结帐方式。

刚刚发布的 Payment Handler API 通过实现基于网络的付款应用来扩展支付请求的功能范围，以便直接在支付请求体验中加入付款功能。

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

避免用户被导航至不受欢迎的目标网址

在这一版的 Chrome 中，为改善用户体验，我们对一些界面行为进行了更改。

跨源 iframe 中的重定向需要用户手势

除非被 sandbox 属性禁止，否则 iframe 中嵌入的内容通常可以将顶层浏览上下文导航到其他网站。此功能被许多类型的网站使用，包括单点登录提供商和付款处理方。遗憾的是，这种行为也经常被滥用，在用户不知情或不同意的情况下将他们重定向到不受欢迎的目标网址。

从 Chrome 68 开始，iframe 中嵌入的内容需要用户手势才能将顶层浏览上下文导航到其他源。与弹出式窗口阻止类似，当此保护触发时，Chrome 界面将提示用户是否允许重定向继续。

我们提供了一个相关演示来解释这种行为。此链接中提供的演示将展示 Chrome 67 及更早版本中的旧行为。Chrome 68 中使用改进后的行为。

阻止 tab-under 导航

tab-under 是指某个页面既打开指向特定目标网址的弹出式窗口，又将起始页面导航至某些第三方内容。此行为通常用于将用户发送到所需目标网址，同时还会另外创建一个指向不受欢迎的目标网址的标签。与弹出式窗口类似，Chrome 将阻止这些不受欢迎的导航，向用户显示原生界面，以便他们可以选择是否通过此重定向转到新网址。

Page Lifecycle API

应用生命周期是现代操作系统管理资源的关键方式。在 Android、iOS 和最近的 Windows 上，平台可以随时启动和停止应用。这使得这些平台能够按照最有利于用户的方式简化和重新分配资源。

以前，网络上没有这种生命周期的概念，应用可以无限期地处于活动状态。随着运行的网络应用（和标签）增多，内存、CPU、电池和网络等关键资源可能会超额预订，从而导致最终用户体验不佳。

在 Chrome 68 中，开发者可以使用新增的 freeze 和 resume 事件侦听并响应系统发起的后台标签的 CPU 挂起。在需要舍弃冻结页面以节约内存的情况下，现在可以使用 document.wasDiscarded 属性。借助此属性，当用户将焦点重新移到标签并重新加载页面时，开发者可以恢复视图状态（保存在 freeze 事件中）。如果开发者希望在自己的应用中测试这些事件，可以访问 chrome://discards 来模拟页面冻结、恢复和舍弃。

如需了解有关 Page Lifecycle API 的详细信息，请参阅规范或 GitHub 上的说明。

此版本中的其他特性

CSS

overflow 简略形式接受两个值

overflow 简略形式将接受两个值，这让开发者可以将水平和垂直溢出设置为不同的值。如果指定了两个值，则第一个为 overflow-x，第二个为 overflow-y。此前，开发者需要指定两个语句，而通过更改简略形式，现在只需指定一个语句。

由三部分组成的 CSS 位置值

object-position 和 perspective-origin 属性将不再接受由三部分组成的值，例如 "top right 20%"。这对以基本形状和渐变表示的位置同样适用。有效位置值现在始终包含 1、2 或 4 部分。Chrome 66 中即已弃用由 3 部分组成的值。

支持将“x”作为分辨率单位

CSS 值和单位模块级别 4 定义了一个称为“每像素的点数”的新分辨率单位，用于支持高分辨率显示屏。本次更改添加了 'x'，作为现有缩写 'dppx' 的同义词。

去除光标属性 CSS 值“grab”和“grabbing”的前缀

CSS 值“grab”和“grabbing”将鼠标光标变为松开的手或握紧的手，通常用于指示可以抓取内容或当前已抓取内容。自 Chrome 1 开始支持这些属性的有前缀版本。在本次更改后，Chrome 将支持这些值的标准、无前缀版本。

游戏手柄

游戏手柄的高分辨率时间戳

Gamepad.timestamp 现在使用 DOMHighResTimeStamp，后者是具有微秒分辨率的高分辨率单调时间。时间戳按照相对于 PerformanceTiming.navigationStart 属性的偏移量进行测量。

自定义元素

新增 customElements.upgrade()

此函数可为尚未显式调用构造函数的自定义元素调用自定义元素构造函数。如果自定义元素使用 innerHTML setter 创建，并且其父节点未连接到文档，则自定义元素构造函数在连接之前不会被调用。此方法显式允许开发者完全控制自定义元素构造函数的调用时间，而不考虑连接状态。

输入

键盘锁定

在全屏模式下时，此 API 允许应用接收通常由系统或浏览器处理的按键，例如，Cmd-Tab/Alt-Tab 或 Esc。用户按住 Esc 键两秒即可退出键盘锁定模式（和全屏）。

将 PointerEvent.fromElement 和 PointerEvent.toElement 设为 null

为改进与其他浏览器的一致性，fromElement 和 toElement 字段的 PointerEvents 始终报告 null，不遵守指针事件级别 2 规范。
在 MouseEvent（PointerEvent 通过它继承这些字段）中，fromElement 和 toElement 不符合标准，并且多年来在主流浏览器之间一直处于不一致的状态。而且，现在已经有了标准、一致的替代方案：target 和 relatedTarget。

统一的触控调整

触控调整可将 TouchEvent 和对应的 PointerEvent 目标更改为触控区域内的最佳目标。TouchEvent 坐标不变。

将长按视为用户手势

现在将长按视为用户手势，因为它反映了用户与页面的交互。这样一来，网络应用可以通过长按来调用类似 navigator.vibrate() 的受限制 API，以匹配原生行为。

媒体

WebAudio：为 AudioParam 添加用户可选择的自动化率

AudioParam.automationRate
属性允许用户选择 AudioParam 为“a-rate”还是“k-rate”。按照规范中所述，大多数 AudioParam 属性（但并非全部）都允许更改比率。
例如，对于默认值为“a-rate”自动化的 BiquadFilterNode，由于参数与过滤器系数之间的复杂关系，因此计算开销十分高昂。如果不需要这种快速自动化（最典型的情况），则参数可以设置为“k-rate”。

ServiceWorker

改进 Service Worker 脚本的缓存管理

在请求 Service Worker 更新时，将忽略 HTTP 缓存。importScripts 的请求仍需经由 HTTP 缓存处理。但这只是默认设置。现在提供新的注册选项 ServiceWorkerRegistration.updateViaCache，用于对此行为进行控制。
此前，用于检查 Service Worker 更新的请求默认由 HTTP 缓存执行。如果 Service Worker 无意中设置了 Cache-Control 标头，则 Service Worker 更新可能会延迟，并且如果您的 Service Worker 包含网站和其他资产的版本信息，这些更新也会延迟。

弃用项和互操作性的改善

为提高与其他浏览器的互操作性，Chrome 有时会弃用、移除或更改一些功能。此版本的 Chrome 也进行了一系列类似更改，如下所示。

弃用并移除过滤器中的负亮度值

为符合规范，过滤器的 brightness() 函数不再接受负值。

移除 document.createTouch

将移除 document.createTouch() 函数，因为自 Chrome 48 起即已开始支持 Touch() 构造函数。

移除 Document.selectedStylesheetSet 和 Document.preferredStylesheetSet

Document.selectedStylesheetSet 和 Document.preferredStylesheetSet 属性已移除，因为它们不是标准属性且只能由 Chrome 和 WebKit 实现。这些属性的标准版本已从 2016 年的规范中移除。

WEBGL_compressed_texture_atc

Chrome 此前提供了 AMD_compressed_ATC_texture 格式硬件支持已经缩减至接近于零，因此该扩展已被 WebGL 工作组拒绝。已移除相应支持。 <!—->