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

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

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

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

July 15, 2020
Tweet

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