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

Question

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

运行 webpack 编译器时，Workbox 为预缓存资源生成的 list 文件如下所示:

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()] });

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

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

运行npm run dev

编译后的预缓存 list 文件如下所示:

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。

杰夫·波斯尼克为我指明了正确的方向。如果我将以下行添加到 webpack.mix.js 中，编译器会生成正确的预缓存 list 文件 -

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

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

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