ABC 2019 Spring での講演「PWA+TWA」の資料です。 PWAをネイティブアプリに組み込む技術 TWA ( Trusted Web Activity ) の実装方法について解説します。

1. PWA+TWA
2019/5/26
@ABC 2019 Spring
Ryunosuke Shindo

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

3. WordPress プラグイン
https://wordpress.org/plugins/pwa4wp/

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

5. PWA を APK にするということ
Chrome に乗った PWA （の Activity）を内包する APK

6. ネイティブだからできること
• ウィジェット
• アイコン長押しのアプリケーションショートカットなどのOSと
の密接な統合
• wear OS や Android Auto などへの拡張
• ハードリセットや機種変更時に再インストールされる
• バックグラウンドサービスでネイティブ機能を利用可能
• マネタイズ
• PWA コンテンツとネイティブの画面が混在可能
• 同一ホストのコンテンツから複数の PWA アプリが作れる
• 国際化サポート

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

8. TWA アプリの動作イメージ
APK
Activity
Activity
Activity
Chrome
Trusted
Web
Activity
Web
PWA
Digital Asset
Links
Intent
Data

9. 実装
なにはともあれ組み込んでみよう

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. アプリへの組み込み
すぐできる！

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 ( Manifest )
<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. インテントで呼ぶ
import android.support.customtabs.CustomTabsIntent;
Intent intent=new Intent();
intent.setClassName("jp.compin.android.pwa.crowdfarmdiar
y","android.support.customtabs.trusted.LauncherActivity");
startActivity(intent);

17. 動かしてみる

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

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

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

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

23. 考慮点
• Webとネイティブのデータ連携
• Intentでの呼び出しだけの疎結合状態なので、データ連携の方法は要検
討。サーバーに送ってPWAから参照する、など。
• いい方法思いついたら教えてください。
• Web側の実装
• アプリに戻るボタン類はブラウザ閲覧で表示されないように工夫しな
いと
→通常のアクセスとアプリからのアクセスを分類できるように実装す
る工夫

24. ありがとうございました。
PWA for WordPress ぜひお試しください
https://wordpress.org/plugins/pwa4wp/