How to build PWA

Trusted Web Activity is a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app using a protocol based on Custom Tabs. PWA is gaining momentum and most big tech gaints Twitter, Youtube, Flipkart, Pintrest etc. ahve their PWA deployed to take the most out of the web plarform. Also cross platform app is getting of attention and is being used by many big platform eg. Google Pay, Groww, Flipkart had shipped their android, iOS app using either flutter or react native. So What is TWA in this world?

Key terms
TWA - Trusted web activity
PWA - Progressive web app

TWA is just a way of embedding PWA into android app so that a web version can be used as android app. Since the rise of PWA and hybrid app developers were using the webview a lot so Google cam up with a better solution to extend the support of PWA in webview. TWA is not exactly webview, rather TWA is a chrome tab that opens inside android app.

Note: I am assuming you already have a PWA built and deployed on your server. If not please get it done first.

Also I assume that you have installed and opened android studio at least once in your lifetime.

Read : How to build PWA

Use cases

You can build your web app with whatever tech stack you want (React, Angular, Vue, Custom codes etc) and the same can be used as android application by TWA

Perfomance

Unlike webview in which we have compromise on perfomance with TWA the issue is solved. The same performance we get on chrome will be available in TWA based app.

API support

Whatever is supported on browser will be supported in TWA app, eg. Camera, Mic, File selection, Notification etc

OS support

Currently its fully supported on android. Can say anything of iOS as of now.

Note: Trusted Web Activity is available in Chrome on Android, version 72 and above. And works on minimum API Level 16.

Lets get started

1. Create a new andorid project

1. Choose type "Add No Activity"
2. Give package name, Save location, Choose language
3. Minimum API Level : 16 or above

2. Add compileOptions to build.gradle (Look for the file Module next to its name)

compileOptions {
   sourceCompatibility JavaVersion.VERSION_1_8
   targetCompatibility JavaVersion.VERSION_1_8
}

3. Add dependencies to the same file

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
    .
    .
}

4. Find the file AndroidManifest.xml in app > manifests and paset the code of <activity /> inside application tag

<application android:label="@string/app_name">
    // paste here
</application>

<activity
    android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

   <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
   <meta-data
       android:name="android.support.customtabs.trusted.DEFAULT_URL"
       android:value="https://domain.com/path/of/pwa" />

    <meta-data
	    android:name="asset_statements"
	    android:resource="@string/asset_statements" />

   <!-- This intent-filter adds the Trusted Web Activity 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 Trusted Web Activity 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="domain.com"/>
   </intent-filter>
</activity>

Note: Make sure to change the domain and path of your PWA in above code

5. Establish an association from app to the website, To prove that you are the owner of the PWA came from the same owner. Copy the code for asset_statements from below

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

Paste in app > res > values > strings.xml

<resources>
    <string name="app_name">My Twa</string>
    //paste here
</resources>

Cool! TWA is almost ready

6. Now we will have to generate assetlinks.json which will hold some data that will establish the ownership of your PWA.

Requirements

1. Andoid app's Package Name
2. SHA-256 Fingerprint

Package Name: we can find this in gradle.build (The file we manipulated in step 2). Find applicationId and thats our package name

SHA-256 Fingerprint: We can find this using keytool with the following command. Don't hit the command now

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

Note: You may encounter error while using keytool command in cmd/terminal

Pro tip: Add C:\Program Files\Java\jdk-15.0.2\bin in environment variables. (This is just an example, your JDK path might be different). This is not the only solution there might be other way or the problem might be diffeerent, Just Google it.

7. Lets generate the signed APK, Go to Android studio Build > Generate signed apk

Create a new key

8. Now we can generate the SHA 256 fingerprint with the below command.

// where myKeystore.jks is the key file
// MyAlias is the alias
// MyPassword is the password and these 3 are variable
// replace these with your string you used in step 7

keytool -list -v -keystore ./myKeystore.jks -alias MyAlias -storepass MyPassword -keypass MyPassword

9. Generate assetlink.json

Navigate to asset link generator and enter the following and hit the Generate statement button
Package name (We found in step 6),
Domain name (where you hosted your PWA)
And SHA 265 (we generated in step 8)

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target" : { "namespace": "android_app", "package_name": "com.xbytelab.awesomeapp",
               "sha256_cert_fingerprints": ["1C:9A:99:3F:9---:B3:78:C2:54"] }
}]

It will generate the statement as above. Copy the statement and place it in public_html/.well-known/assetlinks.json in your server, in the same domain where you PWA is hosted.

10. Wrap up

Now generate the .apk as in step 7, install it in your device and try your awesome TWA. Your PWA should appear exactly as it opens in browser, there should be no lag in perfomance either. You can also Upload the same to Google play store and let other enjoy your TWA.

Pro tip: If you build your PWA as SPA using React, Angular, Vue or any other way and invest bit more time in implementing native like UI/UX your dont really need to build separate native android app (if you can't afford to invest in two separate code base). Many startup had already started using this technique (TWA) as this enabled them faster prototyping and launch.