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.