Skip to main content

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:

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:
2

Launching a URL with Chrome Custom Tabs (Kotlin)

To open a URL using Chrome Custom Tabs:

WebView

1

Adding the WebView to Layout

You can add a WebView to your activity’s layout XML file (e.g., activity_main.xml).
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.

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 SFSafariViewController(introduced in iOS 9) for a Safari-like browsing experience.
Do not use WKWebView as it is unsupported for this product.

SFSafariViewController

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.
2

Presenting a URL with SFSafariViewController (Swift)

To present a URL using SFSafariViewController:

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.