Workbox 的预缓存清单文件在 Laravel 混合设置中包含无效的 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"
  }
];

重现步骤：

创建一个新的 Laravel 项目：Laravel new <proj_name>
cd <proj_name>
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

编译后的预缓存清单文件如下所示：

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

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

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

webpack

laravel-mix

workbox

workbox-webpack-plugin