Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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

Kazuki Shibata

July 15, 2020
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

Transcript

  1. Ωϟογϡߏ੒ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ

    ϒϥ΢β Service Worker͸ίίʹॲཧΛڬΊΔʢProxyͬΆ͍໾ׂʣ ௥هɿϒϥ΢βΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ ϒϥ΢βΩϟογϡΑΓखલʹSW͕͋Δ
  2. NuxtͷϓϦϑΣονػೳ • Nuxtʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕
 ͍͍ͭͯΔ • Full Static Generation ʹΑΔpayloadϑΝΠϧ΋ର৅ •

    payloadϑΝΠϧɿSPAભҠઌͷσʔλ • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍ • ମײతʹ͸ඇৗʹߴ଎
  3. ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥ΢β
 Ωϟογϡ ωοτϫʔΫ

    ϒϥ΢β ϝϞϦ ౰વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͸௕͘ͳΔ
  4. Nuxt PWA • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞੒ͯ͘͠ΕΔ • ಺༰͸nuxt.config.jsͰઃఆͰ͖Δ • Workbox API͕࢖͑Δ •

    Google੡ͷศརϥΠϒϥϦ • σϑΥϧτͰ /_nuxt/ ҎԼ͸ Cache first ͰϥϯλΠϜΩϟογϡ͞ΕΔ • όϯυϧJSྨ • ϓϦϑΣον͞ΕΔ payload.js ྨ • σϑΥϧτͰ͸ϓϦΩϟογϡͷઃఆ͸ͳ͠ʢv3Ҏ߱ʣ
  5. Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ • ίϯςϯπHTML͸ߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate • /_nuxt/ ഑Լ͸Ϗϧυͷͨͼʹϋογϡ஋͕෇͘ͷͰ cacheFirst

    Ͱ໰୊ͳ͍ • ϓϦΩϟογϡ͸ωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏ • PWAΞϓϦͷ༰ྔ૿Ճ͸๬·͘͠ͳ͍ • جຊ͸ݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ೉͔ʁ • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑ͸ͦΜͳʹͳͦ͞͏
  6. nuxt.config.js ͷઃఆ • offlineAssets • ϓϦΩϟογϡ • runtimeCaching • ϥϯλΠϜΩϟογϡ

    • ΫϩεΦϦδϯͳ௨৴ʹରͯ͠͸networkFirst·ͨ͸ staleWhileRevalidate͔͠࢖͑ͳ͍ • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͹͍͚Δ͔΋
 ʢݕূؒʹ߹Θͣʣ • ࢀߟɿhttps://developers.google.com/web/tools/ workbox/guides/handle-third-party-requests