WKWebView 的新功能

探索 WKWebView 的最新更新，此框架能帮助将网页内容整合到您的 App 界面中。我们将介绍 JavaScript 全屏 API 的使用方法，探索 CSS 视口单位，并分享有关查找交互的更多信息。我们还将带您了解内容拦截控制的优化、嵌入加密媒体，以及如何使用 Web 检查器。

资源

相关视频

WWDC22

Safari 浏览器和 WebKit 的新功能

下载

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪ 大家好欢迎来到 “WKWebView 的新功能” 我是 WebKit 组的工程师 Alex Christensen 今年我们增加了很多新的网络技术供您在 App 中使用不过在我们开始之前我们要确保您的 App 使用了正确的技术如果您希望无需深度定制就能在 App 中浏览 Web 内容那么一定要试试 SFSafariViewController 如果您的 App 仍在使用已弃用的 UIWebView 现在是时候迁移到更快且更具响应性的 WKWebView 未来的版本中将删除 UIWebView WKWebView 提供 API 用于 Web 内容和 App 之间交互您可以将它用于基于 CSS 的用户界面或调用 JavaScript 编写 App 您可能在使用 App 绑定域与自己的 Web 内容交互您也可能正在开发自己的浏览器无论您的 App 是什么我们不断添加新功能以便您制作更丰富的 Web App WKWebView 今年可用的新功能分为四类与 Web 内容交互的新方式内容拦截器的新功能加密媒体以及允许三方浏览器远程调试 Web 首先我们将介绍用于 Web 内容交互的 API iOS16 中您的 App 可以通过以下三种新方式与 Web 内容轻松交互：使用全屏 API 使用新的 CSS 视口单元以及使用查找交互让我们先来看看全屏 API 一直以来在浏览器中展示的视频游戏等都可以通过 HTML 元素使其实现全屏现在 App 内嵌的 H5 页面中也可以做到这一点了这是手机上的一个简单示例 JavaScript 可以请求全屏然后用户或 JavaScript 也可以退出全屏您仅需要在您的 App 中将 WKPreferences 的 .isElementFullscreenEnabled 属性设置为 true 来加载网页内容这些内容可以使用全屏 API 比如 webkitRequestFullscreen 这是开箱即用的API 效果也很好如果您想要自定义过渡动画可以通过监听 WKWebView 的 fullscreenState 来实现该属性让 App 可以准确知道网页内容何时全屏或返回以上就是在 App 中使用 WebKit 全屏 API 的全部内容

我们也新增了 CSS 单位可根据视口（Viewport）大小布局 Web 内容这些新的 CSS 单位包括 svh lvh dvh 等它们允许 Web 开发者根据最小最大和动态的视口大小来修改 Web 布局让我们看一下 Safari 浏览器的作用以了解如何在您的 App 中使用当首次在 Safari 浏览器中打开 H5 页面时能看到 H5 页面和一些底部按钮滚动时视口会随着按钮的滚动而增大 Svh、lvh 和 dvh 提供有用的单位来测量这些不同大小的视口当 App 需要更改 WKWebView 视口大小以便在 App 中正确布局 Web 内容时需要提前通过 WebKit 的函数 setMinimumViewportInset 方法来告知视口的大小范围在 iOS 16 的 WKWebView 中我们还引入了对查找交互的支持许多使用了 WKWebView 的 App 加载了大量文本内容并且用户想要搜索相应文本如果将 WKWebView 的 .findInteractionEnabled 属性设置为 true 用户就可以在页面上使用 CMD-F 等快捷键来搜索文本打开该功能只需要一行代码除此之外还可以通过 WKWebView 的 findInteraction 属性来访问 UIFindInteraction 对象通过这个对象来执行查找和关闭查找等操作或者通过编码的方式移动到上一个或者下一个查找结果试试吧看它可以在您的 App 中做什么对于内容拦截器我们在 WKContentRuleList 添加了一项新功能用于在 Safari 浏览器中实现内容拦截的 API 在这里我们将维基百科嵌入 H5 的 iframe 中以前您可以在被请求的 URL 和顶部框架 URL 上运行正则表达式以决定是拦截加载还是执行其他操作但是有时候您真正想要的是某个规则仅适用于某些 iframe 内的加载现在您可以在当前框架的 URL 上运行正则表达式我们将编写一条规则来拦截维基百科中的图像呈现首先在 JSON 规则的 trigger 中添加新增的 if-frame-url 键并将其应用于 WKWebViewConfiguration 然后在发出请求的 URL 上运行正则表达式此拦截规则现在仅适用于来自匹配 if-frame-url 正则表达式的框架的请求在这里我们看到它成功的拦截了维基百科的图像如果您想要了解更多实施内容拦截器的内容建议查看有关 Safari 浏览器扩展的 WWDC 讲座该讲座包含了有关 declarativeNetRequest 的一些新可能性 iPadOS 16 中的 WKWebView 中还新增了一个功能即加密媒体如果您有相关使用加密媒体扩展和媒体源扩展 API 的经验现在可以在 iPadOS 上的 App 中使用这意味着如果您拥有 AppleTV+ 等优质内容它将像 macOS 中一样在 iPadOS 上工作如果您的 App 有 Web 浏览器权限允许三方浏览器远程调试 Web 将会像在 iOS 上的 Safari 一样正常工作无需添加任何代码或更改任何代码就可调试 Web 页面调试流程与 Safari 浏览器一样首先在 iOS 设备中开启 Web Inspector 然后在 macOS 上的 Safari 浏览器的高级设置中启用开发菜单将手机连接到 Mac 并在 macOS 上的 Safari 浏览器浏览器的开发菜单中查找您的设备 Web 检查器有许多用于调试 Web 内容的工具您可以探索 DOM 运行和调试 JavaScript 的执行查看页面加载的时间线等如果您有网站您现在可以试着开启 Web 检查器实现在第三方浏览器中调试 App 内嵌的 Web 页面以上就是今年 WKWebView 的新增 API 试用一下看看它们能在您的 App 中做什么请为您的 App 使用最好的 API 如果您认为 WKWebView 仍有还需完善的功能请使用反馈助理提交功能请求我们会查看收到的功能请求并根据您的建议确定开发的优先次序别忘了观看 “Safari Web 扩展的新功能” 如果想要了解 Web 平台的更多内容请查看 “Safari 和 WebKit 的新功能” 感谢观看祝您 WWDC 愉快 ♪

2:26 - Fullscreen API support

webView.configuration.preferences.isElementFullscreenEnabled = true

webView.loadHTMLString("""
<script>
    button.addEventListener('click', () => {
        canvas.webkitRequestFullscreen()
    }, false);
</script>
…
""", baseURL:nil)

let observation = webView.observe(\.fullscreenState, options: [.new]) { object, change in
    print("fullscreenState: \(object.fullscreenState)")
}

3:50 - CSS viewport unit range inputs

let minimum = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
let maximum = UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0)
webView.setMinimumViewportInset(minimum, maximumViewportInset: maximum)

4:17 - Using UIFindInteraction with WKWebView

webView.findInteractionEnabled = true

if let interaction = webView.findInteraction {
  interaction.presentFindNavigator(showingReplace:false)
}

5:46 - WKContentRuleList if-frame-url

let json = """
[{
    "action":{"type":"block"},
    "trigger":{
        "resource-type":["image"],
        "url-filter":".*",
        "if-frame-url":["https?://([^/]*\\\\.)wikipedia.org/"]
    }
}]
"""

WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker",
    encodedContentRuleList: json) { list, error in
    guard let list = list else { return }
    let configuration = WKWebViewConfiguration()
    configuration.userContentController.add(list)
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。