From 83e249ba7aa3eccf7779ffc90f33115f0386873c Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Fri, 2 Feb 2018 16:52:31 -0800 Subject: [PATCH 1/2] feat: Use the Workbox webpack plugin in pwa template --- packages/@vue/cli-plugin-pwa/index.js | 34 ++++++++++++++++------- packages/@vue/cli-plugin-pwa/package.json | 2 +- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/@vue/cli-plugin-pwa/index.js b/packages/@vue/cli-plugin-pwa/index.js index 0000068969..8f4a6e55f8 100644 --- a/packages/@vue/cli-plugin-pwa/index.js +++ b/packages/@vue/cli-plugin-pwa/index.js @@ -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 webpackConfig .plugin('pwa') .use(require('./lib/HtmlPwaPlugin'), [Object.assign({ name - }, options.pwa)]) + }, userOptions)]) // generate /service-worker.js in production mode if (process.env.NODE_ENV === 'production') { - webpackConfig - .plugin('sw-precache') - .use(require('sw-precache-webpack-plugin'), [{ - cacheId: name, - filename: 'service-worker.js', - staticFileGlobs: [`${options.outputDir}/**/*.{js,html,css}`], - minify: true, - stripPrefix: `${options.outputDir}/` - }]) + // 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. ` + + `Valid modes are: ${Object.keys(workboxWebpackModule).join(', ')}`) + } } }) diff --git a/packages/@vue/cli-plugin-pwa/package.json b/packages/@vue/cli-plugin-pwa/package.json index e35daa9d22..b353635b2e 100644 --- a/packages/@vue/cli-plugin-pwa/package.json +++ b/packages/@vue/cli-plugin-pwa/package.json @@ -22,7 +22,7 @@ "access": "public" }, "dependencies": { - "sw-precache-webpack-plugin": "^0.11.4" + "workbox-webpack-plugin": "3.0.0-beta.0" }, "devDependencies": { "register-service-worker": "^1.0.0" From 6e279ac10cf30e487a56dc3dfefa10d682d7690e Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Tue, 6 Feb 2018 14:39:28 -0500 Subject: [PATCH 2/2] feat: Added pwa template configuration docs. --- packages/@vue/cli-plugin-pwa/README.md | 44 ++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/packages/@vue/cli-plugin-pwa/README.md b/packages/@vue/cli-plugin-pwa/README.md index 4611771a15..3f2707e756 100644 --- a/packages/@vue/cli-plugin-pwa/README.md +++ b/packages/@vue/cli-plugin-pwa/README.md @@ -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... + }, + }, +}; +```