Workbox的预缓存清单文件在Laravel Mix设置中包含无效的URL字符串 [英] Workbox's precache manifest file contains invalid URL strings in Laravel Mix setting

问题描述

我正在使用 Workbox 3.0 (Webpack插件)和 Laravel Mix (5.6)自动生成ServiceWorker文件.

I'm using Workbox 3.0 (webpack-plugin) and Laravel Mix (5.6) to auto-generate a ServiceWorker file.

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

When running the webpack compiler, the manifest file generated by Workbox for pre-cached assets looks like this:

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

很明显，URL字符串错误并在实际的网页上导致错误.

Obviously, the URL strings are wrong and cause errors on the actual web page.

这是我的 webpack.mix.js :(相关部分)

Here is my webpack.mix.js: (relevant parts)

const {InjectManifest} = require('workbox-webpack-plugin')
mix.webpackConfig({
  plugins: [
    new InjectManifest({
      swSrc: './resources/assets/js/sw.js'
    })
  ]
})

此处使用 InjectManifest 进行预缓存以及我自己的动态缓存，而使用 GenerateSW 插件时也会发生同样的情况.

While InjectManifest is used here to have precaching as well as my own dynamic caching, the same happens when using the GenerateSW plugin instead.

和我的来源 sw.js :

workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

有什么办法解决这个问题吗?如果我手动修改 precacheManifest ，它会正常工作:

Any idea how to solve this? If I manually modify the precacheManifest, it works fine:

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');

const { GenerateSW } = require('workbox-webpack-plugin');

mix.webpackConfig({插件:[new GenerateSW()]});

mix.webpackConfig({ plugins: [new GenerateSW()] });

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

1. run php artisan make:auth and php artisan migrate to complete the frontend scaffolding
2. Edit bootstrap.js in the \resources\assets\js folder to include the usual code to register the new ServiceWorker
3. run npm run dev

已编译的precache-manifest文件如下所示:

The compiled precache-manifest file looks like this:

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

推荐答案

我找到了解决方法:

由于Laravel使用"Laravel Mix" API来配置和运行WebPack，因此配置WebPack的方法是修改文件 webpack.mix.js .

As Laravel is using the "Laravel Mix" API to configure and run WebPack, the way to configure WebPack is to modify the file webpack.mix.js.

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

Jeff Posnick pointed me into the right direction. If I add the following lines into webpack.mix.js, the compiler produces a correct precache manifest file -

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

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

The solution is to provide simply an empty string for the output.publicPath configuration option of webpack.

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

However, if you need to provide an actual path for the publicPath option, this workaround will fail. See bug report here: https://github.com/GoogleChrome/workbox/issues/1534

这篇关于Workbox的预缓存清单文件在Laravel Mix设置中包含无效的URL字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！