webpack - 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