StaleWhileRevalidate do not make the second call to update the Service Worker

Library Affected: workbox-webpack-plugin

Browser & Platform: “all browsers”.

Issue or Feature Request Description: I am using Next Offline library for this site. I set this configuration:

workboxOpts: {
                  swDest: '../public/service-worker.js',
                  maximumFileSizeToCacheInBytes: 20000000,
                  runtimeCaching: [
                    {
                      urlPattern: /https:\/\/fonts\.googleapis\.com\/icon[\w\-_\/\.\:\?\=\&\+]*/,
                      handler: 'CacheFirst',
                      options: {
                        cacheName: 'google-fonts',
                        expiration: {
                          maxEntries: 10,
                          maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
                        },
                      },
                    },
                    {
                      urlPattern: /^((?!tracker).)*\.(jpeg|png|jpg|ico|svg)\??.*/,
                      handler: 'CacheFirst',
                      options: {
                        cacheName: 'img-cache',
                        expiration: {
                          maxEntries: 15,
                          maxAgeSeconds: 2 * 24 * 60 * 60, // 2 days
                        },
                      },
                    },
                    {
                      urlPattern: /https:\/\/embed.widencdn.net\/img\/cityfurniture.*.(jpeg|png|jpg)\?.*/,
                      handler: 'StaleWhileRevalidate',
                    },
                    {
                      urlPattern: /https:\/\/auth-cityfurniture.dotcmscloud.com\/(dA|contentAsset\/image)[\w\-_\/\.\:\?\=\&\+]*/,
                      handler: 'StaleWhileRevalidate',
                    },
                    {
                      urlPattern: /^((?!monetate).)*\.(js)$/,
                      handler: 'StaleWhileRevalidate',
                    },
                  ],
                },

As the js files are configured with the strategy Stale While Revalidate, when I went to the network tab in the Developers tools I was hoping to see two requests for the files cached in the Service Worker (SW), one for the SW request and one for the update of the data on the SW. But I am seeing just one request for the SW JS files. Am I understanding this wrong? It should do another call to revalidate the content of the SW, right?

[jeffposnick]

After investigating a bit more, the reason you’re not seeing revalidation revalidation requests for those URLs is that they’re precached, and therefore the runtime caching strategy doesn’t apply to them. You can verify this by looking at the precache manifest in your service worker:

{
    url: "_next/static/chunks/commons.98875a76810ab7396f70.js",
    revision: "c81835a6270f5f4fdbd3aa185a230a52"
},

Precached URLs will be updated automatically “in the background” when the manifest information for them changes. They don’t need to be revalidated at runtime,

[davidpaley]

Thank you so much @jeffposnick! You are totally right! And thank you for the blog post, really interesting 😃