Trusted Web Activity (TWA) - Progressive Web App (PWA) to Play Store

Trusted Web Activities provide a new way to integrate parts of your web experience, in your android app. They’re powered by Custom Tabs, which means the content is rendered user the user’s up-to-date browser instead of an out-of-date webview, it shares cookies and storage within the browser and it has access to APIs that aren’t available in WebViews.

#1 Prerequisites

#2 Build a Progressive Web App

You will need to build a web app that meets modern PWA standards. It’s beyond the scope of this guide, but your web app must…

  • Be compliant with Google Play Policies
  • Be an installable PWA
  • Achieve a lighthouse performance of 80+

#3 Clone the TWA Starter Android App

git clone git@github.com:daliborgogic/pwa-twa.git
The applicationId should follow a format of <com>.<your-brand>.<your-app>
android {
  defaultConfig {
    applicationId "com.daliborgogic.app"
    manifestPlaceholders = [
      hostName: "daliborgogic.com",
      defaultUrl: "https://daliborgogic.com",
      launcherName: "DevOops",
      assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
                        '"target": {"namespace": "web", "site": "https://daliborgogic.com"}}]'
    resValue "color", "colorPrimary", "#272838"
  }
  // omitted...
}
/app/build.gradle

The next step is to create a keystore and extract its SHA256 fingerprint. This is used to sign the APK release and verify ownership of your web content. Make note the alias and password - and do not forget the password!

First, open Android Studio and create a keystore by navigating to Build → Generate Signed Bundle/APK.

Then run the following command to extract the SHA256 fingerprint from the keystore you just created.

keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass ••••••  -keypass ••••••
Entry type: PrivateKeyEntry
...
Certificate fingerprints:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: 👈 copy this line

#4 Setup the Digital Asset Link

A digital asset link is how you verify ownership of your web content so it can be linked to the APK.

Generate the Digital Asset Statement File

Take the SHA fingerprint from the previous step and generate a statement with the digital asset links tool.

Create a file that contains the contents from the digital asset tool that is publicly accessible from your PWA's web host at the following path: .well-known/assetlinks.json

The correct location of this file is completly dependent on the build process of your web app, but the end result should be this file living in the deployed files, usually public or dist.

  • public
      • .well-known
          • assetlinks.json

    Deploy your webapp...

    #5 Build and Release on Google Play

    Go to the Google Play Console and click All Applications → Create Application

    Create an Internal Release

    Now navigate to App releases → Internal Test Track → Create release and create the release track.

    Build a Signed APK

    In Android Studio, go back to Build → Generate Signed Bundle/APK and use the same keystore we created earlier. Generate a signed release and make sure the checkboxes for both signature versions are selected.

    Upload the APK

    On the Google Play Store, upload your APK at App Releases → Internal Test Track → Edit Release, then review and roll-out.

    Complete the Store Listing

    You are must fill out ALL required information for the store listing, content rating, and pricing details. You should see four green checkmarks on the sidebar ✔️ when this process is complete.

    After you create the release, your app will be in pending publication status - just wait a few hours for it to be approved.

    Dalibor Gogic
    Dalibor Gogic

    Specializing in open web technologies and applications, evented architectures, accessibility and UX.

    DevOops
    Progressive Web App
    GET IT ON GOOGLE PLAY