WordPress の PWA プラグイン制作を通して考えた、PWA実装のキーになる ServiceWorker によるキャッシュ制御の勘所をお話ししました。 PWA 設計時のヒントになれば幸いです。

1. 最大公約数的なServiceWorker
制作から見るPWAの勘所
2019/4/17
@PWA Night
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？
→最大公約数的な

5. PWAで何やりたいか（できるか）
• キャッシュ
• Push
• Background Sync
• オフライン（キャッシュの一種といえなくもない）
• インストール
• アイコン

6. プラグインの機能を絞った
• キャッシュ
• Push →思うところあってあとまわし（もしお金もらうならココかな、とも）
• Background Sync →汎用的な実装イメージわかず
• オフライン（キャッシュの一種といえなくもない）
• インストール
• アイコン

7. いつも言ってるけど、
キャッシュが命
できるだけ簡単な選択の幅を

8. 基本キャッシュプランとして
Cache First と Online First

9. キャッシュの除外
キャッシュするもの、しないもの
↑大事
キャッシュされてはいけないものを除外する

10. キャッシュの有効期限
古いキャッシュを一定期間で捨てる

11. これから実装したい
Online First だけど一部 Cache First にしたい
Cache First だけど一部 Online First にしたい

12. 最大公約数的キャッシュプラン完成型？
基本キャッシュプラン
Online First
Cache First
キャッシュ除外
（正規表現で柔軟にURLを指定）
キャッシュ有効期限
プラン反転指定URL
（Coming Next）
あとはprecacheとか追加的な機能もいろいろあるけど、そこは追々・・・

13. 結局キャッシュプランの設計は・・・
キャッシュ｛する｜しない｝要素の
切り分けが大事。
PWA 設計のちょっとしたヒントになれば幸いです。

14. 最後に告知！
日本 Android の会
ABC 2019 Spring
2019/5/26
@東海大学高輪キャンパス
今年もモバイルWebトラックをやります！
PWA についてもっと掘り下げたい方、どっぷり半日PWAの話が聞けま
す！
PWA Nightセッションもあるよ！！！！
ぜひお越しください。
https://japan-android-group.connpass.com/event/125928/

15. もうひとつ告知
WordCamp Haneda 2019 でもPWAのお話しします！
4/20～21
※Session Day は20日（土）
会場：大田区産業プラザPIO
https://2019.haneda.wordcamp.org/

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