Service Worker Life Cycle “Install” #pwanight

PWA Night vol.5 ～PWAのミライや活用方法をみんなで考えよう～
で発表した資料です。

https://pwanight.connpass.com/event/131521/
https://service-worker-sample.netlify.com/

Transcript

1. Service Worker Life Cycle “Install” Wataru Taguchi
2. アジェンダ - 自己紹介 - Service Worker Life Cycle - Install - Activated - まとめ
3. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer - PWAとかWeb Componentsとかパフォーマンス チューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
4. https://developers.google.com/web/fund amentals/primers/service-workers/lifecyc le?hl=ja Service Worker Life Cylce
5. - Service Workerが最初に取得するイベント - Service Worker毎に1度だけしか呼ばれない - 1Byteでもコードを修正したService Workerは別扱いされて、再 びinstallが実行される - 必要なリソースをキャッシュに貯めるのによく使われる Install
6. - Install後に発火するイベント - Installと同様Service Worker毎に1度だけしか呼ばれない - 古いキャッシュを削除するのによく使われる Activated
7. 注意点 Activated != Service Workerによる制御開始 ↓ 初回アクセス時にSWの制御が開始されない
8. 初回アクセス hoge.htmlにアクセス SWのregister install activated activated後にcss,js,imgをネットワークから取得しようとしても fetchイベントは発火しない
9. 2回目のアクセス hoge.htmlにアクセス SWのregister activatedされたSWがあれば SWによる制御開始 2回目のアクセスは制御が開始されているので css,js,imgなどのfetchイベントは発火する
10. サンプル installイベント内で、htmlとimgをキャッシュに貯める loadイベント発火の3秒後にimgを表示する fetchイベントでキャッシュにあればキャッシュを返す
11. サンプル https://service-worker-sample.netlify.com/
12. 初回アクセス installイベント内でhtmlとimgを取得してキャッシュ その後imgを表示するが、SWの制御が開始されていないので キャッシュに存在するが、ネットワークから取得
13. 2回目のアクセス キャッシュに溜まっているのでHTMLはfetchイベントでキャッシュから返す 2回目なのでinstallは実行されず、HTML,imgの取得は行わない imgはキャッシュにあるので、fetchイベントでキャッシュから返す
14. サンプル ちょっと待てよ？
15. 2回目のアクセス hoge.htmlにアクセス SWのregister activatedされたSWがあれば SWによる制御開始 2回目のアクセスは制御が開始されているので css,js,imgなどのfetchイベントは発火する
16. 2回目のアクセス hoge.htmlにアクセス SWのregister activatedされたSWがあれば SWによる制御開始 2回目のアクセスは制御が開始されているので css,js,imgなどのfetchイベントは発火する 2回目のHTMLをキャッシュが返していた 制御開始されてないのに、制御が開始されている！？
17. https://developers.google.com/web/fundamentals/primer s/service-workers/lifecycle?hl=ja
18. https://developers.google.com/web/fundamentals/primer s/service-workers/lifecycle?hl=ja
19. つまり 初回アクセス時は、 ページの遷移はfetchで捕まえられる
20. 初回アクセス時のSW制御 初回アクセス時もcss,js,imgを fetchで捕まえたい！
21. 初回アクセス時のSW制御 clients.claim()
22. - Install,Activatedが実行されてもSWの制御は開始されない - css,js,imgをfetchで捕まえられない - ただし、ページの遷移はfetchで捕まえられる - 初回アクセス時もcss等を捕まえたい場合はclient.claim() まとめ
23. ご清聴ありがとうございました