• How to Get a Progressive Web App into the Google Play Store
  • Originally written by Mateusz Rybczonek
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Baddyo
  • Proofreader: Linxiaowu66, Xuyuey

PWA (Progressive Web Apps) has been around for a while. However, whenever I introduce PWA to customers, they always ask the same question: “Can my customers download and install this PWA from the app store?” The answer used to be no, but the answer has changed since The release of Chrome 72, which adds a new feature called TWA (Trusted Web Activities).

TWA uses a new way to integrate your Web application content (such as PWA) into your Android application using a Custom Tabs based protocol.

In this article, I’ll use Netguru’s existing PWA (Wordguru) to walk you through how to get PWA support installed directly from the Google Play Store.

For Android developers, some of what we’re about to mention may sound silly, but this article is written from the perspective of a front-end developer, especially one who has never used Android Studio or worked as a front-end developer for Android applications. Also note that many of the concepts we explore in this article only support Chrome 72 and above, so they are very experimental and forward thinking.

Step 1: Configure a TWA project

Configuration TWA doesn’t need to write Java code, but you need to install the Android Studio (translator’s note: this Android Studio links can’t open, accessible developer. The Android, Google. Cn/Studio). If you’ve developed iOS or Mac software before, Android Studio looks a lot like Xcode, providing a nice development environment designed to simplify the Android development process. Well, go ahead and set it up, and I’ll see you later.

Create a new TWA project in Android Studio

Have you installed Android Studio properly? HMM… I can’t hear you either, so let’s just assume you’ve faked it. Open Android Studio and click “Start a New Android Studio Project”. Here, we select the “Add No Activity” option so that we can manually configure the project.

While the configuration process is fairly straightforward, the following concepts are important to understand:

  • Name: The Name of the application (I bet you know this).
  • Package name: Android apps inPlay App StoretheA unique identifier. The package name must be unique, so I recommend that you use the reverse order string of PWA’s URL (e.gcom.netguru.wordguru).
  • Save Location: The local location where the project is saved.
  • Language: Allows you to select a specific programming Language, but since the application we are using is already written, we do not need to set this. Just leave the default — Java — on.
  • Minimum API Level: This is the version of the Android API we are using and is required by the support library (described below). We chose API version 19.

There are also several check boxes under these options. They are irrelevant to this practice, so leave them unchecked and click Finish.

Add the TWA support library

TWA cannot do without a support library. Fortunately, we only need to modify two files, both of which are in the same project folder: Gradle Scripts. The file name for both of them is build.gradle, but we can tell them apart by the descriptions in parentheses.

Here I would like to introduce a Git package management tool for Android applications, called JitPack. It’s powerful, and at its most basic, it makes publishing an app a breeze. It’s a paid service, but if this is your first launch in the Google Play Store, I’d say it’s worth the expense.

Note: This is not an advertisement for the JitPack. It is worth mentioning because this article is written for people who are not familiar with Android app development or have not published an app in the Google Play Store, and it is very easy to manage an Android app codebase directly connected to the App Store. By implication, this tool is not a development necessity.

Once you open the JitPack, you can plug in your own projects. Open the build.gradle (Project: Wordguru) file you just saw and make the following changes to let JitPack manage the application code base.

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io'}... }}Copy the code

Now open another build.gradle file. We can add dependencies for the project to this file, and of course we do add one:

// build.gradle (module: app)

dependencies {
  ...
  implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'. }Copy the code

TWA uses Java 8 functionality, so we want to enable Java 8. We’ll add the compileOptions field to the file we just created:

// build.gradle (module: app)

android {
  ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  ...
}
Copy the code

Add the Manifestplaceholder variables, which we will cover in the next section. For now, just add the following code to define the hosting domain, default URL, and app name for your app:

// build.gradle (module: app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      hostName: "wordguru.netguru.com".defaultUrl: "https://wordguru.netguru.com".launcherName: "Wordguru"]... }... }Copy the code

Provide application details in the Android Application Manifest

Every Android App has an Android App Manifest, which provides the basic details of the App, such as operating system support, package information, device compatibility, and much more, This information helps the Google Play Store display the conditions under which the app is operating.

What we really care about here is the Activity (< Activity >). The Activity is used to implement the user interface and stands for the “A” in “TWA”.

Interestingly, when we configure the project in Android Studio, we select the “Add No Activity” option because our app description is empty and only contains the app TAB.

Start by opening the manifest file. If you want to replace the existing package value with your application ID, and if you want to replace the label value with the corresponding launcherName variable, which we defined in the Manifestplaceholder variable group in the previous section.

Next, we’ll actually add the Activity component to TWA by adding a < Activity > tag to the < Application > tag.

<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.netguru.wordguru">/ / the key<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="${launcherName}"/ / the keyandroid:supportsRtl="true"
    android:theme="@style/AppTheme">

    <activity
      android:name="android.support.customtabs.trusted.LauncherActivity"
      android:label="${launcherName}">/ / the key<meta-data
        android:name="android.support.customtabs.trusted.DEFAULT_URL"
        android:value="${defaultUrl}" />/ / the key<intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>

      
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE"/>
        <data
          android:scheme="https"
          android:host="${hostName}"/>/ / the key</intent-filter>
    </activity>
  </application>
</manifest>
Copy the code

Here, folks, we have completed our first step. Then take the second step.

Step 2: Verify the relationship between the site and the application

TWA needs to connect Android apps to PWA. So we’re going to use Digital Asset Links.

Both ends of the connection must be set up, TWA being the application side and PWA being the website side.

So we have to modify the Manifestplaceholder again to build connectivity. This time, we will add an additional element called assetStatements, which record information about the PWA.

// build.gradle (module: app)

android {
  ...
  defaultConfig {
    ...
    manifestPlaceholders = [
      ...
      assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
        '"target": {"namespace": "web", "site": "https://wordguru.netguru.com"}}]'. ] . }... }Copy the code

Add a meta-data tag to the application. This tag tells the Android application that we want to connect to the application specified in the Manifestplaceholder.

<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  package="${packageId}">

  <application>.<meta-data
        android:name="asset_statements"
        android:value="${assetStatements}" />.</application>
</manifest>
Copy the code

That’s it! We’ve already established a connection for the application to the website. Now enter the linking process from the website to the application.

To establish the connection in the opposite direction, we need to create a.json file with the path to the application’s /.well-known/assetlinks.json. This file is generated using Android Studio’s built-in generator. You see, I’m telling you, Android Studio simplifies the development process!

Three values need to be set to generate this file:

  • Hosting Site Domain: This is the URL of PWA (e.ghttps://wordguru.netguru.com/).
  • App Package Name: This is the package name of TWA (e.gcom.netguru.wordguru).
  • App Package Fingerprint (SHA256) : This is a unique encrypted hash generated based on the Google Play App Store keystore.

We already have the first two values. The last value is generated by Android Studio.

The first step is to generate a signed APK. Build (Build) → Generate Signed Bundle or APK → Generate Signed Bundle or APK

Next, if you already have a keystore, use one; If not, click “Create New…” Create one.

Then fill out the form. Keep in mind that these credentials are your app’s signature that confirms your ownership of your app.

This creates a keystore file that is used to generate the application package key (SHA256). This file is extremely important because it proves that you own the application. If this file is lost, you will never be able to update the corresponding app in the App Store.

Next, we choose the type of the bundle. Select “Release” because it will generate a production application for us. We also need to check the signed version.

This will generate the APK file, which will be published later in the Google Play App Store. Once the keystore is created, it is used to generate the required application package key (SHA256 format).

Go back to Android Studio and find Tools → App Links Assistant. Go to step 3, Declare Website Association, and fill in the required information: Site Domain and Application ID. After that, select the keystore file generated in the previous step.

Once the form is filled out, click on “Generate Digital Asset Links File” to Generate the assetlinks.json file. If you open the file, you’ll see something like this:

[{
  "relation": ["delegate_permission/common.handle_all_urls"]."target": {
    "namespace": "android_app"."package_name": "com.netguru.wordguru"."sha256_cert_fingerprints": ["8A:F4:.... : then."]}}]Copy the code

This is exactly the file we need to use in the application’s /.well-known/assetlinks.json path. I won’t explain how to use this file in this path, because it varies from project to project and is beyond the scope of this article.

We can test the connection by clicking the Link and Verify button. If all goes well, you’ll see “Success!” Such confirmation information.

666! We successfully established a bidirectional connection between the Android application and the PWA. Once this is done, the future is bright.

Step 3: Upload assets

The Google Play App Store needs some material to make sure your app is well presented. Specifically, we need to:

  • App Icons: we need Icons of various sizes, including 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 and so on. Or we could use an adaptive icon.
  • High-res Icon: This is a 512 x 512 PNG image that is used everywhere in the App store.
  • Feature Graphic: This is a 1024 x 500 JPG or 24-bit PNG (no alpha channel) image that the app store uses to show the features of your app.
  • Screenshots: The Google Play App Store uses these Screenshots to show different interfaces of the app for users to view before downloading.

With that done, we’re ready to go to the Developer console in the Google Play App Store and publish the app!

Step 4: Glorious release!

Let’s jump in and upload our app to the app store.

We need to upload the PREVIOUSLY generated APK file (under The AndroidStudioProjects directory) from the Google Play console. I won’t go into details about the upload process, because the bootloader is very clear and will guide us step by step through the release process.

It can take a few hours for an app to be reviewed and approved, and then it’s displayed in the app store.

If you can’t find the APK file, you can create a new one: Build (Build) → Generate signed bundle or APK (Generate signed bundle/APK) → Build APK (Build APK), pass in the generated keystore file, and fill in the alias and password used to Generate the keystore. Once you’ve generated the APK file, you’ll be prompted to click the “Locate” link to take you to the file directory.

Congratulations, your app has been launched in the Google Play App Store!

Success! We successfully launched PWA on the Google Play App Store. It’s not as hard as we thought, but it takes some effort, and trust me, there’s a lot of satisfaction in seeing your app out there.

It’s important to point out that this feature is still very far ahead of its time, and I think of it as an experimental feature for now. I don’t recommend releasing with this feature right now, as it only works with Chrome 72 and above — you can install TWA on Chrome 72 below, but the app crashes immediately, which is not the best user experience.

Also, the official custom- Tabs -client does not currently support TWA. If you’re wondering why we’re using GitHub’s native link instead of the official library version, here’s why.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.