Integrating Trusted Web Activities (TWA) in Your Android App

Trusted Web Activities (TWA) have been the talk of the town among developers who want a seamless integration of their web content into Android apps. If you’ve got a Progressive Web App (PWA) and are looking to give it a native feel on Android, TWAs are your best bet.

What is a Trusted Web Activity (TWA)?

TWA is essentially a full-screen Chrome Custom Tab, which allows web content to be displayed inside an Android app, without any visible browser UI. It ensures the content retains all the features and performance capabilities of the web, such as push notifications, offline access, and more.

Setting Up a TWA

Prerequisites:

• Android Studio installed
• Your PWA should meet the basic PWA criteria, such as having a service worker and being served over HTTPS.

Step-by-step Guide:

1. Create a New Android Project:
   Open Android Studio and create a new project. For simplicity, let’s name it TWAExample.
2. Add Dependencies:
   In the build.gradle (Module: app) file, add the following dependencies:

   implementation 'androidx.browser:browser:1.3.0'

3. Add the TWA Activity:
   In your AndroidManifest.xml file, add the TWA Activity:

   <activity android:name="androidx.browser.customtabs.trusted.LauncherActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN"/>
           <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>

       <meta-data
           android:name="android.support.customtabs.trusted.DEFAULT_URL"
           android:value="https://your-pwa-url.com/"/>
   </activity>

4. Configure the Digital Asset Links:
   To verify ownership between your app and your PWA, set up Digital Asset Links. Create an assetlinks.json file, and upload it to https://your-pwa-url.com/.well-known/assetlinks.json. Sample assetlinks.json:

   [{
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
       "namespace": "android_app",
       "package_name": "com.example.twaexample",
       "sha256_cert_fingerprints": ["YOUR_APP_SHA256_FINGERPRINT"]
     }
   }]

5. Launch Your TWA:
   Run your app on an emulator or a real device. It should now open your PWA in a full-screen view, looking and feeling like a native app!

Conclusion

TWAs offer a seamless way to integrate PWAs into Android apps, giving users a native experience without the overhead of maintaining two separate codebases. If you have a PWA and want it to shine on Android, it’s time to embrace TWAs!