PWAをAndroidネイティブアプリに組み込めるChromeの新機能「TWA」（Trusted Web Activity）についての解説とその活用について説明します。

1. PWA to APK
～ ネイティブアプリとの融合
2019/03/20
PWA Night vol.2
Ryunosuke Shindo

2. 自己紹介
進藤 龍之介
エンジニア／日本Androidの会
2018年 Web Working Group PWA 集中勉強会主催
WordPress プラグイン「PWA for WordPress」開発
オンライン診療サービス「YaDoc」開発に参加 [New]
Twitter @ryu_compin
Fb ryushindo

3. PWA on APK
PWA → TWA → APK

4. 1/31
Google Play Store now open for
Progressive Web Apps 😱
https://medium.com/@firt/goog
le-play-store-now-open-for-
progressive-web-apps-
ec6f3c6ff3cc

5. ざっくり
• Chrome 72 for Android 公開！
• Chrome 72 から Trusted Web Activity が実装されたよ！
• PWA が Google Play Store に載せられるようになったよ！
• サクッと URL 登録して完了！とはいかない、手順多い。
• Chrome と通信する Java の API
• Cordova みたいな Web リソースをパッケージングするようなも
のではない。
• セッション、ストレージ、キャッシュなどは Chrome と共有

6. 要するに
Chrome に乗った PWA （の Activity）を内包する APK

7. いいことあるの？その１
• ウィジェット
• アイコン長押しのアプリケーションショートカットなどのOSと
の密接な統合
• wear OS や Android Auto などへの拡張
• ハードリセットや機種変更時に再インストールされる
• バックグラウンドサービスでネイティブ機能を利用可能

8. いいことあるの？その２
• マネタイズ
• PWA コンテンツとネイティブの画面が混在可能
• 同一ホストのコンテンツから複数の PWA アプリが作れる
• 国際化サポート

9. TWA ( Trusted Web Activity )
• Digital Asset Links によるコンテンツの信頼性確保
• ブラウザによるレンダリング
• 最新の環境
• Jelly Bean まで対応
• Web View が OS から切り離されたのは Lollipop 以降
• Web View より Chrome のほうが新しい
• アプリからコンテンツへの直接のアクセスはできない
• クエリパラメーターやカスタムHTTPヘッダ、intent URI などでやりと
り？
• Web とネイティブの遷移はアクティビティの切替で行う

10. Digital Asset Links
アプリとWebコンテンツ間の信頼（Trust）の確保
intent の紐付け（URLのタップでアプリが起動される）
https://www.example.com/.well-known/assetlinks.json
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target" : { "namespace": "android_app", "package_name": "jp.compin.android.pwa.crowdfarmdiary",
"sha256_cert_fingerprints": [“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"] }
}]
https://developers.google.com/digital-asset-links/v1/getting-started

11. Statement List Generator and Tester
https://developers.google.com/digital-asset-links/tools/generator
SHA256 fingerprint の表示
keytool -list -v -keystore [jks_file] -alias [alias_name] -storepass [pass] -keypass [pass]

12. アプリの構成
Google Chrome Labs のサンプル使います
https://github.com/GoogleChromeLabs/svgomg-twa

13. TWA Support Library
build.gradle（project） に Jitpack 追加
allprojects {
repositories {
google()
jcenter()
maven { url "https://jitpack.io" }
}
}

14. build.gradle (app)
TWA ライブラリの前提 Java 8 とTWA Support Library
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
dependencies {
implementation 'com.github.GoogleChrome.custom-tabs-
client:customtabs:3a71a75c9f'
}

15. TWA Activity
<activity android:name="android.support.customtabs.trusted.LauncherActivity"
android:label="${launcherName}">
<meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL"
android:value="${defaultUrl}" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
~~~~~~~
~~~~~~~
</activity>

16. 動かしてみる

18. アドレスバー表示されちゃってるよ！？
リリースビルドでちゃんとfingerprintがサイト側の assetlink と一致すれば出なくなります。
そうでない場合は普通に Chrome の customtab みたい。

19. こんなサービスも出てました
• PWA対応サイトのURLを入れるだけでAPKを作ってくれる
• 作るだけなら無料
• 独自のパッケージ名をつける場合は有料
https://pwa2apk.com/

20. ネイティブとの融合
Webコアなシステムモデルを考えよう

21. Web コアなシステム
Web サイト／アプリ in Browser
内包・拡張
ネイティブアプリ

22. 考慮点
• Webとネイティブのデータ連携
• まだ模索中
• PWA でせっかくオフライン稼働できるのに、サーバー経由でデータの
やりとりなんて寂しすぎる
• いい方法思いついたら教えてください。
• Web側の実装
• アプリに戻るボタン類はブラウザ閲覧で表示されないように工夫しな
いと
→通常のアクセスとアプリからのアクセスを分類できるように実装す
る工夫

23. Webをさらに活かせる可能性
はたくさんあると思います。

24. ありがとうございました。
参照
• Google Play Store now open for Progressive Web Apps
https://medium.com/@firt/google-play-store-now-open-for-
progressive-web-apps-ec6f3c6ff3cc
• Using Trusted Web Activities
https://developers.google.com/web/updates/2019/02/using-twa
• Digital Asset Links
https://developers.google.com/digital-asset-links/v1/getting-started
• Sample
https://github.com/GoogleChromeLabs/svgomg-twa