How to make an application out of the site and put it on Google Play in a few hours. Part 2/2: Trusted Web Activity

How to make an application out of the site and put it on Google Play in a few hours. Part 2/2: Trusted Web Activity


image
In the first part we turned our site into a Progressive Web App. It was also said there that quite recently, on February 6, 2019, Google provided a simple opportunity to upload PWA to Google Play using Trusted Web Activity. All you need to do is write a small wrapper for Android, which can be put on Google Play. When a user downloads such a wrapper application, it will simply open our PWA inside Chrome. Of course, the Chrome interface will be hidden and everything will look beautiful.

If you, like me, have never written applications for Android, then further you should also seem like a series of magical manipulations. But to what you will not resort only to lay out the application. Let's go!

Android Studio


First, download Android Studio for the first time. We create a new project and at the same time select “Add No Activity”.



Next, configure your project:



For the Package name, it is recommended to form the name as follows: the start page skorochtec.ru/app turns into ru.skorochtec.app.

Application Configuration and Dependencies


The created project has the following structure:



We will need to change AndroidManifest.xml, styles.xml (res/values ​​folder) and both build.gradle files.

I also recommend setting the application icon in the res/drawable and res/mipmap folders, otherwise your application will have a standard Android icon.

  build.gradle (Project: AndroidStudioProjects)//Top-level build file where you can add sub-projects/modules.

 buildscript {
  repositories {
  google ()
  jcenter ()
 
  }
  dependencies {
  classpath 'com.android.tools.build:gradle:37.3.1'
 
//NOTE: Do not place your application dependencies here;  they belong
//in the individual module build.gra files
  }
 }

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

 task clean (type: Delete) {
  delete rootProject.buildDir
 }  

No time to explain, just copy it to yourself :)

  build.gradle (Module: app)
 apply plugin: 'com.android.application'

 android {
  compileSdkVersion 28
  defaultConfig {
  applicationId "skorochtec.app"
  minSdkVersion 19
  targetSdkVersion 28
  versionCode 5
  versionName "1.0.0"
  testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
  manifestPlaceholders = [
  hostName: "skorochtec.ru",
  defaultUrl: "https://skorochtec.ru/app/",
  launcherName: Scorotte,
  assetStatements: '[{"relation": ["delegate_permission/common.handle_all_urls"],' +
  '"target": {"namespace": "web", "site": "https://skorochtec.ru"}}]'
  ]
  }
  buildTypes {
  release {
  minifyEnabled false
  proguardFiles getDefaultProguardFile ('proguard-android-optimize.txt'), 'proguard-rules.pro'
  }
  }
  compileOptions {
  sourceCompatibility JavaVersion.VERSION_1_8
  targetCompatibility JavaVersion.VERSION_1_8
  }
 }

 dependencies {
  implementation fileTree (dir: 'libs', include: ['* .jar'])
  implementation 'com.github.GoogleChrome.custom-tabs-client: customtabs: e849e45c90 '
 }  

And here you need to give some explanation:

  • versionCode will need to be changed with each new build, but versionName is optional;
  • defaultUrl matches start_url from the Web App Manifest;
  • in assetStatements it should be the base url (“in my case skorochtec.ru ”);
  • All the magic is provided by connecting custom-tabs in the last line, use this version, as it is 100% tested on Google Play.

AndroidManifest.xml
  & lt; manifest xmlns: android = "http://schemas.android.com/apk/res/android"
  package = "skorochtec.app" & gt;

  & lt; application
  android: allowBackup = "true"
  android: icon = "@ mipmap/ic_launcher"
  android: label = "$ {launcherName}"
  android: roundIcon = "@ mipmap/ic_launcher_round"
  android: supportsRtl = "true"
  android: theme = "@ style/AppTheme" & gt;

  & lt; meta-data
  android: name = "asset_statements"
  android: value = "$ {assetStatements}"/& gt;

  & lt; activity android: name = "android.support.customtabs.trusted.LauncherActivity"
  android: label = "$ {launcherName}" & gt;
  & lt; meta-data android: name = "android.support.customtabs.trusted.DEFAULT_URL"
  android: value = "$ {defaultUrl}"/& gt;

  & lt; intent-filter & gt;
  & lt; action android: name = "android.intent.action.MAIN"/& gt;
  & lt; category android: name = "android.intent.category.LAUNCHER"/& gt;
  & lt;/intent-filter & gt;

  & lt; intent-filter & gt;
  & lt; action android: name = "android.intent.action.VIEW"/& gt;
  & lt; category android: name = "android.intent.category.DEFAULT"/& gt;
  & lt; category android: name = "android.intent.category.BROWSABLE"/& gt;
  & lt; data android: scheme = "https"
  android: host = "$ {hostName}"/& gt;
  & lt;/intent-filter & gt;
  & lt;/activity & gt;
  & lt;/application & gt;
 & lt;/manifest & gt;  

Copy this by changing package in the & lt; mаnifest & gt; tag (at the top).

styles.xml
  & lt; resorces & gt;

  & lt;! - Base application theme.  - & gt;
  & lt; style name = "AppTheme" parent = "Theme.AppCompat.Light.NoActionBar" & gt;
  & lt;! - Customize your theme here.  - & gt;
  & lt; item name = "colorPrimary" & gt; @ color/colorPrimary & lt;/item & gt;
  & lt; item name = "colorPrimaryDark" & gt; @ color/colorPrimaryDark & ​​lt;/item & gt;
  & lt; item name = "colorAccent" & gt; @ color/colorAccent & lt;/item & gt;
  & lt; item name = "android: windowNoTitle" & gt; true & lt;/item & gt;
  & lt; item name = "android: backgroundDimEnabled" & gt; false & lt;/item & gt;
  & lt;/style & gt;

 & lt;/resources & gt;  

Just copy.

Create a signed application


Everything is ready to release the application. But it still needs to be signed. To do this, find in the toolbar build - & gt; Generate Signed Boundle/APK ... Choose APK:



Click Create new ...



Create a new keystore and the key itself:



Finally, collect and sign the application:



Hooray! Our APK is ready for release!

Google Play Console


To lay out the application, you must have a developer account that costs $ 25. After the purchase you will have access to Google Play Console. It is easy to understand, but I will clarify one thing. When you load your APK into the developer console, you will see the following:



Google seems to hint that we are crooked and most likely will lose our signature key, which means we will not be able to update the application later. So, they suggest that we sign our APK, but the final application has already been signed by Google itself. I recommend to accept this condition.

Digital Asset Link


Did you notice anything suspicious in previous actions? To create the application, we essentially used only the address of our website ... Then what prevents us from releasing an application right now, for example, Twitter?
But Digital Asset Link, which we have to place on our website, prevents us from proving that the application and the website have one owner (based on the application signature key).

This is done very easily: find in the Google Play Console, Release Management - & gt; Signed applications. There will be a certificate for signing applications generated by Google (if you followed my recommendation and accepted the condition). You need to copy the SHA-256 digital thumbprint .



And paste it into the digital asset links tool . And put it generated in assetlinks.json file, which should be available on the server of your site along the path .well-known/assetlinks.json.

Done


That's all! We release our application, wait a few hours until Google approves it and, finally, enjoy its presence on the Google Play Market!



By the way, beautiful screen pictures can be done in https://apptoolkit.io/.

Conclusion


Well, we went the full way from the site to the application, it was not very easy, but not very difficult. The PWA and TWA technologies are still very young and have several disadvantages. For example, an application released in this way will not open to the user if Google Chrome version 72+ is not the default browser on his smartphone. So get ready to sacrifice a part of users for the sake of speed of release.
In the App Store to lay out the application in this way is impossible. Well, in general, Apple is lagging behind in terms of supporting these technologies (we hope that it is not intentional). But the area of ​​Progressive Web App is rapidly developing and improving, so it is hoped that soon all mobile browsers will support it, and the existing shortcomings will be corrected.

Be that as it may, I believe that the future is in Progressive Web App and encourage you to become early adopters of this technology. Benefit instructions for this you now have.

Useful Links


Source text: How to make an application out of the site and put it on Google Play in a few hours. Part 2/2: Trusted Web Activity