以下是您有必要知道的信息:
- 借助清单
id
属性,您可以为 PWA 指定唯一 ID。 - 借助
protocol_handlers
属性,您可以在 PWA 安装时自动将其注册为协议处理程序。 - 通过优先级提示源试用,您可以指定下载资源的提取优先级。
- 您可以强制将 Chrome 版本设为 100,以测试您的代码对 3 位数版本号的反应。
- Chrome 开发者峰会的所有视频均为在线视频。
- 还有许多更多内容。
我是 Pete LePage,终于在工作室拍摄。接下来,我们将深入探讨一下 Chrome 96 为开发者提供了哪些新功能。
PWA 的清单 id
当用户安装 PWA 时,浏览器需要通过一种方式对其进行唯一标识。
但直到最近,Web 应用清单规范仍未指定如何识别 PWA,这让浏览器自行决定,并导致实现方式有所不同。在某些浏览器中,使用 start_url
,而在另一些浏览器中,使用指向清单文件的路径。
因此,在不破坏安装体验的情况下,更改上述任一字段都无法更改。现在,我们推出了一个新的可选属性 id
,该属性可让您明确定义用于 PWA 的标识符。
向清单添加 id
属性可移除对 start_url
或清单位置的依赖,并能够更新这些字段。
{
...
id: "/?homescreen=1",
start_url: "/?homescreen=1",
...
}
从 Chrome 96 开始,基于 Chromium 的桌面版浏览器将支持 id
属性。支持移动设备(目前使用清单网址作为唯一 ID)应该会在 2022 年上半年推出。
如果您已在生产环境中使用 PWA,并且想要将 id
添加到您的清单中,您将需要使用浏览器分配的 ID。您可以在开发者工具的Application面板的Manifest窗格中找到 id
。
对于全新的 PWA,您可以将 id
设置为您喜欢的任何字符串值,但请注意,您日后无法更改它,因此请谨慎选择。
{
...
id: "SquooshApp",
start_url: "/?homescreen=1",
...
}
如需了解详情,请参阅使用 Web 应用清单 ID 属性唯一标识 PWA。
PWA 的网址协议处理程序
Web 应用可以使用 navigator.registerProtocolHandler()
注册为协议处理程序。例如,Gmail 可以注册 mailto
协议。然后,当用户点击带有 mailto:
前缀的链接时,Gmail 就会打开,以便用户轻松发送电子邮件。
从 Chrome 96 开始,PWA 可以在安装过程中注册为协议处理程序。如需为您的 PWA 执行此操作,请向 Web 应用清单中添加 protocol_handlers
属性,指定要处理的 protocol
以及点击后应打开的 url
。
...
"protocol_handlers": [
{
"protocol": "web+tea",
"url": "/tea?type=%s"
},
{
"protocol": "web+coffee",
"url": "/coffee?type=%s"
}
]
}
这种方式有一些限制,您不能只注册任何协议。如需了解完整详情,请参阅为 PWA 注册网址协议处理程序,以及如何使用 web+
语法创建自己的协议!
优先级提示(源试用)
当浏览器解析网页并开始发现和下载图片、脚本或 CSS 等资源时,会为这些资源分配提取优先级,以尝试优化网页加载。浏览器非常擅长分配优先级,但并非在所有情况下都是最佳的。
优先级提示是一项实验性功能,从 Chrome 96 开始以源试用的形式提供,有助于优化核心网页指标。借助 importance
属性,您可以为 CSS、字体、脚本、图片和 iframe 等资源类型指定优先级。
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">
<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">
<script>
fetch('https://example.com/', {importance: 'high'})
.then(data => {
// Trigger a high priority fetch
});
</script>
例如,以下是 Google 机票页面。该背景图片就是最大内容渲染 (LCP)。
我们来看一看它有无优先级提示时的加载情况。将背景图片的优先级设置为 high
后,LCP 会从 2.6 秒缩短到 1.9 秒。
请查看使用 Fetch Priority API 优化资源加载,了解所有详细信息、如何注册源试用,以及有关它如何帮助提升渲染性能的一些精彩示例。
在 UA 字符串中模拟 Chrome 100
明年年初,我们将达到 Chrome 100,这是一个三位数的版本号。您应检查任何用于检查版本号或解析 UA 字符串的代码,以确保它可以处理三位数。
从 Chrome 96 开始,我们推出了一个新标记 #force-major-version-to-100
,它会将当前版本号更改为 100,以确保一切按预期运行。
有关详情,请参阅强制用户代理字符串中的 Chrome 主要版本设为 100。
Chrome 开发者峰会
Chrome 开发者峰会圆满结束。所有视频和内容均可在线访问请访问 Chrome 开发者峰会网站;如果您错过了主旨演讲或直播,请查看 Chrome 开发者 YouTube 频道上的 CDS 播放列表。
还有更多其他奖励!
当然还有很多。
- 往返缓存(即
bfcache
)现已在稳定版中提供,这使得 Chrome 能够与 Firefox 和 Safari 保持一致。
深入阅读
这仅涵盖了部分重要的亮点。如需了解 Chrome 96 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (96)
- Chrome 96 弃用和移除
- Chrome 96 的 ChromeStatus.com 更新
- Chrome 96 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需及时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage