Workbox 似乎没有从 webpack 构建中预先缓存块 [英] Workbox seemingly not pre-caching chunks from webpack build

问题描述

我正在使用 Webpack 编译我的网站和

不是最好的 UI IMO.

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.

解决方案

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:

Not the best UI IMO.

这篇关于Workbox 似乎没有从 webpack 构建中预先缓存块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！