Skip to main content

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.