Ошибка регистрации скрипта сервис-воркера в производственной сборке

Question

Я использую плагин Workbox Webpack (v4.3.1) для создания скрипта сервис-воркера и плагин Workbox-Window (v4.3.1) для его регистрации.

Все это отлично работает в среде разработки (я использую сервер webpack dev), но с производственной сборкой я получаю ошибку ниже в консоли разработчика Chrome (v78):

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:4321/') with script ('http://localhost:4321/undefined'): A bad HTTP response code (404) was received when fetching the script.

(Примечание: я использую локальный сервер Nginx для тестирования своей производственной сборки)

Я использую Workbox Webpack GenerateSW следующим образом:

new WorkboxPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: false
})

И я подтвердил, что после сборки создается скрипт сервис-воркера (service-worker.js), который находится в папке dist.

Я использую плагин Workbox-Window для регистрации вышеупомянутого скрипта сервис-воркера:

 import { Workbox } from 'workbox-window'

 if ('serviceWorker' in navigator) {
      const wb = new Workbox('/service-worker.js') // Note: I also tried without the bar and with path './service-worker.js' and didnt work
      wb.register()
  }

Я предполагаю, что проблема не связана с тем фактом, что я использую Nginx для тестирования сборки prod, а также не связана с URL-адресом или путем сценария работника службы, предоставленным конструктору Workbox, потому что с использованием ServiceWorker Web API вместо Workbox Window API, он отлично работает:

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/service-worker.js') // THIS WORKS!!!
}

Почему при тех же условиях регистрация сервис-воркера не выполняется с помощью Workbox Window API? Где этоundefined, что вы можете видеть в журналах ошибок, откуда???

* Изменить * Я открыл проблему с репозиторием Workbox GitHub. Вы можете найти это здесь.

Answer 1

У меня была такая же проблема, и я очень надеялся, когда увидел здесь ваш пост. После легкого разочарования я начал искать и рыскать в сети в поисках просветления. В любом случае, у меня есть установка, аналогичная вашей, где в средах разработки она работает, а в производстве - нет.

Моя конкретная настройка: Python 3 + Flask + Webpack + npm + Apache HTTPD

Для решения этой проблемы я изменил предложение импорта из:

import { Workbox } from 'workbox-window'

К этому:

import { Workbox } from 'workbox-window/Workbox.mjs';

Согласно этой документации на веб-сайте Google Workbox:Расширенные концепции комплектации Workbox

Впоследствии мне потребовалось обновить настройку моего Webpack, чтобы связать Babel-Polyfill, чтобы я мог избежать ошибок регенератора Runtime, вызванных функциями promises и awaits, которые использует окно рабочего окна, установив его и включив, как указано здесь: @ babel / Polyfill или babel-polyfill в зависимости от ваших настроек и добавление его в качестве записи в конфигурации module.exports.

Надеюсь, это поможет любому, кто страдает от этой неоднозначной и утомительной ошибки.