iOS

Documentation Update in Progress

We are currently revisiting and updating this section of our documentation to ensure it provides the most accurate and helpful information. Some content may be incomplete or outdated during this process.

Thank you for your patience! If you have any immediate questions, please don’t hesitate to contact our support team.

---

This guide shows how to embed a React.js web app in a WebView for iOS using SwiftUI. It also demonstrates how to enable messaging between the web app and the host app.

Setting Up the WebView

Use WKWebView to embed the LiSA Player in an iOS application:

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let urlString: String
    
    func makeUIView(context: Context) -> WKWebView {
        let webViewConfiguration = WKWebViewConfiguration()
        webViewConfiguration.allowsInlineMediaPlayback = true
        webViewConfiguration.preferences.isElementFullscreenEnabled = true
        webViewConfiguration.mediaTypesRequiringUserActionForPlayback = []
        
        let webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
}

---

Using the WebView in SwiftUI

Here’s how to use the WebView component:

struct ContentView: View {
    private let urlString: String = "https://{clientId}.loveslisa.tech/s/{showId}"
    
    var body: some View {
        VStack {
            WebView(urlString: urlString)
                .ignoresSafeArea()
        }
    }
}