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.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
1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
CSR / SSR / SSGの動向2020
shibe97
2
1.5k
Jamstack×microCMS 実装編
shibe97
4
870
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
170
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
The Role of Developer Relations in AI Product Success.
giftojabu1
0
140
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
強いチームと開発生産性
onk
PRO
35
11k
Terraform Stacks入門 #HashiTalks
msato
0
360
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Designing for humans not robots
tammielis
250
25k
Teambox: Starting and Learning
jrom
133
8.8k
BBQ
matthewcrist
85
9.3k
Into the Great Unknown - MozCon
thekraken
32
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
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