Safari 13 中的 WebKit 新特性
今年发布的适用于 macOS Catalina、iPadOS、iOS 13 和 watchOS 6 的 Safari 13 版本包含了 WebKit 在 Apple 平台上为 Web 带来的巨大改进。特别值得注意的是,众多新特性增强了网站兼容性,为 iPadOS 上的 Safari 带来了真正的桌面级网页浏览体验。本次发布还包含了改进隐私、性能以及为 Web 开发者提供的大量新工具的更新。
下面快速浏览一下这些版本中可用的 WebKit 新增强功能。
iPad 上的桌面级浏览
WebKit 通过深度、根本性的变化为这种新体验提供了核心支持,在触控设备上提供了出色的桌面网站体验。除了 iPad mini 之外,iPad 上的 Safari 现在会发送与 macOS 上的 Safari 相同的用户代理字符串。除了用户代理的变化之外,WebKit 还新增了对 Web 标准的支持,以提供所需的兼容性和质量。这包括新增了对 Pointer Events、Visual Viewport API 和程序化粘贴的支持。您可以在下面的章节中阅读有关这些标准支持的更多详细信息。此外,WebKit 在 iPadOS 上的 Safari 中增加了 Media Source Extensions 支持,以提高与流媒体视频网站桌面版本的兼容性。
除了 WebKit 中基础性的新 Web 标准支持之外,iPad 上的桌面浏览体验还有许多其他改进。页面缩放行为经过了微调,以防止带有响应式设计视口标签的宽网页出现水平滚动。当网页缩小到完全适合视口时,WebKit 会增加内容的字体大小以确保文本清晰易读。WebKit 增加了对链接和按钮上自动快速轻点的支持,以帮助使网页内容导航感觉更具响应性。改进的硬件键盘支持增加了使用方向键滚动和执行焦点导航的功能。页面查找现在的工作方式与桌面版 Safari 相同,突出显示页面上所有匹配的词语,并对当前选定的词语进行特殊高亮显示。文本选定编辑标注菜单的行为也经过了优化,以避免与许多文档编辑 Web 应用程序提供的页面控件重叠。最后但同样重要的是,Safari 支持后台下载和后台文件上传。
iPad 上的这种新体验意味着 Web 开发者需要考虑在其 Web 技术项目中进行重大调整。iPad 上的 Safari 就像变色龙;在不同情况下,它可以响应服务器,表现为桌面设备或移动设备。大多数时候,当加载网页时,iPad 上的 Safari 会呈现 macOS 用户代理。如果在多任务处理时将 Safari 移动到三分之一大小,桌面网站将缩放到该大小,而无需重新加载并保持当前位置。但在 Safari 处于三分之一大小时加载或重新加载网页将提供 iOS 用户代理,因为移动布局更适合较小的视口。
现在,Web 开发者比以往任何时候都更需要注意提供一个单一的响应式 Web 设计,该设计使用特性检测而不是依赖于基于用户代理的独立桌面和移动网站。开发者应确保在 iPad 上测试其桌面网站体验,以确保它对用户有效。
Pointer Events
WebKit 增加了对 Pointer Events 的支持,为通用、硬件无关的指针输入(例如鼠标、触控或手写笔生成的输入)提供 DOM 事件。它增加了一层抽象,使 Web 开发者更容易处理各种输入设备。与鼠标事件类似,指针事件包括坐标、目标元素、按钮状态,但它们也支持与其他输入形式相关的额外属性,例如压力、倾斜等。
有关更多信息,请参阅Pointer Events 规范。
Visual Viewport API
WebKit 增加了对 Visual Viewport API 的支持,允许网页检测用户可见的页面部分,同时考虑缩放和屏幕键盘。开发者可以使用此 API 将内容移出屏幕键盘的遮挡范围。这对于浮动叠加层、自定义完成列表弹出窗口或自定义编辑区域中的自定义绘制光标非常有用。
有关更多信息,请参阅Visual Viewport API 规范。
程序化粘贴
WebKit 还为 iOS 和 iPadOS 上的 Safari 带来了对程序化粘贴的新支持,使用 document.execCommand('paste')
。当页面在用户手势范围内触发程序化粘贴时,会提供一个带有粘贴选项的标注栏。轻点标注栏后,将授予对剪贴板的访问权限并进行粘贴。对于剪贴板内容与触发程序化粘贴的页面同源的粘贴操作,WebKit 允许立即粘贴,不会出现标注栏。
在 MDN 的 Document.execCommand() 参考中了解更多信息。
iOS 和 iPadOS 上的加速滚动
iOS 上的 WebKit 一直支持主框的加速滚动。此外,开发者可以使用一个名为 -webkit-overflow-scrolling
的 CSS 属性来启用溢出滚动的快速滚动。在 iPadOS 和 iOS 13 中,这些都不再需要。子框架不再扩展到其内容大小,现在可以滚动,并且 overflow: scroll;
和 iframe 始终获得加速滚动。不再需要快速滚动模拟库,-webkit-overflow-scrolling: touch;
在 iPad 上是空操作。在 iPhone 上,它仍然具有在可滚动元素上创建 CSS 堆叠上下文的副作用。开发者会希望测试其内容,了解无处不在的硬件加速滚动对其有何影响,并移除不必要的工作规避方案。
性能改进
本次发布带来了性能改进,缩短了 iOS 上的网页初始渲染时间,并将 watchOS 上的网页加载时间缩短了高达 50%。减少了 Safari、Web Views 以及使用 JSContext 的非 Web 客户端中 JavaScript 的内存使用。WebKit 还实现了更好的图形渲染性能,在 MotionMark 图形性能基准测试得分中显示高达 10% 的提升。
智能跟踪预防
智能跟踪预防的最新更新增强了通过滥用链接装饰来防止跨站跟踪。本次 Safari 版本中作为 ITP 2.3 一部分的更新增加了新的对策。除了 ITP 2.2 的 24 小时 Cookie 过期之外,如果页面是从一个分类域导航到带有查询字符串或片段标识符的着陆 URL,LocalStorage 等非 Cookie 网站数据将被标记为删除。删除会在用户在网站上没有交互使用 Safari 七天后发生。除了链接装饰,如果用户从分类域导航时引用者带有链接装饰,智能跟踪预防还将把 document.referrer 降级为引用者的 eTLD+1。
有关智能跟踪预防更新的详细信息,请参阅“智能跟踪预防 2.3”博客文章以及我们收集的其他隐私相关博客文章。
符合 FIDO2 标准的 USB 安全密钥
macOS 上的 Safari 13 通过 Web 身份验证标准支持符合 FIDO2 标准的 USB 安全密钥。安全密钥可以存储与特定互联网账户关联的、绑定到设备的公钥凭据。这允许用户通过使用安全密钥作为第二因素进行身份验证,为他们的账户添加额外的保护层。不仅如此,Web 身份验证还可以防止网络钓鱼。由于用户代理是仲裁整个身份验证过程的,并且公钥凭据永远不会离开其绑定的安全密钥,因此网络钓鱼网站无法获取用户目标凭据。
更多隐私和安全改进
在 WebKit 强大的隐私和安全基础上,用户将获得额外的保护,包括 iOS 和 macOS 上的沙盒强化以及第三方 iframe
的导航保护。
现在,开发者在 iOS 和 iPadOS 上的 Safari 或 Safari View Controller 中访问事件之前,需要调用 DeviceMotionEvent.requestPermission() 或 DeviceOrientationEvent.requestPermission() 来提示用户获取许可。
WKWebView 中的 Apple Pay
在 iOS 13 中,加载到 WKWebView
中的网页现在可以接受 Apple Pay。为了保护 WKWebView
中 Apple Pay 交易的安全,Apple Pay 不能与脚本注入 API(例如 WKUserScript
或 evaluateJavaScript(_:completionHandler:)
)同时使用。
如果在网页使用 Apple Pay 之前调用了这些 API,Apple Pay 将会被禁用。如果在调用 evaluateJavaScript(_:completionHandler:)
之前网页使用了 Apple Pay,完成处理程序将以非空的 NSError
调用。这些限制在顶层框架每次导航时都会重置。
媒体改进
WebKit 中的媒体改进提高了开发者的兼容性和能力。对 Media Capabilities API 的 decodingInfo()
方法的支持允许开发者检查支持的编解码器、高效支持的编解码器以及包括新的 Alpha 透明度在内的可选编解码器特性。WebKit 现在支持带有 Alpha 通道的视频透明度,适用于所有支持的视频格式。
在 macOS 上的 Safari 中,WebKit 增加了用户使用 Web 技术原生地与他人共享屏幕的能力,无需任何插件。SFSafariViewController 获得了对 Media and Streams API 的 navigator.mediaDevices
属性的 WebRTC 支持。
iOS 和 iPadOS 上的深色模式
去年,WebKit 在 macOS Mojave 上的 Safari 中为 Web 添加了深色模式。今年,WebKit 将同样的支持带到了 iOS 和 iPadOS 上的 Safari,以便根据系统外观对网页内容进行样式设置。


在博客文章“WebKit 中的深色模式支持”和“Web Inspector 中的深色模式”中了解其工作原理以及如何将支持添加到您的网页内容中。
iOS 和 iPadOS 上改进的主屏幕 Web 应用
对保存到主屏幕的网站的支持已得到优化,使其更像原生应用。这些改变主要集中在改进多任务支持、改进登录流程以在不切换到 Safari 的情况下内嵌工作、支持 Apple Pay 以及提高远程 Web Inspector 的可靠性。
适用于 iOS 的 Safari WebDriver
支持 iOS 13 上的 Safari WebDriver。开发者可通过 /usr/bin/safaridriver
可执行文件访问 WebDriver 控制,该文件托管一个处理 WebDriver 测试客户端发送的 REST API 请求的驱动程序。要在 iOS 设备上运行 WebDriver 测试,必须将其连接到具有足够新版本的 safaridriver 的 macOS 主机。Safari 13 及更高版本中包含的 safaridriver 支持托管基于 iOS 的 WebDriver 会话。旧版本的 safaridriver 不支持 iOS WebDriver 会话。
如果您之前未在 macOS 上使用过 safaridriver
,则首先需要运行 safaridriver --enable
并以管理员身份进行身份验证。然后,您需要在打算用于 WebDriver 的每个设备上启用“远程自动化”。为此,请在“设置”应用的 Safari → 高级 → 远程自动化下切换该设置。
随着 iOS 13 上 Safari 中原生 WebDriver 支持的引入,现在可以在桌面和移动设备上同样运行针对桌面端网页内容的自动化测试。Safari 的支持带来了全新的独家保护措施,可同时保护用户安全和隐私,并帮助您编写更稳定和一致的测试。今天,您可以通过安装 macOS Catalina 和 iOS 13 的 Beta 版来试用 Safari 的 WebDriver 支持。
通过阅读“WebDriver 即将登陆 iOS 13 上的 Safari”一文,您可以了解更多关于 Safari WebDriver 的 iOS 支持信息。
Web Inspector 改进
Web Inspector 增加了在开发过程中为网页内容带来新见解的工具。本次发布还包括许多工具改进,提供了更多功能和更好的调试体验。其中包括,Web Inspector 改进了调试大型复杂网站的性能。
时间线选项卡中提供了新的 CPU 使用时间线,可让开发者通过 CPU 使用情况了解电源效率。这有助于开发者分析和提高其网页内容的电源效率。时间线选项卡也已更新,支持使用 JSON 文件格式导入和导出记录的时间线数据。时间线数据的可移植性使得可以与其他开发者共享记录,或在自定义工具中使用这些数据。
在“Web Inspector 中的 CPU 时间线”博客文章中了解更多信息。有关开发电源高效网页内容的更多提示,您还可以阅读“网页内容如何影响电源使用”博客文章。
本次发布引入了一个新的审计选项卡,可以对网页内容运行测试,并且结果可以轻松导入和导出。审计选项卡包含针对网页内容的内置辅助功能审计,并允许开发者在整个网页内容开发过程中创建自己的审计以进行自定义检查。
您可以在“Web Inspector 中的审计”和“创建 Web Inspector 审计”博客文章中了解更多信息。
当已在 Safari 高级设置中启用 Web Inspector 的 iOS 或 iPadOS 设备连接到运行 Safari 的 macOS 设备时,Web Inspector 将提供新的设备设置菜单。当 Web Inspector 连接到设备时,设备设置菜单允许覆盖与开发者相关的 Safari 设置,例如用户代理字符串。
在“使用 Web Inspector 在 iOS 上更改页面设置”博客文章中了解更多信息。
元素选项卡包含一个新的“更改”侧边栏,用于跟踪在“样式”侧边栏中所做的 CSS 更改,从而更轻松地捕获所有更改并将其重新整合到生产代码中。在网络选项卡中,现在可以在资源视图的“安全”面板中查看证书和 TLS 设置。
反馈
运行 watchOS 6、iOS 13、iPadOS、macOS Catalina、macOS Mojave 10.14.6 和 macOS High Sierra 10.13.6 的用户可以使用这些改进。这些功能也已通过 Safari Technology Preview 版本提供给 Web 开发者。此版本 Safari 的更改已包含在以下 Safari Technology Preview 版本中:77、78、79、80、81、82、83、84、85、86、87、88、89。下载最新的 Safari Technology Preview 版本,以保持在未来 Web 特性的前沿。您还可以使用 WebKit 特性状态页面关注您喜爱的 Web 平台特性的变化。
我们很高兴收到您的反馈。请发送推文给 @webkit 或 @jonathandavis,分享您对此版本的想法以及您期待但未包含在内的任何特性。如果您遇到任何问题,我们欢迎您报告 Safari 的错误,或报告针对网页内容的 WebKit 错误。