PWA から始める Service Worker

Qiita Night〜記事投稿イベントお疲れ様会〜（ https://increments.connpass.com/event/216557/ ）でお話した内容です。

Transcript

1. PWA から始める Service Worker 1 @ohakutsu
2. 自己紹介 花田拓矢（はなだたくや） ohakutsu / おはくつ 青森県出身 新卒2年目のエンジニア Qiita の開発をしてます 駆け出しキャンパー⛺ 2
3. Qiita Night 〜記事投稿イベントお疲れ様会〜 3 ということで...
4. Qiita の記事投稿イベント「フロントエンド強化月間」で投稿した記事 4
5. Service Worker のキャッシュ戦略 ってなんやねん 5
6. PWA についてサックリ知る Service Worker のスゴさを知ってもらう 6
8. 8 Service Worker との 関連性が高い
9. PWA とは 9 Webアプリを ネイティブアプリのように 使える！
10. PWA の特徴 10 Installable Capable Reliable
11. PWA の特徴 11 Installable Capable Reliable ネイティブアプリの ような機能
12. PWA の特徴 12 Installable Capable Reliable ネイティブアプリの ような機能 オフラインでも 使える
13. PWA の特徴 13 Installable Capable Reliable ネイティブアプリの ような機能 インストールできる オフラインでも 使える
14. PWA の特徴 14 Installable Capable Reliable ネイティブアプリの ような機能 インストールできる オフラインでも 使える Web App Manifest + Service Worker をもとに 実現 されている
15. Web App Manifest Web アプリをネイティブアプリのように 見せるために必要な情報を定義するもの → manifest.json • アプリ名 • アイコン • アプリ起動時の画面 などを設定できる 15
16. Service Worker Web ページとは別にバックグラウンドで動作する JavaScript また、ネットワークリクエストに介入でき、制御できる しかも Service Worker 内で Cache API を呼び出せる 16 Web ページ Service Worker ネットワーク
17. Service Worker + Cache API PWA のオフラインサポート 17
18. Service Worker でのオフラインサポート 必要なリソースを事前にキャッシュしておき、 リソースへのリクエスト時にキャッシュから配信することで実現 18
19. Service Worker でのオフラインサポート 2 リソースを随時キャッシュしておき、オフライン時にキャッシュから配信 19
20. これをうまく使うことで キャッシュ戦略 ができる 20
21. Service Worker でのキャッシュ戦略 # Precache 必要となるリソースを事前にキャッシュする → ページに必要な JS ファイルや CSS 、フォントなどの事前に必要とわかっているもの # Runtime Cache リソースを随時キャッシュする → 画像、 API レスポンスなど動的に変わるもの 21
22. Runtime Cache いくつかの戦略がある • Network First • Cache First • Stale While Revalidate • Cache then Network • Cache and Network race など... 22
23. Network First リソースを随時キャッシュしておき、オフライン時にキャッシュから配信 23
24. Cache First はじめにキャッシュ、キャッシュがない場合ネットワークから配信・キャッシュ 24
25. Stale While Revalidate キャッシュから配信、裏側でネットワークにアクセスしキャッシュを更新 25
26. 他に... Cache then Network Cache and Network race 26
27. ただ、複雑になるとコードも複雑になってしまう... 27
28. コードを比較 Network First Stale While Revalidate 28
30. Workbox Service Worker，Cache API を使ったキャッシングを 記述・管理するためのライブラリ 30 たった これだけ
31. よく使うものはレシピとして用意されている • googleFontsCache • imageCache • offlineFallback など... Workbox Recipes 31 これだけで 画像のキャッシュが できる
32. もっと知りたい！ # PWA • Progressive Web Apps | web.dev # Service Worker • Service Worker の紹介 | Web Fundamentals | Google Developers • Service worker の使用 - Web API | MDN • The Offline Cookbook | web.dev # Workbox • Workbox | Google Developers 32
33. さいごに • Service Worker でのキャッシュ戦略は非常に強力 • それが故にキャッシュでの事故を起こす可能性もあり • Workbox を使って楽にキャッシュ戦略をしよう 33
34. ありがとうございました 34