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.

PWA4WP の ServiceWorker

218 views

Published on

2019年6月14日 PWA Beginners での発表資料です。
WordPress プラグイン「PWA for WordPress(PWA4WP)」で実装されている ServiceWorker のキャッシュコントロールについて説明しました。
ブログ、コーポレートサイト、ECサイトなどの多様な WordPress サイトの構成への対応や、多数のテーマやプラグインとの同居を考慮し、その結果出来上がった PWA4WP の心臓とも言える ServiceWorker の柔軟なカスタマイズ対応の仕組みを図解しています。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

PWA4WP の ServiceWorker

  1. 1. PWA4WP の ServiceWorker 2019/6/14 @PWA Beginners #5 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. PWA for WordPress WordPress に PWA を実装すること • 世界の Web サイト(アクセス Top 1000万)の3割のシェア • Web アプリというより Web サイト • 多様なテーマとプラグインに同居 • パフォーマンス(速度)が課題になることが多々ある • REST API でアプリバックエンド的に使用することも可 • ユーザーの大半は技術に詳しいわけではないし、学習コストが 低いのがそもそもの CMS の良さ
  5. 5. 機能の選択 • キャッシュ →多様なサイトのリクエストに応える柔軟性を重視 • Push →いろいろな外部サービスへの依存・・・実装見送り • Background Sync →使われ方が読めない・・・機能なし • A2HS →ポップアップは奥ゆかしく
  6. 6. そんなわけで主題は ServiceWorker というよりそこに実装した Cache コントロール のお話し
  7. 7. キャッシュプラン • オンラインファースト(オンライン優先) • オンラインコンテンツを優先的に取得して表示する • オフライン状態のときや、ネットワークの速度が遅いときなどにキャッシュを使用して コンテンツを表示する • 基本的にオンラインコンテンツを使用するので情報が新鮮 • パフォーマンスは通常のコンテンツ表示と同じ • キャッシュファースト(キャッシュ優先) • キャッシュコンテンツを優先的に表示 • 一定時間の経過あるいはコンテンツの更新をチェックするなどしてキャッシュを更新 • キャッシュを使用するのでコンテンツの更新が即時反映されないこともある • ネットワークに依存しないので高速 • キャッシュ無し • ECサイトの買い物カゴなど、キャッシュしてはいけないコンテンツ
  8. 8. キャッシュと性能のバランス • キャッシュを多用するほど高速になるが、コンテンツの鮮度の コントロールは難しくなる • オンラインは常に新鮮だが性能は通信やサーバーに左右される キャッシュ優先とオンライン優先のコンテンツのバラン スが PWA 実装成功の鍵!
  9. 9. キャッシュプランの設計は キャッシュのパワーを最大限に利用する ための、キャッシュ{する|しない}要 素の切り分けが大事。
  10. 10. Web コンテンツを「必要な鮮度」で切り分けてみる 【JavaScriptで動的に内容を表示するサイト(SPAなど)】 Web コンテンツ HTML 画像 CSS JavaScript キャッシュ キャッシュ キャッシュ キャッシュ データオンライン優先 JavaScriptがオンラインから データを取得してHTMLに挿入
  11. 11. Web コンテンツを「必要な鮮度」で切り分けてみる 【HTMLに情報が含まれているサイト】 WordPressはこれ。 Web コンテンツ HTML 画像 CSS JavaScript キャッシュ キャッシュ キャッシュ オンライン優先
  12. 12. WordPress : まるっとキャッシュすると身動きとれない Template Data Cache ページまる ごとキャッ シュ
  13. 13. App Shell ライクにできるのが理想 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ
  14. 14. API 化して、URL をキャッシュ除外 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ キャッシュ 除外する
  15. 15. そして出来上がったもの キャッシュする、しない、の実装例
  16. 16. URLごとに動作パターンを判定する柔軟性 基本プラン &除外判定 ONLINE FIRST 強制CACHE 通常処理 (ONLINE FIRST) CACHE FIRST 強制ONLINE 通常処理 (CACHE FIRST)CACHE 除外
  17. 17. 設定画面こうなりました
  18. 18. 設定項目 (多すぎると初心者キラーになるのが悩ましい) • 基本キャッシュ計画 → ONLINE/OFFLINE FIRST • オフラインページURL • キャッシュ有効時間 • キャッシュ除外URL • 強制キャッシュ優先URL • 強制オンライン優先URL • 初期キャッシュ • デバッグモード(コンソールに動作ログ出す)
  19. 19. pwa4wp-cache-manager.js onFetch Online- First Cache- First Fetch Search Cache Return Cache Store Cache Cache Storage Indexed DB Return Response Fetch Failed No Cache Return OFFLINE PAGE Cache Found Fetch Failed Fetch Success Mode
  20. 20. 今後は・・・ • もっと柔軟にしていきたい • 汎用性を保ちつつ、どこまでネットワークの状態などに適応し た動きをさせられるか • Pushが欲しいというリクエスト多数 →いくつかのサービスに対応した機能拡張プラグイン作るか検 討
  21. 21. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/

×