A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices.
Now it’s easy to upload a PWA to digital distribution systems like Google Play Store, Apple App Store, Microsoft Store or Samsung Galaxy Store. Users can then download your PWA just like any other app. Google allows you to publish your PWA as a native app on Google Play Store via a trusted web activity (TWA). Trusted Web Activities are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on custom tabs.
Contents
Setting up a Trusted Web Activity (TWA) doesn’t require developers to author Java code, but Android Studio is required. So first, download the Android Studio and install it on your development device.
This section will guide you on setting up a new project on Android Studio.
To setup the TWA library in the project you will need to edit the Application build file. Look for the Gradle Scripts section in the Project Navigator. There are two files called build.gradle, which may be a bit confusing and the descriptions in parenthesis help identifying the correct one. The file we are looking for is the one with Module next to its name. The Trusted Web Activities library uses Java 8 features and the first change enables Java 8. Add a compileOptions section to the bottom of the android section, as below:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
The next step will add the TWA Support Library to the project. Add a new dependency to the dependencies section:
dependencies {
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.0.0'
}
Android Studio will show prompt asking to synchronize the project once more. Click on the ‘Sync Now’ link and synchronize it.
Setting up the TWA Activity is achieved by editing the Android App Manifest.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity
android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
<!-- Edit android:value to change the url opened by the TWA -->
<meta-data
android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="https://yourwebsite.com" />
<!-- This intent-filter adds the TWA 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 TWA to handle Intents to open
yourwebsite.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:scheme="https"
android:host="yourwebsite.com"/>
</intent-filter>
</activity>
</application>
</manifest>
The tags added to the XML are standard Android App Manifest. There are two relevant pieces of information for the context of Trusted Web Activities:
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 setup the app to website validation and setup Chrome to skip the website to app validation, for debugging purposes.
a. Establish an association the from app to your website
Open the string resources file app > res > values > strings.xml and add the Digital AssetLinks statement below:
<resources>
<string name="app_name">My App</string>
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://yourwebsite.com\"}
}]
</string>
</resources>
Change the contents for the site attribute to match the schema and domain opened by the TWA. Back in the Android App Manifest file, AndroidManifest.xml, link to the statement by adding a new meta-data tag, but this time as a child of the application tag:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.twa.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="asset_statements"
android:resource="@string/asset_statements" />
<activity>
...
</activity>
</application>
</manifest>
b. Debug mode
After establishing a relationship from the Android application to the website. It is helpful to debug this part of the relationship without creating the website to application validation. Here’s how to test this on a development device:
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://yourwebsite.com\"' > /data/local/tmp/chrome-command-line"
Close Chrome and re-launch your application from Android Studio. The application should now be shown in full-screen.
c. Establish an association from your website to the app
There are 2 pieces of information that the developer needs to collect from the app in order to create the association:
You can generate an upload key using Android Studio as follows:
You must have Java installed in your Windows PC. To located the keytool;
Make sure to take note the path, alias and passwords for the key store, as you will need it for the next step. Extract the SHA-256 fingerprint using the keytool, with the following command:
keytool -list -v -keystore -alias -storepass -keypass
If the above command does not work. Just copy your keystore file to your computer’s admin user folder. For example; C:\Users\Victor Mochere. Rename the keystore file to simply ‘.keystore‘ and then type the following command:
keytool -list -v
The value for the SHA-256 fingerprint is printed under the certificate fingerprints section. Here’s an example output:
keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password
Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3
With both pieces of information at hand, head over to the assetlinks generator, fill-in the fields and hit ‘Generate Statement’. Copy the generated statement and serve it from your domain, from the URL /.well-known/assetlinks.json. You can then hit ‘Test Statement’ to see if the association has been established correctly.
Here is a simple way to create and upload .json file to your website.
Note:
If you have opted into Google Play signing your app releases. Then to remove the URL bar, you will have to use the SHA-256 fingerprint generated by Google Play for your assetlinks.json file. Go to Google Play Console > Release management > App signing, then copy the App signing certificate SHA-256 fingerprint and paste it into your assetlinks.json file.
When Android Studio creates a new project, it will come with a default icon. As a developer, you will want to create your own icon and differentiate your application from others on the Android Launcher. Android Studio contains the Image Asset Studio, which provides the tools necessary to create the correct icons, for every resolution and shape your application needs. Inside Android Studio, navigate to File > New > Image Asset, select Launcher Icons (Adaptative and Legacy) and follow the steps from the wizard to create a custom icon for the application.
Android Studio contains the Vector Asset Studio, which provides the tools to help developers to transform SVGs into Android Vector Drawables. Inside Android Studio, navigate to File > New > Vector Asset to get started. Android devices can have different screen sizes and pixel densities. To ensure the splash screen looks good on all devices, you will need to generate the image for each pixel density. Below is a list with the pixel densities, the multiplier applied to the base size (320x320dp), the resulting size in pixels and the location where the image should be added in the Android Studio project.
Density | Multiplier | Size | Project Location |
mdpi (baseline) | 1.0x | 320×320 px | /res/drawable-mdpi/ |
ldpi | 0.75x | 240×240 px | /res/drawable-ldpi/ |
hdpi | 1.5x | 480×480 px | /res/drawable-hdpi/ |
xhdpi | 2.0x | 640×640 px | /res/drawable-xhdpi/ |
xxhdpi | 3.0x | 960×960 px | /res/drawable-xxhdpi/ |
xxxhdpi | 4.0x | 1280×1280 px | /res/drawable-xxxhdpi/ |
With the images for the icon and splash screen generated, it’s time to add the necessary configurations to the project. First, add a content-provider to the Android Manifest (AndroidManifest.xml).
<application>
...
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.example.twa.myapplication.fileprovider"
android:grantUriPermissions="true"
android:exported="false">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/filepaths" />
</provider>
</application>
Make sure to change the android:authorities attribute when creating the provider, as two applications cannot have the same authority on a device. Then, add res/xml/filepaths.xml resource, and specify the path to the twa splash screen:
<paths>
<files-path path="twa_splash/" name="twa_splash" />
</paths>
Finally, add meta-tags to the Android Manifest to customize the LauncherActivity:
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
...
<meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
android:resource="@drawable/splash"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
android:resource="@color/colorPrimary"/>
<meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
android:value="300"/>
<meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
android:value="com.example.twa.myapplication.fileprovider"/>
...
</activity>
Ensure that the value of the android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY tag matches the value defined of the android:authorities attribute inside the provider tag.
Additionally, make sure the LauncherActivity is transparent to avoid a white screen showing before the splash. Add a new theme to res/styles.xml:
<style name="Theme.LauncherActivity" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowAnimationStyle">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Then, add a reference to the new style in the Android Manifest:
<application>
...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
android:theme="@style/Theme.LauncherActivity">
...
</activity>
</application>
Building an app bundle instead of APK for upload to Google Play Store has the following benefits.
To build your app ready for signing; in the menu bar, click Build > Build Bundle(s) / APK(s) > Build Bundle(s).
Here is how to generate a signed app bundle.
After you build and sign the release version of your app, the next step is to upload it to Google Play Store. And remember that Google Play supports compressed app downloads of only 150 MB or less.
Victor Mochere is an award winning blogger, social media influencer, literati savant, altruistic, and a netpreneur creating and marketing digital content.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Permission to use quotation from any article is granted subject to full credit of the source being given by referencing the direct link of the article on Victor Mochere. However, reproducing any content on this site without explicit permission is strictly prohibited.
We are committed to upholding our editorial standards, including accuracy. Our policy is to review each issue on a case by case basis, immediately upon becoming aware of a potential error or need for clarification, and to resolve it as quickly as possible. If you notice an error or typo that needs correction, please don’t hesitate to contact us for immediate action.
Victor Mochere brings you a daily dose of well curated up to date facts, news, opinions and important updates from Kenya, Africa and around the World.
Copyright © 2021 Victor Mochere. All rights reserved.
Copyright © 2021 Victor Mochere. All rights reserved.
O PWA é baseado no seu site e exibe o conteúdo do seu site. A Play Store é apenas para fins de distribuição.
O @ drawable / splash é aquele que gera a tela inicial / inicial.
Bienvenidos