Загрузка локального приложения React внутри WKWebView iOS

Question

Я создал сайт в React и хотел бы использовать файлы сборки внутри iOS WKWebView.

---

Последующий

Чтобы запустить папку сборки React, она должна быть обслужена, поэтому в настоящее время единственный способ добиться этого - создать сервер внутри приложения iOS, предоставить файлы сборки React и загрузить локальный URL-адрес в WKWebView.

Лучший вариант, который я нашел для сервера: https://criollo.io/#getting-started.

Почему лучший?

• Работа для кодовых баз Objective-C и Swift
• Простая в использовании документация
• Сильная поддержка со стороны разработчика

Answer 1

Вам не обязательно создавать приложение реакции, а затем загружать эти файлы локально . Это работает, но лучший способ состоит в том, чтобы запустить ваш локальный сервер, то есть 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, App Transport Security iOS заблокирует его. Он позволяет загружать файлы только по протоколу https. Чтобы разрешить загрузку ATS через http, необходимо добавить исключение для localhost или 127.0.0.1 или любого локального ipaddr, на котором работает ваш сервер. Для этого откройте 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> 

Теперь вы сможете получить доступ к своему приложению React в WKWebView.