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

1. PWA4WP の ServiceWorker
2019/6/14
@PWA Beginners #5
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. PWA for WordPress
WordPress に PWA を実装すること
• 世界の Web サイト（アクセス Top 1000万）の３割のシェア
• Web アプリというより Web サイト
• 多様なテーマとプラグインに同居
• パフォーマンス（速度）が課題になることが多々ある
• REST API でアプリバックエンド的に使用することも可
• ユーザーの大半は技術に詳しいわけではないし、学習コストが
低いのがそもそもの CMS の良さ

5. 機能の選択
• キャッシュ
→多様なサイトのリクエストに応える柔軟性を重視
• Push
→いろいろな外部サービスへの依存・・・実装見送り
• Background Sync
→使われ方が読めない・・・機能なし
• A2HS
→ポップアップは奥ゆかしく

6. そんなわけで主題は
ServiceWorker
というよりそこに実装した
Cache コントロール
のお話し

7. キャッシュプラン
• オンラインファースト（オンライン優先）
• オンラインコンテンツを優先的に取得して表示する
• オフライン状態のときや、ネットワークの速度が遅いときなどにキャッシュを使用して
コンテンツを表示する
• 基本的にオンラインコンテンツを使用するので情報が新鮮
• パフォーマンスは通常のコンテンツ表示と同じ
• キャッシュファースト（キャッシュ優先）
• キャッシュコンテンツを優先的に表示
• 一定時間の経過あるいはコンテンツの更新をチェックするなどしてキャッシュを更新
• キャッシュを使用するのでコンテンツの更新が即時反映されないこともある
• ネットワークに依存しないので高速
• キャッシュ無し
• ECサイトの買い物カゴなど、キャッシュしてはいけないコンテンツ

8. キャッシュと性能のバランス
• キャッシュを多用するほど高速になるが、コンテンツの鮮度の
コントロールは難しくなる
• オンラインは常に新鮮だが性能は通信やサーバーに左右される
キャッシュ優先とオンライン優先のコンテンツのバラン
スが PWA 実装成功の鍵！

9. キャッシュプランの設計は
キャッシュのパワーを最大限に利用する
ための、キャッシュ｛する｜しない｝要
素の切り分けが大事。

10. Web コンテンツを「必要な鮮度」で切り分けてみる
【JavaScriptで動的に内容を表示するサイト（SPAなど）】
Web コンテンツ
HTML
画像
CSS
JavaScript
キャッシュ
キャッシュ
キャッシュ
キャッシュ
データオンライン優先
JavaScriptがオンラインから
データを取得してHTMLに挿入

11. Web コンテンツを「必要な鮮度」で切り分けてみる
【HTMLに情報が含まれているサイト】
WordPressはこれ。
Web コンテンツ
HTML
画像
CSS
JavaScript
キャッシュ
キャッシュ
キャッシュ
オンライン優先

12. WordPress ：
まるっとキャッシュすると身動きとれない
Template Data
Cache
ページまる
ごとキャッ
シュ

13. App Shell ライクにできるのが理想
Template Data
REST API
JavaScript
Cache
ページの外
枠だけ
キャッシュ

14. API 化して、URL をキャッシュ除外
Template Data
REST API
JavaScript
Cache
ページの外
枠だけ
キャッシュ
キャッシュ
除外する

15. そして出来上がったもの
キャッシュする、しない、の実装例

16. URLごとに動作パターンを判定する柔軟性
基本プラン
＆除外判定
ONLINE FIRST
強制CACHE
通常処理
（ONLINE FIRST）
CACHE FIRST
強制ONLINE
通常処理
（CACHE FIRST）CACHE 除外

17. 設定画面こうなりました

18. 設定項目
（多すぎると初心者キラーになるのが悩ましい）
• 基本キャッシュ計画 → ONLINE/OFFLINE FIRST
• オフラインページURL
• キャッシュ有効時間
• キャッシュ除外URL
• 強制キャッシュ優先URL
• 強制オンライン優先URL
• 初期キャッシュ
• デバッグモード（コンソールに動作ログ出す）

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. 今後は・・・
• もっと柔軟にしていきたい
• 汎用性を保ちつつ、どこまでネットワークの状態などに適応し
た動きをさせられるか
• Pushが欲しいというリクエスト多数
→いくつかのサービスに対応した機能拡張プラグイン作るか検
討

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