@vue/cli-plugin-pwa not creating service-worker.js

Question

So i have a pre existing Vue application and want to add PWA. I installed @vue/cli-plugin-pwa and after the first build my registerServiceWorker.js (in src) and manifest.json (in public) was automatically created and seems to be working fine. But from my understanding it should also generate a services-worker.js in my dist folder after i run npm run build. If i upload the build files to a server i am getting

A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
Error during service worker registration: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

This also happens if i create a custom service-worker.js

How I added a custom service-worker.js

1: Created service-worker.js in src folder

// service-worker.js
console.log('Service Worker Registered!')

2: Created vue.config.js in ~/

// vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: './src/service-worker.js',
      // ...other Workbox options...
    }
  }
}

If i run npm build with the custom service-worker.js it still does not create a service-worker.js in my dist folder and get the same errors when uploading to a server. The server is a https enabled server. am i missing something or misunderstanding it? thanks in advance.

Edit: I also get the same error if i manually add a service-worker.js file in my dist folder

registerServiceWorker.js

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

Answer 1

I had very similar problems many times. Looks like it's something on plugin side especially when you use custom sw name or custom sw at all.

What i can recommend - instead of using a plugin (which is using workbox). use workbox directly. It's a 3command setup.

npm install -g workbox-cli

Then in your project

workbox wizard

Answer questions and this will generate a workbox.config.js.

Then just paste the same code you have from plugin for registration and on build process type

workbox generateSW workbox-config.js

This worked for me. Below is a nice tutorial explaining this process more in-depth

https://medium.com/google-developer-experts/a-5-minute-intro-to-workbox-3-0-156803952b3e