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
1.2k
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
1.2k
SvelteKitでJamstackを試す
shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
CSR / SSR / SSGの動向2020
shibe97
2
1.7k
Jamstack×microCMS 実装編
shibe97
4
980
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
170
フロントエンドエンジニアのキャリアパス
shibe97
9
3.9k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
stupid jj tricks
indirect
0
7.9k
BtoBプロダクト開発の深層
16bitidol
0
290
バイブコーディングと継続的デプロイメント
nwiizo
2
420
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.4k
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
310
SOC2取得の全体像
shonansurvivors
1
380
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
自動テストのコストと向き合ってみた
qa
0
130
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
Where will it converge?
ibknadedeji
0
180
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Statistics for Hackers
jakevdp
799
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Automating Front-end Workflow
addyosmani
1371
200k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Making Projects Easy
brettharned
119
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Six Lessons from altMBA
skipperchong
28
4k
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