Как подключить Service Worker вместе с webpack.mix version control в laravel?

Question

Евгений Хрипунов @fannyfan414

Как подключить Service Worker вместе с webpack.mix version control в laravel?

Имеется SPA приложение на laravel + vue.js. С помощью webpack mix приложение собирается в файл app.js и далее с помощью mix.version() высчитывается хэш для файла.

<!doctype html>
<html lang="ru">
<head>
   ...
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">   
    ...
</head>
<body id="body">
<div id="app"> 
</div>
<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
            navigator.serviceWorker.register('/service-worker.js').then(function (registration) {                
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function (err) {                
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
</script>
<script src="{{ mix('/js/app.js') }}"></script> //Тут подключается файл
</body>
</html>

Соответственно при загрузке файла идет запрос на файл вида 127.0.0.1:8000/js/app.js?id=19f8a0d604af0bbbce31
Файл webpack.mix.js:

mix.webpackConfig({
    plugins: [
        new BundleAnalyzerPlugin(),
        new SWPrecacheWebpackPlugin({
            cacheId: 'pwa',
            filename: 'service-worker.js',
            staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html,mp3}'],
            minify: true,
            stripPrefix: 'public/',
            handleFetch: true,
            dynamicUrlToDependencies: { 
                '/': ['resources/views/spa.blade.php'],                
            },
            staticFileGlobsIgnorePatterns: [/\.map$/, /mix-manifest\.json$/, /manifest\.json$/, /service-worker\.js$/],
            navigateFallback: '/',
            runtimeCaching: [
                {
                    urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
                    handler: 'cacheFirst'
                },
                {
                    urlPattern: /^https:\/\/www\.thecocktaildb\.com\/images\/media\/drink\/(\w+)\.jpg/,
                    handler: 'cacheFirst'
                }
            ],
        })
    ],
    output: {publicPath: "/", chunkFilename: "js/[name]-[hash].js"}
});

С помощью этой строки staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html,mp3}'], service worker кэширует все файлы. Однако файл app.js так и хранится с таким названием, а запрашивается через mix('/js/app.js') уже с кэшэм. Поэтому при доступе из оффлайн service worker для файла app.js не работает.
Как можно это исправить?