add vue.config.js. Other minor changes

Author: Karen Baney

README.md

@@ -1,4 +1,5 @@
 # vue-cli-plugin-workbox-pwa
+**ALPA**
 A Vue CLI Plugin with advanced support for workbox 6.x and Vue 3. Includes the ability to debug the service worker locally.
 
 How is this different from the vue-cli-plugin-pwa?

generator/index.js

@@ -1,43 +1,56 @@
 module.exports = (api, options, rootOptions) => {
-  api.extendPackage({
-    scripts: {
-      'pwa-build': 'vue-cli-service build --mode pwalocalserve',
-      'pwa-serve': 'npm run pwa-build && serve -s dist -l 8080'
-    },
-    dependencies: {
-      'workbox-cacheable-response': '^6.1.5',
-      'workbox-core': '^6.1.5',
-      'workbox-expiration': '^6.1.5',
-      'workbox-routing': '^6.1.5',
-      'workbox-strategies': '^6.1.5',
-      'workbox-window': '^6.1.5'
-    },
-    devDependencies: {
-      'workbox-webpack-plugin': '^6.1.5'
-    }
-  })
-
-  api.render('./template')
-
-  // Inject service worker registration into main.js/.ts
-  const importRegister = `import register from './service-worker/register-service-worker'`
-  api.onCreateComplete(() => {
-    // inject to main.js
-    const fs = require('fs')
-    const ext = api.hasPlugin('typescript') ? 'ts' : 'js'
-    const mainPath = api.resolve(`./src/main.${ext}`)
-
-    // get existing content
-    let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' })
-    const lines = contentMain.split(/\r?\n/g).reverse()
-
-    // inject import
-    const lastImportIndex = lines.findIndex(line => line.match(/^import/))
-    lines[lastImportIndex] += importRegister
-
-    // modify add to content
-    const addedContent = `register()`
-    contentMain = lines.reverse().join(`\n${addedContent}\n`)
-    fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' })
-  })
+  if (options.workboxPwa) {
+    api.extendPackage({
+      scripts: {
+        'pwa-build': 'vue-cli-service build --mode pwalocalserve',
+        'pwa-serve': 'npm run pwa-build && serve -s dist -l 8080'
+      },
+      dependencies: {
+        'workbox-cacheable-response': '^6.1.5',
+        'workbox-core': '^6.1.5',
+        'workbox-expiration': '^6.1.5',
+        'workbox-routing': '^6.1.5',
+        'workbox-strategies': '^6.1.5',
+        'workbox-window': '^6.1.5'
+      },
+      devDependencies: {
+        'workbox-webpack-plugin': '^6.1.5'
+      }
+    })
+
+    api.render('./template', {
+      ...options,
+    })
+
+    // Inject service worker registration into main.js/.ts
+    const importRegister = `\nimport register from './service-worker/register-service-worker'`
+    api.onCreateComplete(() => {
+      // inject to main.js
+      const fs = require('fs')
+      const ext = api.hasPlugin('typescript') ? 'ts' : 'js'
+      const mainPath = api.resolve(`./src/main.${ext}`)
+
+      // get existing content
+      let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' })
+
+      // modify add to content
+      let addedContent = '\nregister()\n'
+      addedContent += `\nif (process.env.NODE_ENV === 'development' || process.env.VUE_APP_PWA_LOCAL_SERVE === 'true') {`
+      addedContent += '\n  console.log(`PWA Local Serve: ${process.env.VUE_APP_PWA_LOCAL_SERVE}`) // eslint-disable no-console'
+      addedContent += '\n  console.log(`Node Env: ${process.env.NODE_ENV}`) // eslint-disable no-console'
+      addedContent += '\n}\n'
+
+      contentMain += addedContent
+
+      const lines = contentMain.split(/\r?\n/g).reverse()
+
+      // inject import
+      const lastImportIndex = lines.findIndex(line => line.match(/^import/))
+      lines[lastImportIndex] += importRegister
+
+      // rebuild content
+      contentMain = lines.reverse().join(`\n`)
+      fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' })
+    })
+  }
 }

generator/template/_env

@@ -1,7 +1 @@
----
-extend: '@vue/cli-service/generator/template/_env'
----
-
-<%# REPLACE %>
 VUE_APP_PWA_LOCAL_SERVE=false
-<%# END_REPLACE %>

generator/template/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+    pwa: {
+      name: 'KB Coder PWA App',
+      shorName: 'KB Coder',
+      themeColor: '#400080',
+      msTileColor: '#800080',
+      manifestOptions: {
+        start_url: '/'
+      },
+      workboxPluginMode: 'InjectManifest',
+      workboxOptions: {
+        swSrc: './src/service-worker/sw.js',
+        swDest: 'service-worker.js'
+      }
+    }
+  }

generator/template/vue.config.js

@@ -35,11 +35,11 @@ module.exports = (api, options) => {
         .after('html')
 
     webpackConfig
-        .plugin('html')
-        .tap(args => {
-          args[0].title = userOptions.name // Add title to the app bar when installed as PWA.
-          return args
-        })
+      .plugin('html')
+      .tap(args => {
+        args[0].title = userOptions.name // Add title to the app bar when installed as PWA.
+        return args
+      })
 
     // generate /service-worker.js in production mode or pwalocalserve
     // Workbox requires NODE_ENV='development' to show debugging statements for the service worker, so

index.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-workbox-pwa",
-  "version": "1.0.0",
+  "version": "0.0.1-alpha",
   "description": "vue-cli plugin for Workbox and Vue 3",
   "repository": {
     "type": "git",