了解适用于 SwiftUI 的 WebKit

2025-06-10

了解如何使用 webkit 将网页内容轻松整合到你的 swiftui app 中。了解如何载入和显示网页内容、与网页进行通信等。

此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com

探索适用于 SwiftUI 的 WebKit

苹果在 WWDC 2025 上发布了 WebKit for SwiftUI，这是一个全新的 SwiftUI API，旨在帮助开发者更轻松地将网页内容集成到 SwiftUI 应用中。该 API 结合了 WebKit 的强大网络能力与 SwiftUI 的简洁特性，为开发者提供了前所未有的便捷开发体验。

WebKit for SwiftUI 简介

WebKit 是 Safari、Mail 以及众多苹果平台应用的核心浏览器引擎。全新的 WebKit for SwiftUI API 让开发者能够以极简的方式调用 WebKit 的功能，只需创建 WebView 并提供一个 URL 即可显示网页内容。该 API 支持所有 WebKit 兼容平台，包括 iOS、iPadOS、VisionOS 和 macOS。

加载与显示网页内容

WebKit for SwiftUI 提供了 WebView 视图，这是专门为展示网页内容而设计的新 SwiftUI 视图。开发者只需简单地将 URL 传递给 WebView，它就会自动加载并显示内容。不仅如此，WebView 还支持动态切换 URL，当 URL 变化时，WebView 会自动导航至新的 URL。

使用 WebPage 观察网页内容

除了基本的 URL 加载，开发者还可以创建 WebPage 并将其连接到 WebView。WebPage 是一个全新的 Observable 类，代表网页内容，能够完美适配 Swift 和 SwiftUI。通过 WebPage，开发者可以观察网页内容的各种属性变化，如页面标题、URL 等。

WebPage 提供了多种加载网页内容的方式：

加载远程 URL：
1
webPage.load(URLRequest(url: url))

直接加载 HTML 字符串：

1	webPage.loadHTMLString(htmlString, baseURL: baseURL)

加载 web archive 数据：

1	webPage.load(data: data, mimeType: mimeType, characterEncodingName: encoding, baseURL: baseURL)

自定义 URL Scheme 处理

WebKit for SwiftUI 还支持自定义 URL scheme 处理，允许开发者处理特定 scheme 的资源加载。开发者可以创建遵循 URLSchemeHandler 协议的类型，并通过实现 reply 函数来提供自定义数据。

struct LakesSchemeHandler: URLSchemeHandler {
    func reply(to request: URLRequest) async -> AsyncSequence<URLSchemeTaskResult> {
        // 实现自定义资源加载逻辑
    }
}

与页面通信

观察导航事件

WebPage 提供了 currentNavigationEvent 属性，允许开发者观察网页的导航状态变化。导航事件包括：

startedProvisionalNavigation：导航开始
receivedServerRedirect：服务器重定向
committed：开始接收主框架内容
finish：导航完成
failed/failedProvisionalNavigation：导航失败

开发者可以使用 Swift 6.2 的 Observations API 来观察这些事件的变化：

1
2
3

for await event in webPage.currentNavigationEvent.values {
    // 处理导航事件
}

JavaScript 通信

WebPage 提供了 callJavaScript API，允许开发者评估 JavaScript 代码并与页面通信。该 API 支持传递参数，并将 JavaScript 返回值转换为 Swift 类型。

1
2
3

let result = try await webPage.callJavaScript("""
    document.getElementById('\(sectionID)').getBoundingClientRect().top
""")

定制内容交互

WebKit for SwiftUI 提供了丰富的视图修饰符，用于定制用户与网页内容的交互方式：

滚动行为定制

scrollBounceBehavior：定制滚动弹跳行为
webViewScrollPosition：关联 WebView 的滚动位置
onScrollGeometryChange：响应滚动几何变化

WebView(webPage: webPage)
    .scrollBounceBehavior(.vertical, axes: .vertical)
    .webViewScrollPosition($scrollPosition)
    .onScrollGeometryChange { geometry in
        // 处理滚动变化
    }

查找功能

开发者可以使用现有的 findNavigator 修饰符为 WebView 添加查找功能：

1 2	WebView(webPage: webPage) .findNavigator(isPresented: $isFindNavigatorPresented)

VisionOS 特定功能

在 visionOS 上，WebView 支持 look to scroll 功能，可以通过 webViewScrollInputBehavior 修饰符启用：

1 2	WebView(webPage: webPage) .webViewScrollInputBehavior(.look)

总结

WebKit for SwiftUI 提供了一个简单而功能强大的 API，将网页内容无缝集成到 SwiftUI 应用中。它支持：

多种网页内容加载方式
自定义 URL scheme 处理
丰富的网页交互观察能力
JavaScript 通信
灵活的滚动和查找功能定制

开发者可以参考官方文档了解更多细节，并尝试将现有应用迁移到这一新 API 上。

文档

SwiftUI

苍耳