vue-cli/packages/@vue/cli-plugin-pwa

@vue/cli-plugin-pwa

pwa plugin for vue-cli

Configuration

Configuration is handled via the pwa property of either the vue.config.js file, or the "vue" field in package.json.

• pwa.workboxPluginMode

  This allows you to the choose between the two modes supported by the underlying workbox-webpack-plugin.

  • 'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app.

  • 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.

  The "Which Plugin to Use?" guide can help you choose between the two modes.

• pwa.workboxOptions

  These options are passed on through to the underlying workbox-webpack-plugin.

  For more information on what values are supported, please see the guide for GenerateSW or for InjectManifest.

Example Configuration

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    },
  },
};

Installing in an Already Created Project

npm install -D @vue/cli-plugin-pwa
vue invoke pwa

Injected webpack-chain Rules

• config.plugin('workbox')