feat: Use the Workbox webpack plugin in pwa template (#769)

* feat: Use the Workbox webpack plugin in pwa template * feat: Added pwa template configuration docs.
vuejs · Feb 6, 2018 · 9095483 · 9095483
1 parent 67df3eb
commit 9095483
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 11 deletions.
diff --git 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...
+    },
+  },
+};
+```
diff --git 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 <head>
     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
@@ -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"