feat: Use the Workbox webpack plugin in pwa template #769
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,47 @@ | ||
| # @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`](https://developers.google.com/web/tools/workbox/modules/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?](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#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`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) | ||
| or for [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config). | ||
|
|
||
| ### Example Configuration | ||
|
|
||
| ```js | ||
| // 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... | ||
| }, | ||
| }, | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,25 +2,39 @@ module.exports = (api, options) => { | |
| api.chainWebpack(webpackConfig => { | ||
| const name = api.service.pkg.name | ||
|
|
||
| const userOptions = options.pwa || {} | ||
|
|
||
| // the pwa plugin hooks on to html-webpack-plugin | ||
| // and injects icons, manifest links & other PWA related tags into <head> | ||
| webpackConfig | ||
| .plugin('pwa') | ||
| .use(require('./lib/HtmlPwaPlugin'), [Object.assign({ | ||
| name | ||
| }, userOptions)]) | ||
|
|
||
| // generate /service-worker.js in production mode | ||
| if (process.env.NODE_ENV === 'production') { | ||
| // Default to GenerateSW mode, though InjectManifest also might be used. | ||
| const workboxPluginMode = userOptions.workboxPluginMode || 'GenerateSW' | ||
| const workboxWebpackModule = require('workbox-webpack-plugin') | ||
| if (workboxPluginMode in workboxWebpackModule) { | ||
| const workBoxConfig = Object.assign({ | ||
| cacheId: name, | ||
| exclude: [ | ||
| new RegExp('\.map$'), | ||
| new RegExp('img/icons/'), | ||
| new RegExp('favicon\.ico$'), | ||
| new RegExp('manifest\.json$') | ||
| ] | ||
| }, userOptions.workboxOptions) | ||
|
|
||
| webpackConfig | ||
| .plugin('workbox') | ||
| .use(workboxWebpackModule[workboxPluginMode], [workBoxConfig]) | ||
| } else { | ||
| throw new Error(`${workboxPluginMode} is not a supported Workbox webpack plugin mode. ` + | ||
|
There was a problem hiding this comment. I wasn't sure what the philosophy was around misconfiguration. If there's something that should be done here other than throwing an There was a problem hiding this comment. Since this is a built-in plugin, you can add it the user options validation schema here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/options.js#L3-L35 But throwing an error is also fine. There was a problem hiding this comment. I ❤️ |
||
| `Valid modes are: ${Object.keys(workboxWebpackModule).join(', ')}`) | ||
| } | ||
| } | ||
| }) | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like the default exclude is
[/\.map$/, /^manifest.*\.js(?:on)?$/]- any reason to exclude the icons and favicon as well?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The request that a browser makes for either a registered favicon or for the home screen icon bypasses the service worker, so there's no benefit from caching them.