Workbox webpack 插件安装后未从缓存加载资源（.js）

Question

我正在尝试使用 vuejs (2.5) 为 Laravel (5.8) 中的应用程序设置 PWA。 这是我在 mix.js 中的配置：

...
mix.js('resources/js/app.js', 'public/js')
    .generateSW({
        // Define runtime caching rules.
        runtimeCaching: [{
            // Match any request that ends with .png, .jpg, .jpeg or .svg.
            urlPattern: /\.(?:png|jpg|jpeg|svg)$/,

            // Apply a cache-first strategy.
            handler: 'CacheFirst',

            options: {
                // Use a custom cache name.
                cacheName: 'images',

                // Only cache 10 images.
                expiration: {
                    maxEntries: 10,
                },
            },
        }],
        skipWaiting: true
    })
    .vue()
    .copy('node_modules/lodash/lodash.min.js', 'public/js')
    .copy('./resources/manifest.json', 'public/dist/manifest.json')
    .copy('./resources/icons', 'public/dist/')
    .extract(['vue'])
    .webpackConfig({
        output: {
            filename: '[name].js',
            chunkFilename: `[name].chunk.[contenthash:8].js`,
            path: path.join(__dirname, 'public/dist'),
            publicPath: '/dist/'
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.common.js',
                'variables': path.resolve('resources/sass/_variables.scss')
            }
        },
        plugins: [
            new webpack.ContextReplacementPlugin(
                /moment[\/\\]locale$/,
                /(en|es)$/
            ),
        ]
    })
    .options({
        processCssUrls: false,
    });
  ...

Service Worker 已正确安装，第一次加载时会缓存我的资源。

但是我进行的下一个调用（重新加载页面）不会使用该缓存并从网络重新加载资源。 然而，我正在寻找的是安装 PWA 后的快速初始加载，但这并没有发生。 我之前已经使用 Angular 和 PWA 模块完成了此操作，并且资产是从缓存加载的，如果有更改，它们会稍后更新，这使得应用程序的初始加载非常快。

有人可以帮我吗？

Answer 1

最后我最终使用workbox-cli进行此设置：

// workbox.config.js
module.exports = {
    "globDirectory": "public/",
    "globPatterns": [
        "**/*.{js,css,ico,woff2,webmanifest}",
        "**/images/icons/*",
        "**/images/*",
    ],
    // 15mb max file size
    maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
    globIgnores: [
        '**/mix-manifest.json',
        '**/js/{manifest,vendor}.js',
        '**/js/chunks/*',
    ],
    "swDest": "public/service-worker.js",
    "swSrc": "resources/sw-offline.js"
};

并在我的

npm run prod

结束时运行这个

workbox injectManifest workbox.config.js

所有功劳都归功于此存储库： https://github.com/aleksandertabor/flashcards

Answer 2

我喜欢类似的问题，但我的问题仍然锁定在“暂存区”。我确实注意到你选择了错误的选项，在安装时预缓存了那么多。这就是为什么runtimeCaching是你最初的第一选择（就像我一样），我认为问题是generateSw......该库出了问题。