Introduction to Trusted Web Activity for Android

Hello folks. In this article I will explain what Trusted Web Activities are in Android Development.

Photo by The Average Tech Guy on Unsplash

1: What is Trusted Web Activity?

Trusted Web Activity is a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app using a protocol based on Custom Tabs. (Chrome for Developers)
Basically, TWA allows you to turn a PWA application you have developed into a native Android application. It runs Chrome in the background, but behaves like a native app on the device.

TWA flow by Henry Lim from his presentation

2: Why Use Trusted Web Activity?

Offering a seamless user experience by integrating web content directly within Android applications, improving performance, and providing a more immersive user interface compared to traditional web views. (A PWA and IWA are cross-platform compatible. While a TWA can only be installed on Android. A PWA can only be installed from within the browser but the TWA and IWA can be installed from some famous software distribution platforms.)

3: How Does Trusted Web Activity Work?

Trusted Web Activity works with these 3 things:

1. HTTPS Requirement: TWA requires the web content to be served over HTTPS to ensure secure, encrypted communication.
2. Digital Asset Links (DAL): TWAs use DAL to verify the ownership of the website being displayed in the app. This involves linking the app to the website through a digital signature, ensuring that only the legitimate app can display the website’s content.
3. Chrome Custom Tabs: The web content in TWA is rendered using Chrome Custom Tabs, which provides a seamless browsing experience, leveraging Chrome’s performance and security features. This allows the web content to use modern web technologies and integrates closely with the user’s Chrome environment (e.g., saved passwords, autofill information).

Differences from WebView

Performance: TWAs, being powered by Chrome, typically offer better performance and compatibility with web standards than WebView.

Security: TWAs benefit from Chrome’s security features, such as site isolation and Safe Browsing, making them more secure than WebView.

User Experience: TWAs provide a more integrated user experience by leveraging Chrome’s features, such as shared cookie storage and autofill, which WebView does not offer.

In summary, TWAs are a secure and efficient way to incorporate web content into Android apps, providing better performance, security, and user experience than traditional WebViews.

Let’s put this into practice.

Create a Trusted Web Activity Project

Open Android Studio and click on Start a new Android Studio project.

Android Studio will prompt to choose an Activity type. Since Trusted Web Activities use an Activity provided by support library, choose Add No Activity and click Next.

The next step will add the Trusted Web Activity Support Library to the project. Add a new dependency to the dependencies section:

dependencies {
    .
    .
    .

    implementation("com.google.androidbrowserhelper:androidbrowserhelper:2.5.0")
}

Launch the Trusted Web Activity

Setting up the Trusted Web Activity is achieved by editing the Android App Manifest.

On the Project Navigator, expand the app section, followed by the manifests and double click on AndroidManifest.xml to open the file.

Since we asked Android Studio not to add any Activity to our project when creating it, the manifest is empty and contains only the application tag.

Add the Trusted Web Activity by inserting an activity tag into the application tag:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Twademo"
        tools:ignore="GoogleAppIndexingWarning"
        tools:targetApi="31">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
            android:exported="true">

            <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
            <meta-data
                android:name="android.support.customtabs.trusted.DEFAULT_URL"
                android:value="https://airhorner.com" />

            <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <!--
              This intent-filter allows the Trusted Web Activity to handle Intents to open
              airhorner.com.
            -->
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <!-- Edit android:host to handle links to the target URL-->
                <data
                    android:host="airhorner.com"
                    android:scheme="https" />
            </intent-filter>
        </activity>
    </application>
</manifest>

1. The meta-data tag tells the Trusted Web Activity which URL it should open. Change the android:value attribute with the URL of the PWA you want to open. In this example, it is https://airhorner.com.
2. The second intent-filter tag allows the Trusted Web Activity to intercept Android Intents that open https://airhorner.com. The android:host attribute inside the data tag must point to the domain being opened by the Trusted Web Activity.

Remove the URL bar

If you have your own PWA you can delete the browser URL bar:

Remove browser URL bar in TWA

Integration Guide | Web on Android | Chrome for Developers

Source code of this example

GitHub - mergencdev/twa-demo

👋