Workbox webpack plugin is not loading assets (.js) from cache after installed

Question

I am trying to set up a PWA for an app in Laravel (5.8) with vuejs (2.5). This is the configuration I have in 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,
    });
  ...

The service worker was installed correctly and the first time it loads it caches my assets.

But the next calls I make (reload the page) don't use that cache and reload the assets from the network. However, what I am looking for is a quick initial load after the PWA is installed and this is not happening. I have done this before with Angular and the PWA module and the assets are loaded from cache, and if there are changes, they are updated later, which makes the initial load of the application very fast.

Can someone help me with this?

Answer 1

In the end I ended up using workbox-cli with this setup:

// 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"
};

And running this at the end of my npm run prod

workbox injectManifest workbox.config.js

All credit to this repository: https://github.com/aleksandertabor/flashcards