@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 forInjectManifest
. -
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 editpublic/manifest.json
to match this.
-
-
pwa.themeColor
- Default:
'#4DBA87'
- Default:
-
pwa.msTileColor
- Default:
'#000000'
- Default:
-
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'
- Default:
-
pwa.assetsVersion
-
Default:
''
This option is used if you need to add a version to your incons 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.
-
-
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.
-
Example Configuration
// 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...
}
}
}
Installing in an Already Created Project
vue add @vue/pwa
Injected webpack-chain Rules
config.plugin('workbox')