Service Worker Life Cycle “Install” #pwanight

by tiwu

Slide 1

Slide 1 text

Service Worker Life Cycle “Install” Wataru Taguchi

Slide 2

Slide 2 text

アジェンダ - 自己紹介 - Service Worker Life Cycle - Install - Activated - まとめ

Slide 3

Slide 3 text

自己紹介 # Wataru Taguchi - GameWith Front End Engineer - PWAとかWeb Componentsとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

Slide 4

Slide 4 text

https://developers.google.com/web/fund amentals/primers/service-workers/lifecyc le?hl=ja Service Worker Life Cylce

Slide 5

Slide 5 text

- Service Workerが最初に取得するイベント - Service Worker毎に1度だけしか呼ばれない - 1Byteでもコードを修正したService Workerは別扱いされて、再びinstallが実行される - 必要なリソースをキャッシュに貯めるのによく使われる Install

Slide 6

Slide 6 text

- Install後に発火するイベント - Installと同様Service Worker毎に1度だけしか呼ばれない - 古いキャッシュを削除するのによく使われる Activated

Slide 7

Slide 7 text

注意点 Activated != Service Workerによる制御開始 ↓ 初回アクセス時にSWの制御が開始されない

Slide 8

Slide 8 text

初回アクセス hoge.htmlにアクセス SWのregister install activated activated後にcss,js,imgをネットワークから取得しようとしても fetchイベントは発火しない

Slide 9

Slide 9 text

2回目のアクセス hoge.htmlにアクセス SWのregister activatedされたSWがあれば SWによる制御開始 2回目のアクセスは制御が開始されているので css,js,imgなどのfetchイベントは発火する

Slide 10

Slide 10 text

サンプル installイベント内で、htmlとimgをキャッシュに貯める loadイベント発火の3秒後にimgを表示する fetchイベントでキャッシュにあればキャッシュを返す

Slide 11

Slide 11 text

サンプル https://service-worker-sample.netlify.com/

Slide 12

Slide 12 text

初回アクセス installイベント内でhtmlとimgを取得してキャッシュその後imgを表示するが、SWの制御が開始されていないのでキャッシュに存在するが、ネットワークから取得

Slide 13

Slide 13 text

2回目のアクセスキャッシュに溜まっているのでHTMLはfetchイベントでキャッシュから返す 2回目なのでinstallは実行されず、HTML,imgの取得は行わない imgはキャッシュにあるので、fetchイベントでキャッシュから返す

Slide 14

Slide 14 text

サンプルちょっと待てよ？

Slide 15

Slide 15 text

Slide 16

Slide 16 text

2回目のアクセス hoge.htmlにアクセス SWのregister activatedされたSWがあれば SWによる制御開始 2回目のアクセスは制御が開始されているので css,js,imgなどのfetchイベントは発火する 2回目のHTMLをキャッシュが返していた制御開始されてないのに、制御が開始されている！？

Slide 17

Slide 17 text

https://developers.google.com/web/fundamentals/primer s/service-workers/lifecycle?hl=ja

Slide 18

Slide 18 text

https://developers.google.com/web/fundamentals/primer s/service-workers/lifecycle?hl=ja

Slide 19

Slide 19 text

つまり初回アクセス時は、ページの遷移はfetchで捕まえられる

Slide 20

Slide 20 text

初回アクセス時のSW制御初回アクセス時もcss,js,imgを fetchで捕まえたい！

Slide 21

Slide 21 text

初回アクセス時のSW制御 clients.claim()

Slide 22

Slide 22 text

- Install,Activatedが実行されてもSWの制御は開始されない - css,js,imgをfetchで捕まえられない - ただし、ページの遷移はfetchで捕まえられる - 初回アクセス時もcss等を捕まえたい場合はclient.claim() まとめ

Slide 23

Slide 23 text

ご清聴ありがとうございました