javascriptwebpackservice-workerworkboxworkbox-webpack-plugin

Workbox seemingly not pre-caching chunks from webpack build


I'm using Webpack to compile my site and the Workbox Webpack Plugin to compile the service worker.

Despite the manifest created by Workbox containing a link to an array of correct chunk names (with the correct hashes for that particular build), the Chrome DevTools don't seem to include the chunks in the precache list (DevTools > Application > Cache Storage).

Here is my configuration for the plugin:

new GenerateSW({
  swDest: '../service-worker.js',
  globDirectory: 'priv/static',
  globPatterns: ['**/*.{js,css,png,svg,jpg,gif,woff2}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 365, // one year
        }
      }
    },
    {
      urlPattern: /^https:\/\/logo.clearbit.com/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
      handler: 'NetworkFirst'
    }
  ]
})

There are warnings in the shell about not needing to include globDirectory and globPatterns, as Webpack already keeps track of files when its compiling. However, as per the advice here, caching of additional assets which Webpack is not aware of should be done through this configuration option. I'm not using webpack-dev-server, and I'm serving the site through the Phoenix framework.

Looking at the /service-worker.js generated from Workbox, it is importing a manifest which does contain references to the correct chunks. But they're just not being loaded into the precache in Cache Storage:

importScripts(
  "/js/precache-manifest.94f30538f0c03a9278244eabf2ce9e52.js" // This points to a manifest with the correct chunk names/hashes
);

It's probably worth noting that the Network tab in DevTools does say (ServiceWorker) in the Size column of the chunk names. But how am I to trust this when those scripts don't appear in the Cache Storage?

What's even stranger is if I remove the references to globDirectory and globPatterns, the Webpack chunk files do appear in the Cache Storage. The problem with this, though, is that I have assets that Webpack is unaware of that I want to be precached using Workbox.

Used plugin version is 4.x.x. Later versions of the plugin do not allow params globDirectory and globPatterns.


Solution

  • As per Jeff's comment on the GitHub issue, this was due to a UI confusion on ChromeDev Tools which paginates the Cache Storage Results.

    If the total number happens to be greater than 50, you'll need to use the arrows to page through entries, 50 at a time.

    Here are the aforementioned inconspicuous page buttons:

    enter image description here

    Not the best UI IMO.