Pro Yearly is on sale from $80 to $50! »

Service Worker Life Cycle “Install” #pwanight

F7f43b56c430d12358a8581d9e331000?s=47 tiwu
June 19, 2019

Service Worker Life Cycle “Install” #pwanight

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

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

F7f43b56c430d12358a8581d9e331000?s=128

tiwu

June 19, 2019
Tweet

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. ご清聴ありがとうございました