iOS WebView

Integrating the web onboarding flow into a WebView can be summed up in three straight forward steps:

Setup permissions for the camera.
Build the WKWebView.
Handle the redirect from WKNavigationDelegate.

Demo App

To see a full example or to follow along, you may download the demo project here.

Build the WebView

Create the `WKWebView`

private lazy var webView: WKWebView() {
    let webView = WKWebView()
    webView.navigationDelegate = self
    webView.allowsBackForwardNavigationGestures = false
    webView.scrollView.bounces = false
    webView.translatesAutoresizingMaskIntoConstraints = false
    return webView
}

Build the `URLRequest`

Initially loading Branch is simply a matter of providing the Branch accounts url to your webview with the appropriate parameters. There are various optional parameters in addition to what's seen below, which are documented here.

var urlComponents = URLComponents(string: "https://accounts.branchapp.com")
urlComponents?.queryItems = [
    URLQueryItem(name: "embedded", value: "native"),
    URLQueryItem(name: "org", value: "100019"),
    URLQueryItem(name: "callbackUrl", value: "https://branchapp.com/")
]

Load the `WKWebView`

guard let urlString = urlComponents?.string, let url = URL(string: urlString) else { return }
self.webView.load(URLRequest(url: url))

Implement `WKNavigationDelegate`

guard let urlString = navigationAction.request.url?.absoluteString, urlString == "https://branchapp.com/" else {
    decisionHandler(.allow)
    return
}

decisionHandler(.cancel)

Camera Permissions

Web onboarding requires access to the camera, so therefore requires the NSCameraUsageDescription key in you app’s Info.plist. For additional information you can check out Apple’s Developer Documentation.

Demo App#

Build the WebView#

Create the WKWebView#

Build the URLRequest#

Load the WKWebView#

Implement WKNavigationDelegate#

Camera Permissions#