Disable PWA plugin in Vue CLI 3

Question

I'm having some issues with caching my files using the default service worker that comes with VueCLI 3. I would prefer to just use the default browser caching mechanism, but can't seem to disable the PWA plugin as its not in the vue.config.js file. Passing a blank object to the pwa option doesn't work either as the object is merged and not overwritten.

Gooch

Answer 1

I resolved this by doing the following:

1. Removing the registerServiceWorker.js file
2. removing the import of registerServiceWorker.js from main.js.
3. removing the PWA plugin from the devDependencies in package.json.

Gooch

I found that I also had to remove the manifest.json file, usually located in the /public directory. – Stagner

Hello, after following this three step, the service worker cache just won't go away, any hint on how to blow that away on the client side? – Extort

and remove register-service-worker in package.json dependencies – Popedom

Answer 2

Vue enabled a method to disable pwa for certain builds in version 4. Now you can add --skip-plugins pluginname during your build. This one worked for me just fine:

 npx vue-cli-service build --skip-plugins pwa,workbox

Ref: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins

Gummite

Answer 3

There is an open but accepted proposal to add this to the core functionality: https://github.com/vuejs/vue-cli/issues/3830

EDIT:

Via command line: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins

npx vue-cli-service build --skip-plugins pwa,workbox

Via vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('pwa');
    config.plugins.delete('workbox');
  }
}

Lawyer