Author: ICBU Wang Haoyu

Write at the front: welcome to Alibaba ICBU interactive & end technology front end team column, we will share quality front end technology articles with you, welcome to pay attention to & exchange yo!

Follow up: Transform the Web into a native App using Google TWA (1)

Build connections from APP to website

Open the string resource file app > res > values > strings.xml and add the Digital AssetLinks statement below:

<resources>
    <string name="app_name">Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://a.com\"}
        }]
    </string>
</resources>
Copy the code

Change the contents of the site property to match the Scheme and domain opened by TWA.

Go back toAndroidManifest.xmlFile through inapplicationTag add newmeta-dataThe tag links to the statements:

We have now established a link from the Android APP to the website. We can debug without creating a website to APP validation. Here’s how to test it on a development device:

Enable debug mode

  1. Open Chrome on the development device, navigate to Chrome :// Flags, search for an item called Enable Command Line on the non-root device, change it to ENABLED, and then restart the browser.

  2. Next, on a terminal, use the Android Debug Bridge (installed with Android Studio) and run the following command:

    adb shell “echo ‘_ –disable-digital-asset-link-verification-for-url=”airhorner.com\”‘ > /data/local/tmp/chrome-command-line”

Close Chrome and restart your application from Android Studio. The application should now be displayed in full screen.

Build connections from websites to apps

The developer needs two pieces of information from the APP to create the association:

  • Package Name:The first piece of information is the package name of the APP. This is the same package name that was generated when the APP was created. Can be found inGradle Scripts > build.gradle (Module: app)Found in theapplicationIdThe value of the.
  • Sha-256 Fingerprint: You must sign the Android application to upload it to the Play Store. The same signature is used to establish a connection between the website and APP via sha-256, which uploads the key.

The Android documentation details how to use Android Studio to generate keys. Make a note of the path, alias, and password of the key, as you will need them in the next step. To extract SHA-256 using keytool, run the following command:

keytool -list -v -keystore  -alias  -storepass  -keypass 
Copy the code

Sha-256 is printed in the Certificate. Here is a sample output:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3
Copy the code

Once you have these two pieces of information, open the AssetLinks generator, fill in the fields, and click Generate Statement. Copy the generated statement and place it in the /.well-known/assetlinks.json directory on your website.

Create icon

When a new project is created in Android Studio, it comes with a default icon. As part of development, you want to use a different icon than other apps. Android Studio has Image Asset Studio, which provides the tools necessary to create an icon that can fit any size and pixel.

Open Android Studio, navigate to File > New > Image Asset, select Launcher Icons (Adaptative and Legacy) and use the prompt to create an appropriate icon for your application.

Add splash screen

In Chrome 75 +, TWA supports adding kinetic energy to the launch animation, which we can do by adding a few images and Settings. (Be sure to use Chrome 75 or later and use the latest TWA dependent library)

Add some images to the startup animation

Android comes in different screen sizes and pixel densities, and to ensure that the boot animation works for all devices, you need to generate images for each pixel density.

Fully explaining support for all pixels is beyond the scope of this article, but an example is to create a 320x320DP image that represents a 2×2-inch square on the screen of any device at any density, equivalent to 320×320 pixels at mdPI density.

From there we can get the size required for other pixel densities. Below is a list of the pixel density, the multiplier applied to the base size (320x320DP), the resulting size in pixels, and where the image should be added to the Android Studio project.

Update some configurations

First, add the Content-provider to AndroidManifest (Androidmanifest.xml)

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>
Copy the code

Then, add the res/ XML/Filepass.xml resource and make the startup animation with path TWA

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>
Copy the code

Finally, add meta-tags to AndroidManifest (Androidmanifest.xml)

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"> ... <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE" android:resource="@drawable/splash"/>  <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR" android:resource="@color/colorPrimary"/> <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION" android:value="300"/> <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY" android:value="com.example.twa.myapplication.fileprovider"/> ... </activity>Copy the code

Make sure the page is transparent at startup

Also, make sure the page is transparent at startup to avoid a white screen before the animation starts.

First, add a new theme in res/styles.xml:

<style name="Theme.LauncherActivity" parent="Theme.AppCompat.NoActionBar">
     <item name="android:windowAnimationStyle">@null</item>
     <item name="android:windowIsTranslucent">true</item>
     <item name="android:windowNoTitle">true</item>
     <item name="android:windowBackground">@android:color/transparent</item>
     <item name="android:backgroundDimEnabled">false</item>
 </style>
Copy the code

Then add a reference to the new style in AndroidManifest (Androidmanifest.xml)

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@style/Theme.LauncherActivity">
    ...
    </activity>
</application>
Copy the code

Build and sign your APP

Save assetLinks in your website, and once asset_statements have been configured in the Android APP, the next step is to generate the signed APP. Please check the documentation.

APK can be installed into the test device using ADB:

adb install app-release.apk
Copy the code

If authentication fails, you can use ADB to view error messages from the connected device and computer terminal.

adb logcat | grep -e OriginVerifier -e digital_asset_links
Copy the code

Bingo, generate upload APK, you can upload the app to the Play store.

conclusion

Alibaba.com’s version of TWA is now available on Amazon Play, and its business value is much higher than existing sites, although it’s still a long way from native apps.

In addition to a point: TWA is never replace the native APP, he must be through the remedy some of the native APP, or to help carry something native APP to serve those who make native APP (low android version, etc.) of users, for any technology, it must be cooperate with each other to achieve business value maximization, is a good technical solution.

PS: TWA refers to the native APP encapsulated by Google TWA technology. Native apps are native apps developed in Java

Refer to the reference

Developers.google.com/web/android…

www.infoq.cn/article/XTE…

Juejin. Cn/post / 684490…

❤️ Thank you for seeing the end ~

Alibaba international website (ICBU, Alibaba.com) is the world’s largest cross-border trade and service platform. We have new technical challenges all the time, enough interesting challenges to satisfy all your curiosity and thirst for knowledge, and well-known foreign partners (Google & OpenSky).

If you want to come to ICBU to develop the front end with me, please send your resume to [email protected] and we will respond to your interview arrangement quickly. : -)