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

by Kazuki Shibata

Slide 1

Slide 1 text

Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ ʢNuxtϕʔεͷ͓࿩ʣ ࣲా ࿨ف - Wanta, Inc PWA Night vol.18 ʙύϑΥʔϚϯεʙ

Slide 2

Slide 2 text

ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ  ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕޷͖ɻ !TIJCF

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

microCMSͷ঺հ • ೔ຊ੡ͷϔουϨεCMS • ίϯςϯπ͸APIܦ༝Ͱऔಘ • ϚϧνϓϥοτϑΥʔϜʹରԠ • Imgix౥ࡌ • Jamstackͱͷ૬ੑ΋˕

Slide 5

Slide 5 text

ຊ೔ͷྲྀΕ • Jamstackͱ͸ • JamstackͷΩϟογϡઓུ • Ωϟογϡߏ੒ • NuxtͷϓϦϑΣονػೳ • Nuxt PWA

Slide 6

Slide 6 text

Jamstackͱ͸ What is the Jamstack

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ഑৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ ࣌͸CSRΛߦ͏ • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ

Slide 9

Slide 9 text

Α͋͘ΔJamstackͷߏ੒

Slide 10

Slide 10 text

JamstackͷϝϦοτ • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧ͸Ϗϧυ࣌ͷΈ • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺ • ສ͕ҰɺAPI͕མͪͯ΋҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆

Slide 11

Slide 11 text

JamstackͷσϝϦοτ • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮૷͕ͪΐͬͱ໘౗ • εςʔδϯά؀ڥΛͲ͏΍ͬͯߏங͢Δ͔౳ɺ஌ݟ͕·ͩগͳ͍

Slide 12

Slide 12 text

JamstackͷΩϟογϡઓུ Cache Strategy

Slide 13

Slide 13 text

Ωϟογϡߏ੒ CDN Ωϟογϡ ϒϥ΢β  Ωϟογϡ ωοτϫʔΫ

Slide 14

Slide 14 text

Ωϟογϡߏ੒ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β  Ωϟογϡ ωοτϫʔΫ ϒϥ΢β Service Worker͸ίίʹॲཧΛڬΊΔʢProxyͬΆ͍໾ׂʣ ௥هɿϒϥ΢βΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ ϒϥ΢βΩϟογϡΑΓखલʹSW͕͋Δ

Slide 15

Slide 15 text

Cache APIͱϒϥ΢βΩϟογϡͷҧ͍ • Cache APIΛ࢖͏ͱΩϟογϡͷࡉ͔͍ίϯτϩʔϧ͕Ͱ͖Δ • ·ͩΞΫηε͍ͯ͠ͳ͍ϑΝΠϧ΋ΩϟογϡͰ͖Δ • ϑΝΠϧ୯ҐͰͷΩϟογϡ੍ޚ͕Ͱ͖Δ • ΦϑϥΠϯͰ΋࢖͑Δ

Slide 16

Slide 16 text

NuxtͷϓϦϑΣονػೳ • Nuxtʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕  ͍͍ͭͯΔ • Full Static Generation ʹΑΔpayloadϑΝΠϧ΋ର৅ • payloadϑΝΠϧɿSPAભҠઌͷσʔλ • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍ • ମײతʹ͸ඇৗʹߴ଎

Slide 17

Slide 17 text

DEMO https://microcms.io/blog

Slide 18

Slide 18 text

ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β  Ωϟογϡ ωοτϫʔΫ ϒϥ΢β ϝϞϦ ౰વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͸௕͘ͳΔ

Slide 19

Slide 19 text

ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β  Ωϟογϡ ωοτϫʔΫ ϒϥ΢β ϝϞϦ ϓϦϑΣονσʔλ΋ग़དྷΔݶΓΩϟογϡ͍ͨ͠

Slide 20

Slide 20 text

Nuxt PWA Progressive Web App

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ϥϯλΠϜΩϟογϡ ϓϦΩϟογϡ • ϑΣον࣌ʹΩϟογϡ • ΩϟογϡઓུΛࢦఆͰ͖Δ • Service WorkerͷΠϯετʔϧ࣌ʹࣄલʹΩϟογϡ͓ͯ͘͜͠ͱ͕Ͱ͖Δ • ະΞΫηεͷϑΝΠϧΛΩϟογϡͰ͖Δ • ϫΠϧυΧʔυ͸࢖͑ͳ͍ʢଟ෼ʣ

Slide 23

Slide 23 text

ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿCache ﬁrst

Slide 24

Slide 24 text

ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿNetwork ﬁrst

Slide 25

Slide 25 text

ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿStale-While-Revalidate όοΫάϥ΢ϯυͰ  ϑΣον

Slide 26

Slide 26 text

Nuxt PWA • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞੒ͯ͘͠ΕΔ • ಺༰͸nuxt.conﬁg.jsͰઃఆͰ͖Δ • Workbox API͕࢖͑Δ • Google੡ͷศརϥΠϒϥϦ • σϑΥϧτͰ /_nuxt/ ҎԼ͸ Cache ﬁrst ͰϥϯλΠϜΩϟογϡ͞ΕΔ • όϯυϧJSྨ • ϓϦϑΣον͞ΕΔ payload.js ྨ • σϑΥϧτͰ͸ϓϦΩϟογϡͷઃఆ͸ͳ͠ʢv3Ҏ߱ʣ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ • ίϯςϯπHTML͸ߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate • /_nuxt/ ഑Լ͸Ϗϧυͷͨͼʹϋογϡ஋͕෇͘ͷͰ cacheFirst Ͱ໰୊ͳ͍ • ϓϦΩϟογϡ͸ωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏ • PWAΞϓϦͷ༰ྔ૿Ճ͸๬·͘͠ͳ͍ • جຊ͸ݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ೉͔ʁ • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑ͸ͦΜͳʹͳͦ͞͏

Slide 29

Slide 29 text

nuxt.conﬁg.js ͷઃఆ • ofﬂineAssets • ϓϦΩϟογϡ • runtimeCaching • ϥϯλΠϜΩϟογϡ • ΫϩεΦϦδϯͳ௨৴ʹରͯ͠͸networkFirst·ͨ͸ staleWhileRevalidate͔͠࢖͑ͳ͍ • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͹͍͚Δ͔΋  ʢݕূؒʹ߹Θͣʣ • ࢀߟɿhttps://developers.google.com/web/tools/ workbox/guides/handle-third-party-requests

Slide 30

Slide 30 text

ΞΠίϯྨ 3rd party CDN

Slide 31

Slide 31 text

·ͱΊ Summary

Slide 32

Slide 32 text

·ͱΊ • Jamstackͷར఺͸੩తϑΝΠϧ഑৴ʴSPAʹΑΔߴύϑΥʔϚϯε • NuxtϓϦϑΣονͰύϑΥʔϚϯε޲্  ʢϦιʔεͷϩʔυ࣌ؒΛ΄΅ແͤ͘Δʣ • Service WorkerͰΩϟογϡΛޮ཰Խͯ͠͞ΒʹύϑΥʔϚϯε޲্

Slide 33

Slide 33 text

Thanks :) !TIJCF