Workbox的precache清单文件在Laravel设置中包含无效的URL字符串

Question

我使用Workbox3.0 (webpack-plugin)和Laravel (5.6)自动生成ServiceWorker文件。

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

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以将其配置为工作框：

const { GenerateSW }=需要量(‘工作箱-webpack-插件’)； mix.webpackConfig({ plugins: new GenerateSW() })；

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

编译后的precache清单文件如下所示：

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

Answer 1

我找到了解决办法：

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

杰夫·波斯尼克把我引向了正确的方向。如果我将以下行添加到webpack.mix.js中，编译器将生成一个正确的预缓存清单文件-

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

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

但是，如果需要为publicPath选项提供实际路径，则此解决方案将失败。参见这里的bug报告：https://github.com/GoogleChrome/workbox/issues/1534