React Storefront
|

Publishing a TWA to the Google Play Store

Overview

This guide explains how you can deploy your PWA to the Google Play Store as a TWA (Trusted Web Activity).

What is a TWA?

A Trusted Web Activity or TWA runs a Chrome browser full screen in an Android app, meaning there is no browser UI visible in the app, including the URL bar. Publising a TWA gives your business the presence of an app on the Google Play Store without having to invest in native app development, or even create a Cordova wrapped app. Simply clone the boilerplate TWA project, adjust the settings, and publish. No changes to your app's code are needed.

Prerequesites

Install Android Studio

Android Studio

Install Android Studio on your system. You'll use it to create the Android application bundle that will be deployed to the Google Play Store

Register a Google Play Developer Account

In order to publish your PWA on the Google Play Store, you'll need to register a paid developer account.

Step 1 - Configure your TWA

Gradle Build Settings

Open twa/app/build.gradle and modify the defaultConfig section. Alter the following settings:

  • The applicationId should follow a format of <com>.<your-brand>.<your-app>.
  • In manifestPlaceholders:
    • hostname - The domain name for your app. For example: www.mystore.com
    • defaultUrl - The URL of the page to display when the user launches the app. Typically your site's homepage. For example: https://www.mystore.com
    • launcherName - The name of your app.
    • assetStatements - Set the site key to the same value as defaultUrl, for example, https://www.mystore.com.
defaultConfig {
  applicationId "com.domain.pwa"  // TODO replace me with: <com>.<your-brand>.<your-app>
  ...
  manifestPlaceholders = [
    // The hostname is used when building the intent-filter, so the TWA is able to
    // handle Intents to open to your PWA.
    hostName: "www.domain.com",             // TODO replace me with the production domain
    defaultUrl: "https://www.domain.com",   // TODO replace me with the URL for the homepage
    launcherName: "My Store",               // TODO replace me with the correct app name
    // This variable below expresses the relationship between the app and the site,
    // as documented in the TWA documentation at
    // https://developers.google.com/web/updates/2017/10/using-twa#set_up_digital_asset_links_in_an_android_app
    // and is injected into the AndroidManifest.xml
    assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
            '"target": {"namespace": "web", "site": "https://www.domain.com"}}]'  // TODO replace me with the URL for the homepage
  ]

  // This attribute sets the status bar color for the TWA. It can be either set here or in
  // `res/values/colors.xml`. Setting in both places is an error and the app will not
  // compile. If not set, the status bar color defaults to #FFFFFF - white.
  resValue "color", "colorPrimary", "#272838"
}

Homescreen Icon

We recommend using Android Asset Studio to generate your icon files using your brand's image. Simply download the icon bundle from the site, unzip, and replace *twa/app/src/main/res/mipmap_** with the corresponding directories in the bundle.

A digital asset link is how you verify ownership of your web content so it can be linked to your app in the Google Play Store.

Create a Signing Key

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

New Signing Key

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

$ keytool -list -v -keystore ~/my-keystore.ks -alias twa -storepass your-password  -keypass your-password

Entry type: PrivateKeyEntry
...
Certificate fingerprints:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: 👈 copy this line

Follow the steps in Android Studio to create your release bundle. The bundle will be created in twa/app/release/app.aab.

Generate the Digital Asset Statement File

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

Paste the resulting statement in public/.well-known/assetlinks.json.

Deploy Your PWA

In order to verify your ownership of your site, the digital asset link must be accessible on the production domain. Ensure that moov-config-prod.json contains the production domain in the host_map, then deploy your changes to production:

npm run deploy -- prod

Step 3 - Build and Release on Google Play

Create Your App on Google Play

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

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.

Build a Signed App Bundle

In Android Studio, go to Build → Generate Signed Bundle/APK and follow the instructions to create your signed bundle.

Create an Internal Release

In the Google Play Console, navigate to App releases → Internal test track → Create release and create the release track. After you create the release, your app will be in pending publication status - just wait a few hours for it to be approved. Upload the app bundle you created in the previous step.

Install the Internal Test Build from Google Play

Your testers can install the internal test build from the Google Play store using the opt-in URL under Manage testers.

Promote to Production

Once you've tested the internal build of your app, you can promote it to production using the Google Play Console by going to Release Management → App releases

Releasing Updates

You only need to publish a new release to the Google Play Store if you want to change the launcher icon. Changes to PWA do not require a new release. Users will automatically use the latest version of the PWA next time they launch the app.

To publish a new release, update the following values in twa/app/build.gradle:

android {
    defaultConfig {
        versionCode 1
        versionName "0.0.1"
    }
}

Then create the signed bundle in Android Studio by selecting Build → Generate Signed Bundle/APK.

Finally, create a release using the Google Play Console, and upload the bundle.