2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Introduction of TWA

Introduction of TWA

by tsuyosh
1 / 15

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


Thanks for listening🙇🏻‍♂️


Bug🤮

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?