Skip to main content
Version: Current

Integrating a Web View in Mobile Applications

This document outlines the technical steps for integrating a web view component within native Android or iOS mobile apps. This allows you to display a web page, specified by a URL, directly within your mobile app, providing a seamless, integrated user experience.

Android Application Integration​

Integrating a web view into an Android application involves adding a WebView component or utilizing Chrome Custom Tabs to load the desired URL.

Permissions​

Before you can load any web content, your AndroidManifest.xml file must include the INTERNET permission. Add the following line inside the <manifest> tag:

<uses-permission android:name="android.permission.INTERNET" />

Chrome Custom Tabs​

Chrome Custom Tabs provide a way for Android apps to open web links directly in a customized Chrome browser experience. This offers better performance and security than WebView for external links.

  1. Add Dependency

First, add the Custom Tabs support library to your build.gradle (app-level) file:

dependencies {
    implementation "androidx.browser:browser:1.4.0" // Use the latest version
}
  1. Launching a URL with Chrome Custom Tabs (Kotlin)

To open a URL using Chrome Custom Tabs:

// In your Activity or Fragment
import android.net.Uri
import androidx.browser.customtabs.CustomTabsIntent
import androidx.core.content.ContextCompat

// ... inside a method, e.g., onClick listener
fun openUrlInCustomTab(url: String) {
    val builder = CustomTabsIntent.Builder()

    // Optional: Customize the toolbar color
    builder.setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary))

    // Optional: Add a custom close button (e.g., from your drawables)
    // builder.setCloseButtonIcon(BitmapFactory.decodeResource(resources, R.drawable.ic_arrow_back))

    // Optional: Enable the share action button
    builder.setShowShareButton(true)

    // Build the CustomTabsIntent
    val customTabsIntent = builder.build()

    // Launch the URL
    customTabsIntent.launchUrl(this, Uri.parse(url))
}

// Example usage:
// openUrlInCustomTab("https://www.example.com")

​

WebView​

1. Adding the WebView to Layout​

You can add a WebView to your activity's layout XML file (e.g., activity_main.xml).

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

2. Loading a URL in the Activity (Kotlin)​

In your activity's Kotlin code, you will find the WebView by its ID and then load the URL.

// MainActivity.kt
package com.example.mywebviewapp

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView: WebView = findViewById(R.id.webView)

        // Configure WebView settings (optional but recommended)
        webView.settings.javaScriptEnabled = true // Enable JavaScript
        webView.settings.domStorageEnabled = true // Enable DOM storage

        // Set a WebViewClient to handle page navigation within the WebView itself
        webView.webViewClient = object : WebViewClient() {
            // This method is called when a new URL is about to be loaded in the WebView.
            // Returning true means the WebView will handle the URL, false means the system will.
            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                view?.loadUrl(url!!)
                return true
            }
        }

        // Load the specified URL
        val urlToLoad = "https://www.example.com" // Replace with your supplied URL
        webView.loadUrl(urlToLoad)
    }

    // Handle back button presses to navigate within the WebView history
    override fun onBackPressed() {
        val webView: WebView = findViewById(R.id.webView)
        if (webView.canGoBack()) {
            webView.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

Important Considerations for Android​

  • WebViewClient (for WebView): Always set a WebViewClient to keep navigation within your WebView. Without it, Android might open external links in the device's default browser, which we don’t want. We want to keep the user within your mobile app.
  • WebChromeClient (for WebView): For handling JavaScript alerts, prompts, console messages, and progress updates, you should also set a WebChromeClient.
  • JavaScript alert() (for WebView): WebView does not natively handle alert() calls from JavaScript in a user-friendly way. If your web content uses alert(), you'll need to override onJsAlert in WebChromeClient to display a custom dialog.
  • Security: Be cautious when loading untrusted content in WebView. Sanitize URLs and restrict permissions where possible. Chrome Custom Tabs offer enhanced security as they run in a separate process and leverage the browser's security model.
  • Hardware Acceleration (for WebView): WebView generally benefits from hardware acceleration, which is enabled by default for apps targeting Android 3.0 (API level 11) and higher.
  • Fallback for Custom Tabs: Always consider a fallback for devices where Chrome or a Custom Tabs-supporting browser is not installed. You might open a WebView or the default browser as an alternative.

iOS Application Integration​

In iOS, you use WKWebView (introduced in iOS 8) to embed web content or SFSafariViewController (introduced in iOS 9, recommended) for a Safari-like browsing experience.

SFSafariViewController (Preferred)​

SFSafariViewController provides a secure and performant way to display web content within your app, leveraging Safari's features like AutoFill, Reading List, and Shared Cookies. It's ideal for presenting external web content.

1. Import SafariServices​

First, import the SafariServices framework into your ViewController.

// ViewController.swift
import UIKit
import SafariServices

2. Presenting a URL with SFSafariViewController (Swift)​

To present a URL using SFSafariViewController:

import UIKit
import SafariServices

class ViewController: UIViewController {
    func didTapButton() {
        guard let url = URL(string: "http://www.example.com") else {
            return
        }

        open(url: url)
    }

    private func open(url: URL) {
        let safariVC = SFSafariViewController(url: url)

        // Optional: Customize the tint color
        safariVC.preferredControlTintColor = .blue
        safariVC.preferredBarTintColor = .lightGray

        // Present the SFSafariViewController
        present(safariVC, animated: true, completion: nil)
    }
}

​

WKWebView (advanced)​

1. Import WebKit​

First, import the WebKit framework into your ViewController.

// ViewController.swift
import UIKit
import WebKit

2. Add WKWebView to your ViewController (Swift)​

You can add WKWebView programmatically or using Interface Builder (Storyboard/XIB). The programmatic approach is shown here for clarity.

// ViewController.swift
import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Initialize WKWebView and set its frame
        webView = WKWebView(frame: self.view.bounds, configuration: .init())
        webView.navigationDelegate = self // Set the navigation delegate
        self.view.addSubview(webView) // Add the webView to the view hierarchy

        // Setup layout constraints
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            webView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
            webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
        ])

        // Load the specified URL
        if let url = URL(string: "https://www.example.com") { // Replace with your supplied URL
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    // MARK: - WKNavigationDelegate Methods (Optional but Recommended)

    // Optional: Add a refresh button
    @IBAction func refreshWebView(_ sender: Any) {
        webView.reload()
    }

    // Optional: Add back navigation button
    @IBAction func goBack(_ sender: Any) {
        if webView.canGoBack {
            webView.goBack()
        }
    }

    // Optional: Add forward navigation button
    @IBAction func goForward(_ sender: Any) {
        if webView.canGoForward {
            webView.goForward()
        }
    }
}

Important Considerations for iOS​

  • SFSafariViewController Benefits: Offers shared cookie storage with Safari, better performance, and access to Safari's features. It's managed by the system, providing a consistent experience.
  • SFSafariViewController Limitations: Customization options are limited by design to maintain user trust and consistency with Safari. It is not intended for displaying your own app's web content but rather for opening external links.
  • Error Handling: Implement delegate methods for WKWebView (e.g., webView(_:didFailProvisionalNavigation:withError:)) and handle URL parsing errors for SFSafariViewController gracefully.