Файл предварительного кэша рабочего кэша содержит недопустимые строки URL в настройках Laravel Mix

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. Отредактируйте файл bootstrap.js в папке \resources\assets\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 использует API "Laravel Mix" для настройки и запуска WebPack, способ настроить WebPack - изменить файл. webpack.mix.js,

Джефф Посник указал мне правильное направление. Если я добавлю следующие строки в webpack.mix.jsкомпилятор создает правильный файл манифеста для предварительного кеширования -

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

Решение состоит в том, чтобы просто предоставить пустую строку для опции конфигурации output.publicPath веб-пакета.

Однако если вам нужно указать фактический путь для параметра publicPath, этот обходной путь завершится неудачей. Смотрите отчет об ошибках здесь: https://github.com/GoogleChrome/workbox/issues/1534