How to build PWA APK?

TWA (Trusted Web Activities):

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. 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.

Digital Asset Links :

TWA uses Digital Asset Links to certify ownership. The Digital Asset Links protocol and API enable an app or website to make public, verifiable statements about other apps or websites. For example, a website can declare that it is associated with a specific Android app, or it can declare that it wants to share user credentials with another website.

Steps to build PWA apk:

1. Add the Jetpack configuration in Project levelbuild.gradle. Under the allprojects section:

https://jitpack.io/allprojects {
   repositories {
       google()
       jcenter()
       maven { url "https://jitpack.io" }
   }
}

https://jitpack.io/allprojects {

repositories {

google()

jcenter()

maven { url "https://jitpack.io" }

}

2. Add Java 8 features Module level build.gradle. Under the compileOptionssection:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

android {

...

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

3. Add the TWA Support Library to the project. Under the dependencies section:

dependencies {
   implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'
}

dependencies {

implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'

}

4. Add TWA LauncherActivity to the AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.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="android.support.customtabs.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://airhorner.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
             airhorner.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="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

package="com.example.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="android.support.customtabs.trusted.LauncherActivity">

<meta-data

android:name="android.support.customtabs.trusted.DEFAULT_URL"

android:value="https://airhorner.com" />

<intent-filter>

</intent-filter>

<!--

This intent-filter allows the TWA to handle Intents to open

airhorner.com.

-->

<intent-filter>

<data

android:scheme="https"

android:host="airhorner.com"/>

</intent-filter>

</activity>

</application>

</manifest>

5. Add Digital AssetLinks statement to remove the URL bar.

<resources>
    <string name="app_name">AirHorner TWA</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://example.com\"}
        }]
    </string>
</resources>

<string name="app_name">AirHorner TWA</string>

[{

\"relation\": [\"delegate_permission/common.handle_all_urls\"],

\"target\": {

\"namespace\": \"web\",

\"site\": \"https://example.com\"}

}]

</string>

</resources>

We can generate assets links file from URL https://developers.google.com/digital-asset-links/tools/generator. If you will not configure Digital Asset Links JSON file properly then APK will show the URL bar.

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

[

{

"relation": [

"delegate_permission/common.handle_all_urls"

"target": {

"namespace": "android_app",

"package_name": "com.example.app",

"sha256_cert_fingerprints": [

"hash_of_app_certificate"

]

}

]

Package Name: “package_name” is the value of the applicationId attribute.

SHA-256 Fingerprint: You can generate “sha256_cert_fingerprints” using below command in terminal
Release command “keytool -exportcert -list -v \-aliaskeystorealias -keystore keystorefile.jks”
Debug command “keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android”

At the last put generated file at your host in the folder “.well-known“. It will be accessible publicly making a URL like this -> https://example.com/.well-known/assetlinks.json.

References:

https://developers.google.com/web/fundamentals/integration/webapks

https://developers.google.com/web/updates/2019/02/using-twa