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