Как избежать вызова устаревших чанков с помощью webpack и workbox?

Question

Я пытаюсь понять работников сферы обслуживания, используя Workbox и Webpack.

Я настроил свою конфигурацию webpack для использования чанков с чанхэшами в качестве имен.Я также настроил Workbox для генерации SW для меня.Однако проблема заключается в том, что каждый раз, когда я перестраиваю свое приложение и публикую его, когда пользователь вызывает измененный фрагмент, он получает загрузчик смерти и ничего не загружается.Я использую CleanWebpackPlugin для очистки моей папки dist перед каждой сборкой.

Я полагаю, это потому, что SW по-прежнему вызывает старый чанк со старым хэш-именем, и его больше нет.Когда я закрываю приложение и перезагружаю его с нуля, оно волшебным образом работает.

Я понимаю, что у SW есть такая "задержка" в их логике, и она будет работать при следующей загрузке.Но мне нужно разобраться с тем, что старого хеш-блока как-то не было.

1. Должен ли я хранить старые, устаревшие куски?Если да, то есть ли способ использовать метку времени вместо имени чанхэша, чтобы я знал, какие из них были обновлены, и могу удалить старые через определенное время?Тем не менее, я не уверен, решит ли это проблему пользователя.
2. Если я вообще не буду использовать имена chunkhash?
3. Есть ли способ заставить работника службы проверять наличие обновлений перед вызовомкусок?Если есть обновление, используйте это, иначе используйте кэшированное?Это слишком сильно меня затормозит?
4. Наконец, есть ли способ сообщить пользователю "доступна новая версия".Я действительно не хочу этого делать, потому что это будет раздражать, так как я в первые дни и часто публикую.

Я публикую здесь свои соответствующие части веб-пакета:

module.exports = {
  entry: {
      app: './src/index.js'
  },
  output: {
      filename: '[name].[chunkhash:4].js',
      chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
      path: path.resolve(__dirname, 'dist'),  //where to put the bundles
      publicPath: "/" // This is used to generate URLs to e.g. images
        },

...

plugins: [
    new CleanWebpackPlugin(['dist']),
    new CopyWebpackPlugin([ { from: __dirname + '/public', to: __dirname + '/dist/public' } ]),
    new MiniCssExtractPlugin({filename: "[name].css"}),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
       "template": "./src/template.html",
       "filename": "index.html",
       "hash": false,
       "inject": true,
       "compile": true,
       "favicon": false,
       "minify": true,
       "cache": true,
       "showErrors": true,
       "chunks": "all",
       "excludeChunks": [],
       "title": "ShareWalks",
       "xhtml": true,
       "chunksSortMode": 'none' //fixes bug
       })
   ]

Часть рабочего ящика:

 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
   plugins: [
          new WorkboxPlugin.GenerateSW({ 
          // these options encourage the ServiceWorkers to get in there fast     
           // and not allow any straggling "old" SWs to hang around     
           clientsClaim: true,     
           skipWaiting: true
      }),
   ]
});