Error registering service-worker script with production build

Question

I'm using Workbox Webpack plugin (v4.3.1) to generate a service worker script and Workbox-Window (v4.3.1) plugin to register it.

It all works fine on dev environment (I use webpack dev server) but with the production build I'm getting the error below on the Chrome (v78) dev console:

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.

(Note: Im using a local Nginx server to test my production build)

Im using Workbox Webpack GenerateSW like this:

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

And I confirmed that, after the build, the service worker script (service-worker.js) is generated and its in the dist folder.

I am using Workbox-Window plugin to register the aforementioned service worker script:

 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()
  }

I'm guessing the problem is not related to the fact Im using Nginx to test the prod build, nor related with the url or path of the service worker script, provided to the Workbox constructor because, using ServiceWorker Web API instead of Workbox Window API, it works fine:

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

Why, under the exact same conditions, the service worker registration fails with Workbox Window API? Where does that undefined, that you can see in the error logs, come from???

* Edit * I opened an issue on Workbox GitHub repo. You can find it here.

Answer 1

I was experiencing this same issue and had my hopes up when I saw your post here. After a mild disappointment I started searching and scavenging the web for some enlightenment. Anyway, I have a setup similar to yours, where on development environments it works but on production it doesn't.

My specific setup is: Python 3 + Flask + Webpack + npm + Apache HTTPD

What I did to solve this issue was to modify the import sentence from:

import { Workbox } from 'workbox-window'

To this:

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

According to this documentation on Google's Workbox website: Workbox Advanced bundling concepts

Afterwards I was required to update my Webpack setup to bundle Babel-Polyfill so that I was able to avoid the regeneratorRuntime Errors caused by the promises and awaits functions that workbox-window uses, by installing it and including it as stated here: @babel/Polyfill or babel-polyfill depending on your setup and adding it as an entry on the module.exports config.

Hope this helps any one else who suffers this ambiguous and exhausting error.