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（＆＃39; workbox-webpack-plugin＆＃39;）;

mix.webpackConfig（{plugins：[new GenerateSW（）]}）;

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

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

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

Answer 1

我找到了解决方案：

Laravel正在使用＆＃34; Laravel Mix＆＃34;用于配置和运行WebPack的API，配置WebPack的方法是修改文件webpack.mix.js。

杰夫波斯尼克指出我正确的方向。如果我将以下行添加到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 Mix设置

1 个答案: