Vue CLI Plugin for Adding PWA Features

pwa plugin for vue-cli

How to Configure the Plugin?

You need to add the pwa property in either the vue.config.js file, or the "vue" field in package.json with the following attributes:

• pwa.workboxPluginMode

  This allows you to 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.

• pwa.name

  • Default: "name" field in package.json

    Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.

• pwa.themeColor

  • Default: '#4DBA87'

• pwa.msTileColor

  • Default: '#000000'

• pwa.appleMobileWebAppCapable

  • Default: 'no'

    This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details.

• pwa.appleMobileWebAppStatusBarStyle

  • Default: 'default'

• pwa.assetsVersion

  • Default: ''

    This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest.

• pwa.manifestPath

  • Default: 'manifest.json'

    The path of app’s manifest. If the path is an URL, the plugin won't generate a manifest.json in the dist directory during the build.

• pwa.manifestOptions

  • Default: {}

    The object will be used to generate the manifest.json

    If the following attributes are not defined in the object, the options of pwa or default options will be used instead.

    • name: pwa.name
    • short_name: pwa.name
    • start_url: '.'
    • display: 'standalone'
    • theme_color: pwa.themeColor

• pwa.manifestCrossorigin

  • Default: undefined

    Value for crossorigin attribute in manifest link tag in the generated HTML. You may need to set this if your PWA is behind an authenticated proxy. See cross-origin values for more details.

• pwa.iconPaths

  • Defaults:

    {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/msapplication-icon-144x144.png'
    }

    Change these values to use different paths for your icons. As of v4.3.0, you can use null as a value and that icon will not be included.

Example

// Inside 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: 'dev/sw.js',
      // ...other Workbox options...
    }
  }
}

How to Install it in a Project?

Simply run the following commad from the root of your project's directory:

$ vue add pwa