Whoami

Tsuyoshi Uehara
Android developer at LINE Fukuoka

Twitter: @uecchi
GitHub, Qiita, etc.: @tsuyosh

About TWA

TWA = Trusted Web Activities

About TWA

Supported in Chrome 72
No browser UIs (like WebView)
- Note: Requires verification that the app and the website is belong to same developer
All Chrome features are available:
- Local storage(e.g. cookies) is shared with Chrome browser
- Web push notification
- ServiceWorker
- etc.

How to make TWA app

Create an Android project in Android Studio
Add customtabs library to build.gradle dependencies
Add TWA Activity to AndroidManifest.xml
Set Digital Asset Links resources
Store package name and SHA-256 fingerprint in the website

Create an Android project in Android Studio

Skip!!

Add `customtabs` library to build.gradle dependencies

build.gradle

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

Note: The library is not yet released in google repos. Use jitpack.

Add `customtabs` library to build.gradle dependencies

app/build.gradle

android {
    ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
   implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:3a71a75c9f'
}

Add TWA Activity to `AndroidManifest.xml`

AndroidManifest.xml

    <application>
        <!-- 👇You can customize the activity by using TrustedWebUtils -->
        <activity
            android:name="android.support.customtabs.trusted.LauncherActivity">

           <!-- 👇Edit android:value to change the url opened by the TWA -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the TWA to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the TWA to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- 👇Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>

Set Digital Asset Links resources

res/values/strings.xml

<resources>
    <string name="app_name">AirHorner TWA</string>
    <!-- 👇Link the app with specified website -->
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Set Digital AssetLinks resources

AndroidManifest.xml

    <application>
        ...
        <meta-data
                android:name="asset_statements"
                android:resource="@string/asset_statements" />
        ...
    </application>

Store package name and SHA-256 fingerprint in the website

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target" : { "namespace": "android_app", "package_name": "io.github.tsuyosh.trustedwebactivitiesdemo",
               "sha256_cert_fingerprints": ["2B:4E:27:41:50:DE:1D:AE:8C:07:9D:49:C4:3F:D7:45:6B:46:CB:03:94:85:B7:CF:85:3A:08:85:CB:2C:62:07"] }
}]

References

Using Trusted Web Activities
- https://developers.google.com/web/updates/2019/02/using-twa
Introducing a Trusted Web Activity for Android
- https://blog.chromium.org/2019/02/introducing-trusted-web-activity-for.html
Reference of TrustedWebUtils
- https://developer.android.com/reference/android/support/customtabs/TrustedWebUtils.html
【実践】Google Play Store でPWA配信 (TWA)
- https://qiita.com/zprodev/items/181c1c8f19bc0beb1183
TWAの挙動をPWAに寄せていく（起動編）
- https://qiita.com/zprodev/items/747d875b2f290eb76ecd

Thanks for listening🙇🏻‍♂️

Bug🤮

For now, developers have to make their own LaunchActivity for avoiding crash.
Seems not stable...😰