Introduction of TWA

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...😰