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

Question

Я использую Workbox 3.0 (плагин webpack) и Laravel Mix (5.6) для автоматической генерации файла ServiceWorker.

При запуске компилятора веб-пакета файл манифеста, сгенерированный 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 ({плагины: [new GenerateSW ()]});

запустите php artisan make:auth и php artisan migrate, чтобы завершить создание внешнего интерфейса Отредактируйте файл bootstrap.js в папке \ resources \ assets \ js, добавив обычный код для регистрации нового ServiceWorker run npm run dev

Скомпилированный файл предварительного кэширования-манифеста выглядит следующим образом:

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 опция webpack.

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