关于webpack：Workbox的预缓存清单文件在Laravel Mix设置中包含无效的URL字符串

Workbox's precache manifest file contains invalid URL strings in Laravel Mix setting

我正在使用Workbox 3.0(webpack插件)和Laravel Mix(5.6)来自动生成ServiceWorker文件。

运行webpack编译器时，Workbox为预缓存资产生成的清单文件如下所示：

1
2
3
4
5
6
7
8
9
10

self.__precacheManifest = [
{
"revision":"89c25ce71806a695a25e",
"url":"//js/app.js"
},
{
"revision":"89c25ce71806a695a25e",
"url":"//css/app.css"
}
];

显然，URL字符串错误并在实际的网页上导致错误。

这是我的webpack.mix.js ：(相关部分)

1
2
3
4
5
6
7
8

const {InjectManifest} = require('workbox-webpack-plugin')
mix.webpackConfig({
plugins: [
new InjectManifest({
swSrc: './resources/assets/js/sw.js'
})
]
})

尽管此处使用InjectManifest进行预缓存以及我自己的动态缓存，但使用GenerateSW插件时也会发生同样的情况。

和我的源sw.js：

1	workbox.precaching.precacheAndRoute(self.__precacheManifest \|\| [])

任何想法如何解决这个问题？如果我手动修改precacheManifest，它可以正常工作：

1
2
3
4
5
6
7
8
9
10

self.__precacheManifest = [
{
"revision":"89c25ce71806a695a25e",
"url":"./js/app.js"
},
{
"revision":"89c25ce71806a695a25e",
"url":"./css/app.css"
}
];

重现此步骤：

创建一个新的Laravel项目：Laravel new

npm install

npm install --save-dev workbox-webpack-plugin

将这些行添加到webpack.mix.js中以为Workbox配置它：

const { GenerateSW } = require('workbox-webpack-plugin');

mix.webpackConfig({ plugins: [new GenerateSW()] });

运行php artisan make:auth和php artisan migrate来完成前端脚手架

编辑\ resources \ assets \ js文件夹中的bootstrap.js，以包含用于注册新ServiceWorker的常用代码

运行npm run dev

编译后的precache-manifest文件如下所示：

1
2
3
4
5
6
7
8
9
10

self.__precacheManifest = [
{
"revision":"b922e094256b9404e705",
"url":"//js/app.js"
},
{
"revision":"b922e094256b9404e705",
"url":"//css/app.css"
}
];