This Android project is an example template based off of the files generated from PWA Builder and is meant for those that wish to have greater control in building their own TWA apps.
While PWA Builder can automatically generate an APK without the Android Studio IDE, it is very simple for a developer with Android experience to modify the template project directly.
This option might be better if:
- There are issues using PWA Builder to generate an APK.
- A developer wishes to customize the PWA solution to meet their needs.
-
What is a PWA?
PWA = Progress Web Application. These are web apps that are built with modern APIs to deliver enhanced capabilities, reliability, and an overall better end user experience that is closer to that of a native mobile app. https://web.dev/what-are-pwas/ -
What is PWA Builder?
PWABuilder.com is a Microsoft open-source tool that can automatically package PWAs for mobile app stores. No developer experience is required. -
What is a TWA (Trusted Web Activity)?
"A 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." - Chromium Blog -
Why use this template over PWA Builder?
Some websites might not meet the necessary PWA score on PWAB and cannot be packaged. This template option is for those that wish to see how their website looks and feels as a TWA without taking the effort to meet the PWA standard first. -
Why do I see the navigation bar at the top of the screen?
"A Trusted Web Activity runs a Chrome browser full screen in an Android app, meaning there is no browser UI visible in the app, including the URL bar. This is a powerful capability so we need to verify that the app and the site belong to the same developer - hence ‘Trusted’. To verify that the app and the site opened in the TWA belong to the same developer, a TWA uses Digital Asset Links to certify ownership." - Chromium Blog -
Why does a "digital asset links verification failed" message appear?
This is a similar issue to how the navigation bar appears, occuring when the Digital Asset Links have not been setup properly (which only the website owner can do). In my testing, it has only occurred on Google Chrome.
Items to change:
- Package Name Guide
- Host URL - build.gradle(app), L26
- App Name - build.gradle(app), L28-29
- UI Color - build.gradle(app), L30-34
- Splash Page Color - build.gradle(app), L35
- App Icon Guide
- Splash Image
All splash images must be replaced with the PNG files of following square dimensions and name.
*Note: splash images might not appear on Huawei devices.
- res/drawable-hdpi/splash.png (300px square)
- res/drawable-mdpi/splash.png (450px square)
- res/drawable-xhdpi/splash.png (600px square)
- res/drawable-xxhdpi/splash.png (900px square)
- res/drawable-xxxhdpi/splash.png (1200px square)
Please note that the LauncherActivity has been modified to check for GMS availability. If GMS is detected, the TWA launcher will proceed as normal and select the best TWA provider on the device. In the case that GMS is not available, it is assumed that the app is running on a Huawei device and the TWA is force launched using the Huawei Browser.
This Android sample code is licensed under the Apache License, version 2.0
The code in this project was created from the Android template found in Bubblewrap and additions from Android Browser Helper