在iOS中使用WKWebView加载本地的React应用程序

Question

我已经用React构建了一个网站，并想在iOS WKWebView中使用构建文件。

---

跟进：

为了运行React构建文件夹，必须将其作为服务器提供服务。目前唯一的实现方式是在iOS应用程序中构建服务器，提供React构建文件，并在WKWebView中加载本地URL。

我找到的最佳服务器选项是https://criollo.io/#getting-started。

它为以下原因最佳：

• 适用于Objective-C和Swift代码库
• 易于使用的文档
• 开发者提供强有力的支持

- alanionita

---

一个React应用需要被托管在服务器上，因此你可以在你的应用中实现一个Web服务器，或者将React应用托管在其他地方，并在你的WebView中声明该URL。而且WebViews确实支持localStorage。 - user5734311

我希望将构建文件包含在本地代码库中，以便可以离线运行。到目前为止，我已经遇到了一些基于iOS的服务器，但没有关于在WKWebView中简单加载构建的信息。 - alanionita

如果你还没有看过，可以尝试访问 https://github.com/robbiehanson/CocoaHTTPServer - user5734311

我正在使用ReactJS + Cordova，遇到了file://的问题，这个插件帮了我大忙：https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix - Jacksonkr

Answer 1

你不一定需要构建 React 应用，然后在本地加载这些文件。虽然这样可以工作，但更好的方法是启动本地服务器（即运行`yarn start`），然后像这样指定你的 URL（通常是 http://localhost:3000/，根据你的设置可能有所不同），在 WKWebView 中 进行加载。

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let configuration = WKWebViewConfiguration()
        // (optional) your configuration 
        webView = WKWebView(frame: .zero, configuration:configuration)
        view = webView

        let url = URL(string: "http://localhost:3000")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

由于您的服务器通过 http 加载文件，iOS 的 App Transport Security 将会阻止它。它只允许通过 https 协议加载文件。为了让 ATS 通过 http 加载，您需要添加对 localhost 或者 127.0.0.1 或其他本地服务器 IP 地址的例外处理。要做到这一点，请以 源代码 形式打开 info.plist 并粘贴以下内容：

<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSExceptionDomains</key>  
    <dict>  
        <key>127.0.0.1</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
        <key>localhost</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
    </dict>  
</dict> 

现在你应该能够在WKWebView中访问你的React应用程序。

- Pranit Harekar

---

如果您通过npm start命令或通过create react app使用webpack-dev-server，则不建议在生产环境中使用它（会添加实时重新加载和其他开发工具）。您的React代码库也没有在生产模式下构建，这会影响性能。最好的方法是构建您的代码并提供服务（可以通过外部服务器或嵌入应用程序的静态服务器来实现）。 - LoicUV

Answer 2

您可以在没有服务器的情况下运行本地React应用程序。只需使用函数WkWebView.loadFileURL(url, allowingReadAccessTo: url)。您可以查看此答案中添加React应用程序文件到xcode项目的详细步骤。

请记得通过在package.json中设置"homepage": "./"来配置您的React应用程序以使用相对路径。

- noe

---

太棒了！迫不及待想试试看。这是 WkWebView 的更新吗？@ncasas - alanionita

似乎 loadFileURL 自 iOS 9.0 就已经存在了（参见 https://developer.apple.com/documentation/webkit/wkwebview/1414973-loadfileurl），但 allowingReadAccessTo 参数还不确定，这是关键。 - noe