Introduction of TWA

# Whoami

Tsuyoshi Uehara
Android developer at LINE Fukuoka

<img src="https://qiita-image-store.s3.amazonaws.com/0/18159/4a50ca6c-2493-e2b9-7095-567d55e15e07.jpeg" width="100">

Twitter: [@uecchi](https://twitter.com/uecchi)
GitHub, Qiita, etc.: @tsuyosh

----

# About TWA

TWA = Trusted Web Activities

<img src="https://qiita-image-store.s3.amazonaws.com/0/18159/ba8dbbf1-324b-8369-3db1-98bdd1e288a4.png" width="480">

https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

----
# 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"] }
}]
```

https://developers.google.com/digital-asset-links/tools/generator

----

# 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🤮

https://bugs.chromium.org/p/chromium/issues/detail?id=928701

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