Before taking a deep dive into TWA, you first need to have a basic understanding of PWA & How it works, I have added a basic overview of What is PWA & How it works
What is PWA?
Progressive Web Applications (PWA) is a relatively recent class of web applications that have evolved to provide a native web app experience to anybody using a browser. A great feature of progressive web apps is that they can function even when the device is offline. They are able to do this by making the best use of the latest technologies like push notifications, cache, secure connections, etc.
That's the overview of Progressive Web Apps. Now, we can learn about TWA Are you excited?
What is TWA?
Trusted Web Activity (TWA) displays a full-screen Chrome browser inside of an Android app with no browser UI. Although Android apps routinely include web content using a Chrome Custom Tab (CCT) or WebView, a TWA offers unique advantages when you need Chrome’s performance and features in your app in full-screen mode.
Overview of TWA
Prerequisites to deploy your TWA
A Website
Web Manifest with all required details (e.g. Splash Background, App Logo, Theme)
Criteria for TWAs for Play Store Approval
You need to create a Website Performance Report from Lighthouse (Chrome Extension)
The minimum Performance count must be 80 in Lighthouse Report
PWA Badge must be lit up in Lighthouse Report
Approaches available to create TWA Apps in Android:
Using BubbleWrap CLI Tool
Manual Development
1. Using Bubblewrap CLI Tool
Bubblewrap is a set of libraries and a command line tool (CLI) built with Node.js that helps developers generate, build and run Progressive Web Apps inside Android applications, using Trusted Web Activity.
The CLI can be installed with the following command:
npm i -g @bubblewrap/cli
To successfully run TWA App in your android app you will need to update your Web Manifest by adding some basic parameters for your Android App
Icon URL
Splash Background Color
Status Bar Color
Theme
Initialise
bubblewrap init --manifest https://my-twa.com/manifest.json
After Initialization, you need to add these details that are not found in your manifest.json You need to add them at the time of initialization.
List of things you need to have:
Domain Name
A path that points to the root of your PWA
Application name: the name used in most places, including the App information screen and on the Play Store.
Short name: an alternate name for the app, limited to 12 characters, used on a device launch screen.
Application ID: also known as Package Name, this is the unique identifier for the application on an Android device or the Play Store. The name must contain at least two segments, separated by dots, each segment must start with a letter and all characters must be alphanumeric or an underscore (_).
Display mode: how the app will be displayed on the device screen when started. The default mode, used by most apps, is standalone. fullscreen causes the device status bar and navigation bars to be removed and is suitable for games or media players. For more information on the status bars and navigation bar on Android, go to https://material.io/design/platform-guidance/android-bars.html.
Status bar color: sets the status bar color used when the application is in the foreground. (Example: #7CC0FF)
KeyStore Location
KeyStore Password
After completing the steps from init command,
Use bubblewrap build command to build an android project. Bubblewrap CLI will generate signed-apk & app-bundle in your root folder.
Now, you can upload it to the Play Store by creating an account in Google Play Console.
If you want your TWA to be developed manually & make it customisable & manageable at a point of time, you can prefer developing the TWA App manually.
2. Manual Development
To start manual development, You need to create an empty Android App Project.
Google has added an integration guide for the manual development of TWA. You can refer to it for more information about the manual development of TWA.
The next step is to add the Trusted Web Activity Support Library to the project.
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
Android Studio will show a prompt asking to synchronize the project once more. Click on the Sync Now link and synchronize it.
Next step is to add a New Activity in AndroidManifest.xml
Trusted Web Activities require an association between the Android application and the website to be established to remove the URL bar.
This association is created via Digital Asset Links and the association must be established in both ways, linking from the app to the website and from the website to the app.
It is possible to set up the app-to-website validation and set up Chrome to skip the website-to-app validation, for debugging purposes. You can use this guide to debug.
Add this String Resource in strings.xml
Add the Resource in your application (AndroidManifest.xml) using <meta-data> Tag
After adding the asset statement in AndroidManifest.xml & uploading the JSON on Server. You can run the project & the URL Bar will not appear in the App.
Now you can deploy your app to the Play Store using Google Play Console.
Pros of using TWA
No frequent releases, easy to update the code through a web push.
No codebase from the native side. Hence, No need to create different projects/repo for the app. We just need to pass the URL of the Website to a CLI Tool. The tool will generate the APK & App Bundle for release. To update the app version / change the Android-specific settings, CLI provides these features using different commands.
Easily automate the process of creating multiple apps
Cons of using TWA
The website must pass the Performance score of 80 on Lighthouse Tool.
The app will show the Chrome menu (right-click) on a Long tap, we need to manage it from our web code.
From the web part, we need to manage multiple conditions for the site to manage UX in App as well as the desktop version. (For Example, Removing the AppBar / Footer, Updating UI for mobile)
Not supported in iOS. Need to manage different codebases for iOS & Android
In Android, it totally depends on chrome. If the user externally changes any settings for the app, it may affect the app flow.
That's all folks.Keep Sharing 👏🏻 Keep Coding 🚀
Thanks for reading 🙌🏻. You can connect with me onTwitter/LinkedIn