Workbox web worker caching and causes duplicate network calls

问题

I have implemented the caching using the following code:

require("dotenv").config()
const workboxBuild = require("workbox-build")
const { COUNTRY: country, NODE_ENV } = process.env
const urlPattern = new RegExp(`/${country}\/static|_next\/.*/`)     
const buildSW = () => {
      return workboxBuild.generateSW({
        swDest: "public/workbox-worker.js",
        clientsClaim: true,
        mode: NODE_ENV,
        skipWaiting: true,
        sourcemap: false,
        runtimeCaching: [
          {
            urlPattern: urlPattern,
    
            // Apply a cache-first strategy.
            handler: "CacheFirst",
            options: {
              cacheName: "Static files caching",
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 15 * 60, // 15minutes
              },
            },
          },
        ],
      })
    }

I am trying to do run time caching. I assume it goes like:

App -> calls assets -> Completes assets -> Caches it.

However am seeing in this flow on my local server build:

^ 1st Load of the page

^ I refresh the page

^ I refresh again

Please correct me if am wrong. Am assuming this is the flow of the caching that takes place:

Image 1) Page loads -> Service worker gets installed after assets are loaded and activated.

Image 2) Page loads -> Service worker caches images after they are loaded because of cacheFirst approach.

Image 3) Page loads -> Fetches from service worker.

Is there any improvements that I can do here? Or is this correct?

Thanks.

来源：https://stackoverflow.com/questions/65032300/workbox-web-worker-caching-and-causes-duplicate-network-calls

标签

service-worker

workbox