WebView Overview

WebView technology allows mobile apps to embed web content, enabling reuse of web assets and faster development, particularly for hybrid applications. While it reduces costs and simplifies updates, it may suffer from performance and functionality limitations compared to fully native apps.

When considering WebView for an application, developers must weigh its benefits, such as development speed and cross-platform consistency, against potential drawbacks like performance limitations and reduced access to native device features.

Customer experience with WebView

In the context of Open Banking, WebView's lack of deep linking and universal link support forces bank authorization URLs to open within the WebView, disrupting user experience and compromising security. To ensure smooth and secure app interactions, it is crucial that bank-provided universal URLs are opened outside the WebView to trigger deep linking effectively.

If the entire Open Banking journey is embedded within a WebView, the banking app cannot open because WebView does not support launching external apps. As a result, customers are redirected to the bank's web login page while still embedded within your app's WebView, leading to a disjointed user experience and potentially reduced security.

Handling universal links with WebView

Since WebView does not support opening external apps, it is crucial to trigger the bank-generated universal URL outside the WebView. This ensures the banking app opens directly, bypassing the WebView and preventing the customer from having to go through the browser login flow.

Volume has implemented a method to detect when the bank's universal URL is ready to be triggered. To enable this feature, you need to pass the isWebView: true property, as shown in the example below:

    const volume = new window.Volume({
            isWebView: true,
    		environment: "LIVE",
    		applicationId: "5fd31d88-e59a-467e-b084-5c01430afced",
    		eventConsumer: (event) => {
                console.log("A VOLUME EVENT: " + event)
            },
            errorConsumer: (error) => {
                console.error(JSON.stringify(error))
            },
    	})

This will enable Volume to recognize that your app is using WebView and append a postfix (#OPEN_AS_APPLINK) to the URL. Your system can then identify the URL, remove the postfix, and open the link outside the WebView, as shown in the example below:

        // handle VOLUME OPEN BANKING authentication
        if (url.endsWith("#OPEN_AS_APPLINK")) {  // identifying the universal URL
            try {
                val urlWithoutFragment = url.replace("#OPEN_AS_APPLINK", "") // Removing the postfix
                val newUri = Uri.parse(urlWithoutFragment) // Converting cleaned URL to Uri object
                val newBrowseIntent = Intent(Intent.ACTION_VIEW).setData(newUri) // Creating an intent to view the URL
                context.startActivity(newBrowseIntent) // Starting an activity to open the URL in a browser or app
            } catch (e: Exception) {
                // log the error
            }
            return true
        }

WebView packages

While the approach outlined above is straightforward, your project may be using different packages or libraries that handle WebViews or URLs in various ways. The example provided focuses on using Intent to open an external browser, but your application might rely on a different WebView package to manage content.

For instance, if you are using the Flutter WebView package, here's how you can handle external URLs and remove a specific postfix from the URL:

navigationDelegate: (NavigationRequest request) async {
      print(request.url);
      if (request.url.endsWith("#OPEN_AS_APPLINK")) {
        var new_url = request.url.replaceAll("#OPEN_AS_APPLINK", "");
        var uri = Uri.parse(new_url);
        launchUrl(uri,
            mode: LaunchMode.externalApplication
        );
        return NavigationDecision.prevent;
      } else {
        return NavigationDecision.navigate;
      }
    }

This approach ensures that when a URL with the #OPEN_AS_APPLINK postfix is detected, the URL is modified and launched externally. However, it's crucial to carefully review the documentation of the specific WebView package you're using, as each package may offer different methods for managing URLs and triggering external actions. The correct approach will depend on the specific functionality and features provided by your chosen package.