When I first heard about Trusted Web Activity (TWA) I was very amazed and excited to publish my first app on play store. Recently I have published my Next.js (React SSR) PWA on Google Play Store as TWA and I will try to share all information, process and experiences about TWA in this article.
As you already know, TWA is a way of publishing your PWA on Play Store. It runs in a Chrome instance or Chrome Custom Tab (CCT) on a user's device. It gives way beyond features than a web-view on an android app, such as - Web Push Notification, Background Sync, Chrome Form Autofill, Media Source Extensions (MSE) and Web Share API.
Why TWA?
So far I have gathered some of my personal experiences regarding TWA. Including -
- Efficient codebase - This technology gives a company or a developer to maintain a single code base for most of the platform which is very efficient,
- Instant update - Updates on TWA doesn’t require to go through the review process of Play Store after every update, which saves time and serves to the user instantly,
- Device Compatibility - Most of the android app developers face a problem of providing support to every devices, specially for the devices having less amount of RAM. But for TWA, it isn't required to test for all device models as it works on every device that supports Chrome 72+.
Criterias for TWA
This is actually the most important part to publish your app on Play Store. To publish your web app on play store some requirements need to fulfilled, such as -
- To become a TWA, web-apps need to be a PWA at first. Which means, you have to fulfill all the requirements of PWA. Some articles say that loading speed is measured using Lighthouse and web content in TWAs must achieve a performance score of 80. But in my case, I had to use libraries like Material UI and others to deliver the app ASAP, that’s why I had to compromise with my app performance which was 66 (measured by Lighthouse). But After going through the review process of the Play Store, my app was finally approved. That's why I think having the performance score of 80 isn’t a requirement anymore for TWA.
- TWA needs to have a Digital Assets Link which proves both app has been published by the same developer,
- The app must meet the Play Store policies. As google can't always guarantee that your web contents meet the Family Program Requirements, you have to select your audience age should be 13+ while publishing your app through Play Console.
Setting up the Environment
Get the Java Development Kit (JDK) 8
The Android Command line tools requires the correct version of the JDK to run. To prevent version conflicts with a JDK version that is already installed, Bubblewrap uses a JDK that can be unzipped in a separate folder.
Download a version of JDK 8 that is compatible with your OS from AdoptOpenJDK and extract it in its own folder.
Warning: Using a version lower than 8 will make it impossible to compile the project and higher versions are incompatible with the Android command line tools.
Get the Android command line tools
Download a version of Android command line tools that is compatible with your OS from https://developer.android.com/studio#command-tools. Create a folder and extract the downloaded file into it. This will further install the androidSdk and android SDK manager without needing to install the whole Android IDE.
Tell Bubblewrap where the JDK and Android command line tools are
When running bubblewrap for the first time, it will ask where it can find the JDK and Android command line tools. So, take note of the location where both were decompressed.
To ensure if you are taking note of the correct location, check if each directory contains the following files:
- The OpenJDK path should contain bin,com,include ..
- The AndroidSDK path should contain tools which should have bin, cli
Updating the location of the JDK and / or the Android command line tools
If the location for the JDK or the Android command line tools have been setup with the wrong path or if their location has changed after the initial configuration, the location for either of those can be changed by editing the configuration file at ${USER_HOME}/.llama-pack/llama-pack-config.json.
Sample llama-pack-config.json
{
"jdkPath":"\\user\\home\\bubblewrap-user\\open-jdk",
"androidSdkPath":"\\user\\home\\bubblewrap-user\\android-cli"
}
Quick-start Guide
Installing Bubblewrap
npm i -g @bubblewrap/cli
Initializing an Android Project
Generate an Android project from an existing Web Manifest:
bubblewrap init --manifest https://your-web-app-url.com/manifest.json
When initializing a project, Bubblewrap will download the Web Manifest and ask you to confirm the values that should be used when building the Android project.
It will also ask you for the details needed to generate a signing key, used to sign the app before uploading to the Play Store.
Building the Android Project
bubblewrap build
When building the project for the first time, the Android Build Tools will need to be installed. The tool will invoke the installation process for the build tools. Make sure to read and accept the license agreement before proceeding. This process will install the other required files inside the directory/decompressed root directory of the android CLI package.
As a result of the build step, the tool will generate a signed APK (app-release-signed.apk) and an unsigned APK (app-release-unsigned.apk). You can choose any of them to be uploaded to the Play Store.
Publish your App through Play Console
You can choose to upload the unsigned APK and let Google manage your app's signing key. Go to Google Play console and signup for your developer account if you don’t have any. You’ll need to pay $25 to create this account. Then create an alpha, beta or internal release for your App. You can follow their guidelines to create your releases. Don’t forget to choose the age range from 13+ or your app publishing request won’t be accepted.
Creating Asset Link File
To create an Asset Link, you need to have a JSON file accessible from your web app URL. The URL of that JSON file should be https://your-web-app-url/.well-known/assetlinks.json. As mentioned earlier, I have used Next.js to build my web-app. If you have done the same, then create a folder named .well-known in your public folder of your project directory. In that folder create a file named assetlinks.json.
Then go to Google Play Console, select your app release and copy SHA-256 certificate fingerprint from under the App signing certificate section. Edit your assetlinks.json file like this,
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.appspot.pwa_directory",
"sha256_cert_fingerprints": [
"FA:2A:03:CB:38:9C:F3:BE:28:E3:CA:7F:DA:2E:FA:4F:4A:96:F3:BC:45:2C:08:A2:16:A1:5D:FD:AB:46:BC:9D",
]
}
}]
Change the package_name value that was given or created when you have built you APK using Bubblewrap. Usually it becomes like com.your-web-app-url.pwa where your web-app URL might be https://pwa.your-web-app-url.com. Place sha256_cert_fingerprints value of SHA-256 certificate fingerprint that was copied from Google Play Console. Don’t forget to publish this JSON file ASAP after you applied for publishing your android app to Play Store.
Wait For Confirmation
After finishing the procedure as mentioned above, wait for the confirmation from Play Store authority about publishing your app. Usually it takes 1-2 days to finish the review process. But I published my app in June 2020 and due to COVID-19 situation Google took more time to finish the review process.
After submitting for review Google confirmed the publication of my first TWA app on Play Store after 5 days. Try publishing your web app on Google Play Store today. Happy Coding!
Top comments (8)
Hey, thanks for the tut! I had a doubt, if sometime later I have to rebuild the apk do I have to delete everything and go through all of this process again or bubblewrap build will figure out the changes?
Generally, you don't have to rebuild the apk unless you are changing your app icon. The UI and other functionality will be automatically updated based in your front-end code base.
If you have to change the apk again you just have to navigate through CMD/ terminal to the android project you have already created for the project, and enter
bubblewrap build. You'll get an updated APK.Oh got it, once again, thanks for this!
First time hearing about TWA, Thanks for the article.
You're welcome. Please feel free to ask your queries regarding TWA. :)
My app got rejected as it was 3+ age rating.
They said that Family friendly apps should not be TWAs. So I gave up.
Thanks for the tip "Don’t forget to choose the age range from 13+ or your app publishing request won’t be accepted"
Now I will try again publishing ♥️
Yes, my app also got rejected at the first attempt. That application was developed to buy flight tickets and travel packages. Thats why selecting an age group over 13 years was logical for this app. Thus, you guys can also select your age groups as per your requirements.
What is your app called. Need to see it in action