javascript - Loading a local React app inside WKWebView iOS - Stack Overflow

admin管理员组

文章数量:1290975

I've built a site in React and would want to use the build files inside of the iOS WKWebView.

---

Follow-up

In order to run a React build folder it must be served so currently the only way to achieve this is to build a server inside the iOS app, serve the React build files, and load the local url in the WKWebView.

The best option I've found for the server is .

Why is the best?

• Work for both Objective-C and Swift codebases
• Easy to use documentation
• Strong support from the developer

I've built a site in React and would want to use the build files inside of the iOS WKWebView.

---

Follow-up

In order to run a React build folder it must be served so currently the only way to achieve this is to build a server inside the iOS app, serve the React build files, and load the local url in the WKWebView.

The best option I've found for the server is https://criollo.io/#getting-started.

Why is the best?

• Work for both Objective-C and Swift codebases
• Easy to use documentation
• Strong support from the developer

• javascript
• reactjs
• webview
• wkwebview

Share Improve this question Follow edited Nov 30, 2018 at 9:43 alanionita asked Jul 6, 2018 at 11:35 alanionitaalanionita 1,44311 gold badge1717 silver badges3838 bronze badges 4

• 2 A React app needs to be hosted on a server, so you can either implement a web server in your app or host the React app elsewhere and state that URL in your WebView. And WebViews do support localStorage. – user5734311 Commented Jul 6, 2018 at 11:38
• 1 I was hoping to include the build files in the Native codebase so it can run offline. So far I'm stumbled across a few iOS based servers, but nothing about simply loading a build inside WKWebView. – alanionita Commented Nov 28, 2018 at 13:45
• 1 If you haven't seen that one yet, try github./robbiehanson/CocoaHTTPServer – user5734311 Commented Nov 28, 2018 at 18:17
• 1 I'm doing reactjs + cordova and am running into issues with file:// and this plugin helped me github./TheMattRay/cordova-plugin-wkwebviewxhrfix – Jacksonkr Commented May 10, 2020 at 1:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You don't necessarily need to build react app and then load those files locally. It works but the better way is to start your local server i.e. yarn start and then specify your url (normally http://localhost:3000/, might differ according to your setup) to load in the WKWebView like this,

    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)
    }

Since your server loads files via http, App Transport Security of iOS will block it. It only allows files to be loaded via https protocol. In order to allow ATS to load via http you need to add exception for localhost or 127.0.0.1 or whichever local ipaddr your server is running on. To do that, open info.plist as source code and paste following,

<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> 

Now you should be able to access your React app in WKWebView.

You can run a local React app without a server. Just use function WkWebView.loadFileURL(url, allowingReadAccessTo: url) . You can check the detailed steps to add your React app files to your xcode project in this answer.

Remember to configure your React app to use relative paths by setting "homepage": "./" in your package.json.

本文标签： javascriptLoading a local React app inside WKWebView iOSStack Overflow