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 が Google Play に!?

4,861 views

Published on

2019年2月20日 日本Androidの会 2019年2月定例会での講演資料です。
Chrome 72 で実装された TWA ( Trusted Web Activity ) による PWA の APK 化( Google Play への登録)について、その利点と実装方法について解説しています。

Published in: Technology
  • Be the first to comment

PWA が Google Play に!?

  1. 1. PWA → Google Play 2019/02/20 日本Androidの会 2月定例会 進藤 龍之介
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 最近の趣味は EC サイト運営 Twitter @ryu_compin Fb ryushindo
  3. 3. PWA ちょっと旬な感じです SoftwareDesign 3月号 TRY! PWA ( 2/18 発売 )
  4. 4. PWA on APK PWA → TWA → APK
  5. 5. 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
  6. 6. ざっくり • Chrome 72 for Android 公開! • Chrome 72 から Trusted Web Activity が実装されたよ! • PWA が Google Play Store に載せられるようになったよ! • サクッと URL 登録して完了!とはいかない、手順多い。 • Chrome と通信する Java の API • Cordova みたいな Web リソースをパッケージングするようなも のではない。 • セッション、ストレージ、キャッシュなどは Chrome と共有
  7. 7. 要するに Chrome に乗った PWA (の Activity)を内包する APK
  8. 8. いいことあるの?その1 • ウィジェット • アイコン長押しのアプリケーションショートカットなどのOSと の密接な統合 • wear OS や Android Auto などへの拡張 • ハードリセットや機種変更時に再インストールされる • バックグラウンドサービスでネイティブ機能を利用可能
  9. 9. いいことあるの?その2 • マネタイズ • PWA コンテンツとネイティブの画面が混在可能 • 同一ホストのコンテンツから複数の PWA アプリが作れる • 国際化サポート
  10. 10. TWA ( Trusted Web Activity ) • Digital Asset Links によるコンテンツの信頼性確保 • ブラウザによるレンダリング • 最新の環境 • Jelly Bean まで対応 • Web View が OS から切り離されたのは Lollipop 以降 • Web View より Chrome のほうが新しい • アプリからコンテンツへの直接のアクセスはできない • クエリパラメーターやカスタムHTTPヘッダ、intent URI などでやりとり • Web とネイティブの遷移はアクティビティの切替で行う
  11. 11. 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": "com.example.app", "sha256_cert_fingerprints": ["hash_of_app_certificate"] } }] https://developers.google.com/digital-asset-links/v1/getting-started
  12. 12. Statement List Generator and Tester https://developers.google.com/digital-asset-links/tools/generator
  13. 13. アプリの構成 Google Chrome Labs のサンプル使います https://github.com/GoogleChromeLabs/svgomg-twa
  14. 14. TWA Support Library build.gradle に Jitpack 追加 allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } }
  15. 15. build.gradle TWA ライブラリの前提 Java 8 とTWS Support Library android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation 'com.github.GoogleChrome.custom-tabs- client:customtabs:3a71a75c9f' }
  16. 16. 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>
  17. 17. 動かしてみる
  18. 18. 所感 • まだしっかり作り込んでみていないけど、いくつかまだ疑問点 あり(ネイティブActivityとの連携とか) • これってPWA(ServiceWorker)じゃなくてもいいんじゃない? (未検証) • アプリにすることのアドバンテージは確かにある • WebView、Custom Tabs へのアドバンテージ、というかこれらの 不足や欠点を補っているところもある 興味もっていただける方多ければ情報交換の場を作りたいと思います
  19. 19. ありがとうございました。 参照 • 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

×