iOS 16中SwiftUI如何原生实现内置Safari打开URL？

核心结论 #

iOS 16中SwiftUI没有原生的应用内网页浏览组件，仍需基于SFSafariViewController进行封装，但可以通过优化代码解决你遇到的延迟、黑屏问题。iOS 17及以上版本则提供了原生的SafariView，无需手动封装。

优化后的SFSafariViewController封装方案 #

针对iOS 16的不稳定问题，可通过以下优化后的代码解决：

import SwiftUI
import SafariServices

struct SafariView: UIViewControllerRepresentable {
    let url: URL
    private let configuration: SFSafariViewController.Configuration
    
    // 初始化时可配置阅读器模式等选项
    init(url: URL, entersReaderIfAvailable: Bool = false) {
        self.url = url
        self.configuration = SFSafariViewController.Configuration()
        self.configuration.entersReaderIfAvailable = entersReaderIfAvailable
    }
    
    func makeUIViewController(context: Context) -> SFSafariViewController {
        let safariVC = SFSafariViewController(url: url, configuration: configuration)
        // 设置背景色与SwiftUI视图一致，解决黑屏闪烁问题
        safariVC.view.backgroundColor = .systemBackground
        return safariVC
    }
    
    func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) {
        // 无需额外更新操作
    }
}

// 使用示例
struct ContentView: View {
    @State private var isSafariPresented = false
    @State private var targetURL: URL? = URL(string: "https://www.example.com")
    
    var body: some View {
        Button("打开帮助页面") {
            isSafariPresented = true
        }
        .fullScreenCover(isPresented: $isSafariPresented) {
            // 安全解包URL，避免强制解包导致的异常
            if let url = targetURL {
                SafariView(url: url)
            }
        }
    }
}

关键优化点 #

• 避免强制解包：通过可选绑定确保URL有效时才加载Safari视图，减少潜在异常
• 配置背景色：将SFSafariViewController的背景色设置为系统默认背景，解决黑屏闪烁问题
• 简化状态绑定：使用isPresented替代item绑定，减少状态变化时的视图重建开销，缓解打开延迟
• 可配置选项：支持开启阅读器模式等自定义配置，提升用户体验

iOS 17及以上的原生方案 #

如果你的应用支持iOS 17及以上版本，可直接使用苹果提供的原生SafariView，无需手动封装：

import SwiftUI
import SafariServices

struct ContentView: View {
    @State private var isSafariPresented = false
    @State private var targetURL: URL? = URL(string: "https://www.example.com")
    
    var body: some View {
        Button("打开帮助页面") {
            isSafariPresented = true
        }
        .fullScreenCover(isPresented: $isSafariPresented) {
            if let url = targetURL {
                SafariView(url: url)
                    .preferredControlStyle(.automatic)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Arturo