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

Question

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

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

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

很明显，URL 字符串是错误的，导致实际网页出错。

这是我的webpack.mix.js：（相关部分）

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

虽然这里使用 InjectManifest 进行预缓存以及我自己的动态缓存，但在使用 GenerateSW 插件时也会发生同样的情况。

和我的来源sw.js：

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

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

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

重现此问题的步骤：

1. 创建一个新的 Laravel 项目：Laravel new <proj_name>
2. cd <proj_name>
3. npm install
4. npm install --save-dev workbox-webpack-plugin
5. 将这些行添加到 webpack.mix.js 以将其配置为 Workbox：

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

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

6. 运行php artisan make:auth和php artisan migrate完成前端脚手架
7. 编辑 \resources\assets\js 文件夹中的 bootstrap.js 以包含注册新 ServiceWorker 的常用代码
8. 运行npm run dev

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

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

Answer 1

我找到了解决办法：

由于Laravel使用“Laravel Mix”API来配置和运行WebPack，所以配置WebPack的方法是修改webpack.mix.js文件。

Jeff Posnick 为我指明了正确的方向。如果我将以下行添加到 webpack.mix.js 中，编译器会生成正确的预缓存清单文件 -

const { GenerateSW } = require('workbox-webpack-plugin');
mix.webpackConfig({
  plugins: [new GenerateSW()],
  output: {
    publicPath: ''
  }
});

解决方案是为 webpack 的 output.publicPath 配置选项提供一个空字符串。

但是，如果您需要为 publicPath 选项提供实际路径，此解决方法将失败。在此处查看错误报告：https://github.com/GoogleChrome/workbox/issues/1534