Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Ähnlich wie wordcamp haneda 20190420 Apps Based on WordPress
Ähnlich wie wordcamp haneda 20190420 Apps Based on WordPress (20)
Mehr von Ryu Shindo
wordcamp haneda 20190420 Apps Based on WordPress
- 1. Apps based on WordPress Ryunosuke Shindo @WordCamp Haneda 2019 2019/04/20
- 2. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 2018年 Web Working Group PWA 集中勉強会主催 WordPress プラグイン「PWA for WordPress」開発 オンライン診療サービス「YaDoc」開発に参加 Twitter @ryu_compin Fb ryushindo
- 4. Web サイトで完結？ ブログ プロモーション コーポレート ＥＣ サービス（コミュニケーションなど） アプリ
- 5. サービスの中の Web サイト : EC を例に Web site Apps PWA Payment Logistics Inquiry Office Data
- 6. Web は Front Office の中心に
- 7. Web サイトを拡張して活用する • フロントサイド • PWA • アプリのデータ基盤 • バックサイド • オフィス連携 • 決済、物流などへの自動連携
- 8. そこで WordPress です • 連携に必要な機能が実装しやすい • 豊富なプラグイン • REST API などでデータ連携 •PWA for WordPress がある！！
- 11. PWA って？ Progressive Web Apps Web アプリがローカルアプリになる • ホーム画面にアイコン • インストール時にWeb コンテンツやリソースのキャッシュ • キャッシュされた javascript がオフラインでアプリを制御 • 以下今のところAndroidだけ • バックグラウンドでの動作（Background Sync） • Push通知
- 12. 細かくすると Progressive すべてのブラウザで動作するように、Progressive Enhancement の理念で構築する。 Responsive デスクトップ、モバイル、タブレットなどあらゆる環境に対応する。 Connectivity independent ServiceWorker の機能により、オフラインや低速回線でも動作する。 App-like 機能とコンテンツを切り分けるアップシェルモデルによりアプリのような操作感を実現する。 Fresh ServiceWorker のアップデートプロセスにより、常に最新の状態を保つ。 Safe HTTPSによる通信で情報漏洩やコンテンツ改ざんからの安全性を確保する。 Discoverable W3C準拠の Manifest と ServiceWorker の「スコープ」により検索エンジンはアプリを検知することができる。 Re-engageable プッシュ通知などの機能により再エンゲージメントを容易にする。 Installable アプリストアを経由しなくてもホーム画面にアプリとしてインストールすることができる。 Linkable URLとしてシェアすることができ、複雑なインストール要件を必要としない。 （Google Developer Blogより）
- 13. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker Internet Local Cache Browser
- 14. ひとまずの「 PWA 化」 サイトそのまんまでも、今フルHTTPSサイトなら • Manifest • Service Worker を追加して、インストール部分を追記したらと りあえずPWA化できる
- 16. いいこと • キャッシュによる速度向上 • オフライン対応 • エンゲージメント • コンバージョン率の向上 • Push • Background Sync
- 17. モバイルにおける Web の存在 Web サイト不遇の時代？
- 19. Web の立ち位置 Home App1 Google Web1 Web2 Web3 ・・・ SNS SNS 多くのユースケースにおいて • 入り口は検索か SNS • ブックマークなんて使わない
- 23. PWA for WordPress のココがいけてる • 柔軟なキャッシュ制御 キャッシュ する／しない コンテンツを除外設定でコントロール オンライン優先モード、キャッシュ優先モードの基本設定 初期キャッシュを自由に設定 • インストールポップアップの制御 • その他細かいところ 日本語 アイコンの自動リサイズ
- 24. 既存サイトを PWA 化 WordPress + WooCommerce の EC サイトを簡単にそのまま PWA 化
- 25. 事前に用意しておく オフラインページ 普通の固定ページでOK アイコン画像 png形式必須 サイズ 512px x 512px 以 上推奨
- 26. PWA for WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
- 33. PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例１：画像（ jpg / png / gif ) だけキャッシュするには 以下の２行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外（除外リストの指定なので、「以外」を除外する設定になる） 末尾が / で終わる
- 34. PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例２：REST API を除外する ^.*/wp-json/.*$
- 35. PWA for WordPress Chrome Developer Tool での確認 （Application タブ）
- 38. PWA for WordPress Auditsしてみる Chromeのツール「Lighthouse」 Good！ ※最近 PWA の項目が 点数じゃなくなりま した
- 39. インストール
- 40. インストール完了 • スプラッシュいいね • やっぱキャッシュすると速 い！ • ホーム画面のアイコンも
- 42. オフライン で見てみる OK！
- 45. 基本キャッシュプランとして Cache First と Online First
- 48. これから実装したい Online First だけど一部 Cache First にしたい Cache First だけど一部 Online First にしたい
- 49. 最大公約数的キャッシュプラン完成型？ 基本キャッシュプラン Online First Cache First キャッシュ除外 （正規表現で柔軟にURLを指定） キャッシュ有効期限 プラン反転指定URL （Coming Next） あとはprecacheとか追加的な機能もいろいろあるけど、そこは追々・・・
- 52. WordPress の例： ページ構成そのまま PWA 化 Template Data Cache ページまる ごとキャッ シュ
- 53. App Shell ライクにできるのが理想 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ
- 54. API 化して、URL をキャッシュ除外 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ キャッシュ 除外 or Online-Firstに する
- 57. http の埋め込みを探して修正 • http → https 化したときに、http 埋め込みが残留しているケース が多い • 外部サイトのアイコン • JavaScript からの呼び出し • WordPress のプラグインからの呼び出し（見つけにくい） • DevTools の Console で確認する
- 58. キャッシュ焦げ付き問題 • IndexedDB などを利用して実装 • WorkBox にはキャッシュの有効期限を指定できるプラグインあ り • WordPress なら PWA4WP ！
- 59. iPhone キラー：行き止まり • 画像の全画面表示などでどん詰まり <a href="some-beautiful-picture.jpg"><img src="some-beautiful-picture.jpg" width=xxx height=xxx></a>
- 60. 外部ページとの行き来 • 外部ページに遷移すると、PWA はポップアウト画面（ブラウ ザ）を開くが、処理完了後正しく戻れない • 認証 • 決済 • ひとつ前の画面からポップアウトさせて結果を受け取るしか今 のところ手がない？ authwindow = window.open (”auth.html",”authentication", "width=480,height=480");
- 61. 番外編：WordPress プラグインの動作障害 • PWA にしたら特定のプラグインが動かなくなった • プラグインが JavaScript で自身のフォルダを参照してリアルタイム性の 必要な情報を取得していた場合など • キャッシュの除外設定でプラグインの導入先を除外することで多くは 回避可能（PWA for WordPress） ^.*/wp-content/plugins/plugin-name/.*$
- 62. PWA まとめ PWA はキャッシュ制御がとても大事。 いきなり完成型は難しいかもしれないし、 ちょっとずつでも。 （Progressive ＝ 段階的に） ぜひ試してみてください。
- 63. さて、まだいくよ！ Apps へ
- 64. PWA を Android ネイティブアプリ ( APK )に PWA → TWA → APK
- 65. アプリ開発に新しい手法が登場？ • Chrome 72 for Android 公開！ • Chrome 72 から Trusted Web Activity が実装されたよ！ • PWA が Google Play Store に載せられるようになったよ！ • Trusted Web Activity は Chrome のActivity（画面インスタンス）として 動作 • サクッと URL 登録して完了！とはいかない、手順多い。 • Chrome と通信する Java の API • Cordova みたいな Web リソースをパッケージングするようなもので はない。 • セッション、ストレージ、キャッシュなどは Chrome と共有
- 66. 要するに Chrome に乗った PWA （の Activity）を内包する APK (Android アプ リケーションパッケージ)
- 67. いいことあるの？その１ • ウィジェット • アイコン長押しのアプリケーションショートカットなどのOSと の密接な統合 • wear OS や Android Auto などへの拡張 • ハードリセットや機種変更時に再インストールされる • バックグラウンドサービスでネイティブ機能を利用可能
- 68. いいことあるの？その２ • マネタイズ • PWA コンテンツとネイティブの画面が混在可能 • 同一ホストのコンテンツから複数の PWA アプリが作れる • 国際化サポート
- 69. TWA ( Trusted Web Activity ) • Digital Asset Links によるコンテンツの信頼性確保 • ブラウザによるレンダリング • 最新の環境 • Jelly Bean まで対応 • Web View が OS から切り離されたのは Lollipop 以降 • Web View より Chrome のほうが新しい • アプリからコンテンツへの直接のアクセスはできない • クエリパラメーターやカスタムHTTPヘッダ、intent URI などでやりと り？ • Web とネイティブの遷移はアクティビティの切替で行う
- 70. 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
- 71. 動かしてみる
- 74. Web コアなシステム Web サイト／アプリ in Browser ネイティブアプリ 内包・拡張
- 75. 考慮点 • Webとネイティブのデータ連携 • まだ模索中 • PWA でせっかくオフライン稼働できるのに、サーバー経由でデータの やりとりなんて寂しすぎる • いい方法思いついたら教えてください。 • Web側の実装 • アプリに戻るボタン類はブラウザ閲覧で表示されないように工夫しな いと →通常のアクセスとアプリからのアクセスを分類できるように実装す る工夫
- 77. 参考：PWA の細かい解説、拙著ですが ビジネス+IT PWA（Progressive Web Apps）はどうスゴイのか？ 基本知識と12のメリットを解説 ( 2/7 公開） https://www.sbbit.jp/article/cont1/35949
- 78. 最後に告知！ 日本 Android の会 ABC 2019 Spring 2019/5/26 @東海大学高輪キャンパス 今年もモバイルWebトラックをやります！ PWA についてもっと掘り下げたい方、どっぷり半日PWAの話が聞けま す！ ぜひお越しください。 https://japan-android-group.connpass.com/event/125928/
- 79. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/