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

Transcript

1. Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ ʢNuxtϕʔεͷ͓࿩ʣ ࣲా ࿨ف - Wanta, Inc

   PWA Night vol.18 ʙύϑΥʔϚϯεʙ

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

   !TIJCF
3. None

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

   Jamstackͱͷ૬ੑ΋˕

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

   Nuxt PWA

6. Jamstackͱ͸ What is the Jamstack

7. None

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

21. None

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Ҏ߱ʣ
27. None

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