Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA+TWA

200 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

PWA+TWA

  1. 1. PWA+TWA 2019/5/26 @ABC 2019 Spring Ryunosuke Shindo
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 2018年 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 オンライン診療サービス「YaDoc」開発に参加 Twitter @ryu_compin Fb ryushindo
  3. 3. WordPress プラグイン https://wordpress.org/plugins/pwa4wp/
  4. 4. TWA ( Trusted Web Activity ) • Chrome 72 for Android から実装 • PWA が Google Play Store に載せられるようになった • サクッと URL 登録して完了!とはいかない、わりと手順多い。 • Chrome と通信する Java の API • Cordova みたいな Web リソースをパッケージングするようなも のではない。 • セッション、ストレージ、キャッシュなどは Chrome と共有
  5. 5. PWA を APK にするということ Chrome に乗った PWA (の Activity)を内包する APK
  6. 6. ネイティブだからできること • ウィジェット • アイコン長押しのアプリケーションショートカットなどのOSと の密接な統合 • wear OS や Android Auto などへの拡張 • ハードリセットや機種変更時に再インストールされる • バックグラウンドサービスでネイティブ機能を利用可能 • マネタイズ • PWA コンテンツとネイティブの画面が混在可能 • 同一ホストのコンテンツから複数の PWA アプリが作れる • 国際化サポート
  7. 7. TWA の実装 • Digital Asset Links によるコンテンツの信頼性確保 • ブラウザによるレンダリング • 最新の環境 • Jelly Bean まで対応 • Web View が OS から切り離されたのは Lollipop 以降 • Web View より Chrome のほうが新しい • アプリからコンテンツへの直接のアクセスはできない • クエリパラメーターやカスタムHTTPヘッダ、intent URI などでやりと り? • Web とネイティブの遷移はアクティビティの切替で行う
  8. 8. TWA アプリの動作イメージ APK Activity Activity Activity Chrome Trusted Web Activity Web PWA Digital Asset Links Intent Data
  9. 9. 実装 なにはともあれ組み込んでみよう
  10. 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. 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. 12. アプリへの組み込み すぐできる!
  13. 13. TWA Support Library build.gradle(project) に Jitpack 追加 allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } }
  14. 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. 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. 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. 17. 動かしてみる
  18. 18. アドレスバー表示されちゃってる!? リリースビルドでちゃんとfingerprintがサイト側の assetlink と一致すれば出なくなります。 そうでない場合は普通に Chrome の customtab みたい。
  19. 19. こんなサービスも出てました • PWA対応サイトのURLを入れるだけでAPKを作ってくれる • 作るだけなら無料 • 独自のパッケージ名をつける場合は有料 https://pwa2apk.com/
  20. 20. ネイティブとの融合 Webコアなシステムモデルを考えよう
  21. 21. Web コアなシステム Web サイト/アプリ in Browser 内包・拡張 ネイティブアプリ
  22. 22. 考慮点 • Webとネイティブのデータ連携 • Intentでの呼び出しだけの疎結合状態なので、データ連携の方法は要検 討。サーバーに送ってPWAから参照する、など。 • いい方法思いついたら教えてください。 • Web側の実装 • アプリに戻るボタン類はブラウザ閲覧で表示されないように工夫しな いと →通常のアクセスとアプリからのアクセスを分類できるように実装す る工夫
  23. 23. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/

×