Jamstack × PWA におけるキャッシュ戦略

PWA Night vol.18 ～パフォーマンス～ での発表資料です。

Transcript

1. Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ ʢNuxtϕʔεͷ͓࿩ʣ ࣲా ࿨ف - Wanta, Inc PWA Night vol.18 ʙύϑΥʔϚϯεʙ
2. ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL
   
   /FYU
   
   /VYU
   ͕޷͖ɻ !TIJCF
4. microCMSͷ঺հ • ೔ຊ੡ͷϔουϨεCMS • ίϯςϯπ͸APIܦ༝Ͱऔಘ • ϚϧνϓϥοτϑΥʔϜʹରԠ • Imgix౥ࡌ • Jamstackͱͷ૬ੑ΋˕
5. ຊ೔ͷྲྀΕ • Jamstackͱ͸ • JamstackͷΩϟογϡઓུ • Ωϟογϡߏ੒ • NuxtͷϓϦϑΣονػೳ • Nuxt PWA
6. Jamstackͱ͸ What is the Jamstack
8. Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ഑৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ ࣌͸CSRΛߦ͏ • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ
9. Α͋͘ΔJamstackͷߏ੒
10. JamstackͷϝϦοτ • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧ͸Ϗϧυ࣌ͷΈ • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺ • ສ͕ҰɺAPI͕མͪͯ΋҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
11. JamstackͷσϝϦοτ • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮૷͕ͪΐͬͱ໘౗ • εςʔδϯά؀ڥΛͲ͏΍ͬͯߏங͢Δ͔౳ɺ஌ݟ͕·ͩগͳ͍
12. JamstackͷΩϟογϡઓུ Cache Strategy
13. Ωϟογϡߏ੒ CDN Ωϟογϡ ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ
14. Ωϟογϡߏ੒ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ ϒϥ΢β Service Worker͸ίίʹॲཧΛڬΊΔʢProxyͬΆ͍໾ׂʣ ௥هɿϒϥ΢βΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ ϒϥ΢βΩϟογϡΑΓखલʹSW͕͋Δ
15. Cache APIͱϒϥ΢βΩϟογϡͷҧ͍ • Cache APIΛ࢖͏ͱΩϟογϡͷࡉ͔͍ίϯτϩʔϧ͕Ͱ͖Δ • ·ͩΞΫηε͍ͯ͠ͳ͍ϑΝΠϧ΋ΩϟογϡͰ͖Δ • ϑΝΠϧ୯ҐͰͷΩϟογϡ੍ޚ͕Ͱ͖Δ • ΦϑϥΠϯͰ΋࢖͑Δ
16. NuxtͷϓϦϑΣονػೳ • Nuxtʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕
 ͍͍ͭͯΔ • Full Static Generation ʹΑΔpayloadϑΝΠϧ΋ର৅ • payloadϑΝΠϧɿSPAભҠઌͷσʔλ • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍ • ମײతʹ͸ඇৗʹߴ଎
17. DEMO https://microcms.io/blog
18. ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ ϒϥ΢β ϝϞϦ ౰વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͸௕͘ͳΔ
19. ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ ϒϥ΢β ϝϞϦ ϓϦϑΣονσʔλ΋ग़དྷΔݶΓΩϟογϡ͍ͨ͠
20. Nuxt PWA Progressive Web App
22. ϥϯλΠϜΩϟογϡ ϓϦΩϟογϡ • ϑΣον࣌ʹΩϟογϡ • ΩϟογϡઓུΛࢦఆͰ͖Δ • Service WorkerͷΠϯετʔϧ࣌ʹࣄલʹΩϟογϡ͓ͯ͘͜͠ͱ͕Ͱ͖Δ • ະΞΫηεͷϑΝΠϧΛΩϟογϡͰ͖Δ • ϫΠϧυΧʔυ͸࢖͑ͳ͍ʢଟ෼ʣ
23. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿCache first
24. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿNetwork first
25. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿStale-While-Revalidate όοΫάϥ΢ϯυͰ
 ϑΣον
26. Nuxt PWA • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞੒ͯ͘͠ΕΔ • ಺༰͸nuxt.config.jsͰઃఆͰ͖Δ • Workbox API͕࢖͑Δ • Google੡ͷศརϥΠϒϥϦ • σϑΥϧτͰ /_nuxt/ ҎԼ͸ Cache first ͰϥϯλΠϜΩϟογϡ͞ΕΔ • όϯυϧJSྨ • ϓϦϑΣον͞ΕΔ payload.js ྨ • σϑΥϧτͰ͸ϓϦΩϟογϡͷઃఆ͸ͳ͠ʢv3Ҏ߱ʣ
28. Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ • ίϯςϯπHTML͸ߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate • /_nuxt/ ഑Լ͸Ϗϧυͷͨͼʹϋογϡ஋͕෇͘ͷͰ cacheFirst Ͱ໰୊ͳ͍ • ϓϦΩϟογϡ͸ωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏ • PWAΞϓϦͷ༰ྔ૿Ճ͸๬·͘͠ͳ͍ • جຊ͸ݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ೉͔ʁ • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑ͸ͦΜͳʹͳͦ͞͏
29. nuxt.config.js ͷઃఆ • offlineAssets • ϓϦΩϟογϡ • runtimeCaching • ϥϯλΠϜΩϟογϡ • ΫϩεΦϦδϯͳ௨৴ʹରͯ͠͸networkFirst·ͨ͸ staleWhileRevalidate͔͠࢖͑ͳ͍ • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͹͍͚Δ͔΋
 ʢݕূؒʹ߹Θͣʣ • ࢀߟɿhttps://developers.google.com/web/tools/ workbox/guides/handle-third-party-requests
30. ΞΠίϯྨ 3rd party CDN
31. ·ͱΊ Summary
32. ·ͱΊ • Jamstackͷར఺͸੩తϑΝΠϧ഑৴ʴSPAʹΑΔߴύϑΥʔϚϯε • NuxtϓϦϑΣονͰύϑΥʔϚϯε޲্
 ʢϦιʔεͷϩʔυ࣌ؒΛ΄΅ແͤ͘Δʣ • Service WorkerͰΩϟογϡΛޮ཰Խͯ͠͞ΒʹύϑΥʔϚϯε޲্
33. Thanks :) !TIJCF