Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA から始める Service Worker
Search
ohakutsu
June 30, 2021
Technology
1
75
PWA から始める Service Worker
Qiita Night〜記事投稿イベントお疲れ様会〜(
https://increments.connpass.com/event/216557/
)でお話した内容です。
ohakutsu
June 30, 2021
Tweet
Share
More Decks by ohakutsu
See All by ohakutsu
エンジニアもUIを作るならユーザーについて知ろう!
ohakutsu
1
340
Web App Manifest をフル活用してみる
ohakutsu
0
120
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
4.5k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
160
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
1
2.1k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
2.9k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
170
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
350
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
3
620
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
2.2k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
450
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
150
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
3.8k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Adopting Sorbet at Scale
ufuk
77
9.4k
Designing for Performance
lara
609
69k
Balancing Empowerment & Direction
lara
1
400
A Modern Web Designer's Workflow
chriscoyier
694
190k
Statistics for Hackers
jakevdp
799
220k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Transcript
PWA から始める Service Worker 1 @ohakutsu
自己紹介 花田拓矢(はなだたくや) ohakutsu / おはくつ 青森県出身 新卒2年目のエンジニア Qiita の開発をしてます 駆け出しキャンパー⛺
2
Qiita Night 〜記事投稿イベントお疲れ様会〜 3 ということで...
Qiita の記事投稿イベント「フロントエンド強化月間」で投稿した記事 4
Service Worker のキャッシュ戦略 ってなんやねん 5
PWA についてサックリ知る Service Worker のスゴさを知ってもらう 6
7
8 Service Worker との 関連性が高い
PWA とは 9 Webアプリを ネイティブアプリのように 使える!
PWA の特徴 10 Installable Capable Reliable
PWA の特徴 11 Installable Capable Reliable ネイティブアプリの ような機能
PWA の特徴 12 Installable Capable Reliable ネイティブアプリの ような機能 オフラインでも 使える
PWA の特徴 13 Installable Capable Reliable ネイティブアプリの ような機能 インストールできる オフラインでも
使える
PWA の特徴 14 Installable Capable Reliable ネイティブアプリの ような機能 インストールできる オフラインでも
使える Web App Manifest + Service Worker をもとに 実現 されている
Web App Manifest Web アプリをネイティブアプリのように 見せるために必要な情報を定義するもの → manifest.json • アプリ名
• アイコン • アプリ起動時の画面 などを設定できる 15
Service Worker Web ページとは別にバックグラウンドで動作する JavaScript また、ネットワークリクエストに介入でき、制御できる しかも Service Worker 内で
Cache API を呼び出せる 16 Web ページ Service Worker ネットワーク
Service Worker + Cache API PWA のオフラインサポート 17
Service Worker でのオフラインサポート 必要なリソースを事前にキャッシュしておき、 リソースへのリクエスト時にキャッシュから配信することで実現 18
Service Worker でのオフラインサポート 2 リソースを随時キャッシュしておき、オフライン時にキャッシュから配信 19
これをうまく使うことで キャッシュ戦略 ができる 20
Service Worker でのキャッシュ戦略 # Precache 必要となるリソースを事前にキャッシュする → ページに必要な JS ファイルや
CSS 、フォントなどの事前に必要とわかっているもの # Runtime Cache リソースを随時キャッシュする → 画像、 API レスポンスなど動的に変わるもの 21
Runtime Cache いくつかの戦略がある • Network First • Cache First •
Stale While Revalidate • Cache then Network • Cache and Network race など... 22
Network First リソースを随時キャッシュしておき、オフライン時にキャッシュから配信 23
Cache First はじめにキャッシュ、キャッシュがない場合ネットワークから配信・キャッシュ 24
Stale While Revalidate キャッシュから配信、裏側でネットワークにアクセスしキャッシュを更新 25
他に... Cache then Network Cache and Network race 26
ただ、複雑になるとコードも複雑になってしまう... 27
コードを比較 Network First Stale While Revalidate 28
29
Workbox Service Worker,Cache API を使ったキャッシングを 記述・管理するためのライブラリ 30 たった これだけ
よく使うものはレシピとして用意されている • googleFontsCache • imageCache • offlineFallback など... Workbox Recipes
31 これだけで 画像のキャッシュが できる
もっと知りたい! # 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
さいごに • Service Worker でのキャッシュ戦略は非常に強力 • それが故にキャッシュでの事故を起こす可能性もあり • Workbox を使って楽にキャッシュ戦略をしよう
33
ありがとうございました 34