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
Jamstack × PWA におけるキャッシュ戦略
Search
Kazuki Shibata
July 15, 2020
Technology
3
1k
Jamstack × PWA におけるキャッシュ戦略
PWA Night vol.18 ~パフォーマンス~ での発表資料です。
Kazuki Shibata
July 15, 2020
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
940
SvelteKitでJamstackを試す
shibe97
1
980
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.7k
CSR / SSR / SSGの動向2020
shibe97
2
1.4k
Jamstack×microCMS 実装編
shibe97
4
770
SentryでSPAのエラーログを収集する
shibe97
1
1.4k
useRefについて調べてみた
shibe97
1
130
フロントエンドエンジニアのキャリアパス
shibe97
9
3.5k
Containerどこに置く?
shibe97
1
1.8k
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
790
MapLibreとAmazon Location Service
dayjournal
1
160
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
JSON攻略法.pdf
miyakemito
8
5.1k
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
370
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
250
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Visualization
eitanlees
136
14k
How to Ace a Technical Interview
jacobian
272
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Designing for Performance
lara
601
67k
The Invisible Customer
myddelton
114
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Transcript
Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ ʢNuxtϕʔεͷ͓ʣ ࣲా ف - Wanta, Inc
PWA Night vol.18 ʙύϑΥʔϚϯεʙ
ࣲా ف / Kazuki Shibata Υϯλגࣜձࣾͷڞಉۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕͖ɻ
!TIJCF
None
microCMSͷհ • ຊͷϔουϨεCMS • ίϯςϯπAPIܦ༝Ͱऔಘ • ϚϧνϓϥοτϑΥʔϜʹରԠ • Imgixࡌ •
Jamstackͱͷ૬ੑ˕
ຊͷྲྀΕ • Jamstackͱ • JamstackͷΩϟογϡઓུ • Ωϟογϡߏ • NuxtͷϓϦϑΣονػೳ •
Nuxt PWA
Jamstackͱ What is the Jamstack
None
Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ ࣌CSRΛߦ͏
• ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
JamstackͷϝϦοτ • ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧϏϧυ࣌ͷΈ • APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺
• ສ͕ҰɺAPI͕མͪͯ҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
JamstackͷσϝϦοτ • ϖʔδ͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮͕ͪΐͬͱ໘ • εςʔδϯάڥΛͲ͏ͬͯߏங͢Δ͔ɺݟ͕·ͩগͳ͍
JamstackͷΩϟογϡઓུ Cache Strategy
Ωϟογϡߏ CDN Ωϟογϡ ϒϥβ Ωϟογϡ ωοτϫʔΫ
Ωϟογϡߏ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ Service WorkerίίʹॲཧΛڬΊΔʢProxyͬΆׂ͍ʣ هɿϒϥβΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ ϒϥβΩϟογϡΑΓखલʹSW͕͋Δ
Cache APIͱϒϥβΩϟογϡͷҧ͍ • Cache APIΛ͏ͱΩϟογϡͷࡉ͔͍ίϯτϩʔϧ͕Ͱ͖Δ • ·ͩΞΫηε͍ͯ͠ͳ͍ϑΝΠϧΩϟογϡͰ͖Δ • ϑΝΠϧ୯ҐͰͷΩϟογϡ੍ޚ͕Ͱ͖Δ •
ΦϑϥΠϯͰ͑Δ
NuxtͷϓϦϑΣονػೳ • NuxtʹViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕ ͍͍ͭͯΔ • Full Static Generation ʹΑΔpayloadϑΝΠϧର •
payloadϑΝΠϧɿSPAભҠઌͷσʔλ • ϒϥβΩϟογϡࡁΈͷϑΝΠϧऔಘ͠ʹߦ͔ͳ͍ • ମײతʹඇৗʹߴ
DEMO https://microcms.io/blog
ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ ϝϞϦ વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͘ͳΔ
ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ ϝϞϦ ϓϦϑΣονσʔλग़དྷΔݶΓΩϟογϡ͍ͨ͠
Nuxt PWA Progressive Web App
None
ϥϯλΠϜΩϟογϡ ϓϦΩϟογϡ • ϑΣον࣌ʹΩϟογϡ • ΩϟογϡઓུΛࢦఆͰ͖Δ • Service WorkerͷΠϯετʔϧ࣌ʹࣄલʹΩϟογϡ͓ͯ͘͜͠ͱ͕Ͱ͖Δ •
ະΞΫηεͷϑΝΠϧΛΩϟογϡͰ͖Δ • ϫΠϧυΧʔυ͑ͳ͍ʢଟʣ
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿCache first
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿNetwork first
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿStale-While-Revalidate όοΫάϥϯυͰ ϑΣον
Nuxt PWA • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞ͯ͘͠ΕΔ • ༰nuxt.config.jsͰઃఆͰ͖Δ • Workbox API͕͑Δ •
GoogleͷศརϥΠϒϥϦ • σϑΥϧτͰ /_nuxt/ ҎԼ Cache first ͰϥϯλΠϜΩϟογϡ͞ΕΔ • όϯυϧJSྨ • ϓϦϑΣον͞ΕΔ payload.js ྨ • σϑΥϧτͰϓϦΩϟογϡͷઃఆͳ͠ʢv3Ҏ߱ʣ
None
Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ • ίϯςϯπHTMLߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate • /_nuxt/ ԼϏϧυͷͨͼʹϋογϡ͕͘ͷͰ cacheFirst
Ͱͳ͍ • ϓϦΩϟογϡωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏ • PWAΞϓϦͷ༰ྔ૿Ճ·͘͠ͳ͍ • جຊݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ͔ʁ • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑͦΜͳʹͳͦ͞͏
nuxt.config.js ͷઃఆ • offlineAssets • ϓϦΩϟογϡ • runtimeCaching • ϥϯλΠϜΩϟογϡ
• ΫϩεΦϦδϯͳ௨৴ʹରͯ͠networkFirst·ͨ staleWhileRevalidate͔͑͠ͳ͍ • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͍͚Δ͔ ʢݕূؒʹ߹Θͣʣ • ࢀߟɿhttps://developers.google.com/web/tools/ workbox/guides/handle-third-party-requests
ΞΠίϯྨ 3rd party CDN
·ͱΊ Summary
·ͱΊ • Jamstackͷར੩తϑΝΠϧ৴ʴSPAʹΑΔߴύϑΥʔϚϯε • NuxtϓϦϑΣονͰύϑΥʔϚϯε্ ʢϦιʔεͷϩʔυ࣌ؒΛ΄΅ແͤ͘Δʣ • Service WorkerͰΩϟογϡΛޮԽͯ͠͞ΒʹύϑΥʔϚϯε্
Thanks :) !TIJCF