fix($plugin-pwa): popup component does not work (close #2172) (#2187)

Author: meteorlxy

packages/@vuepress/plugin-pwa/index.js

@@ -1,38 +1,30 @@
 const { logger, fs, path } = require('@vuepress/shared-utils')
 
-module.exports = (options, context) => ({
-  ready () {
-    options = Object.assign({
-      serviceWorker: true,
-      popupComponent: 'SWUpdatePopup'
-    }, options)
-  },
-
+module.exports = ({
+  serviceWorker = true,
+  updatePopup = false,
+  popupComponent = 'SWUpdatePopup',
+  generateSWConfig = {}
+}, context) => ({
   alias: {
     '@sw-event': path.resolve(__dirname, 'lib/event.js')
   },
 
   define () {
-    const { serviceWorker, updatePopup } = options
     const base = context.base || '/'
     return {
       SW_BASE_URL: base,
       SW_ENABLED: !!serviceWorker,
-      SW_UPDATE_POPUP: updatePopup || false
+      SW_UPDATE_POPUP: updatePopup,
+      SW_POPUP_COMPONENT: popupComponent
     }
   },
 
-  // TODO support components option
-  // components: [
-  //   { name: 'SWUpdatePopup', path: path.resolve(__dirname, 'lib/SWUpdatePopup.vue') }
-  // ],
-
-  globalUIComponents: options.updatePopup ? options.popupComponent : undefined,
+  globalUIComponents: updatePopup ? popupComponent : undefined,
 
   enhanceAppFiles: path.resolve(__dirname, 'lib/enhanceAppFile.js'),
 
   async generated () {
-    const { serviceWorker } = options
     const { outDir } = context
     const swFilePath = path.resolve(outDir, 'service-worker.js')
     if (serviceWorker) {
@@ -42,7 +34,7 @@ module.exports = (options, context) => ({
         swDest: swFilePath,
         globDirectory: outDir,
         globPatterns: ['**\/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}'],
-        ...(options.generateSWConfig || {})
+        ...generateSWConfig
       })
       await fs.writeFile(
         swFilePath,

packages/@vuepress/plugin-pwa/lib/enhanceAppFile.js

@@ -1,11 +1,11 @@
-/* global SW_BASE_URL, SW_ENABLED, GA_ID, ga, SW_UPDATE_POPUP */
+/* global SW_BASE_URL, SW_ENABLED, GA_ID, ga, SW_UPDATE_POPUP, SW_POPUP_COMPONENT */
 
 import Vue from 'vue'
 import { register } from 'register-service-worker'
 import SWUpdateEvent from './SWUpdateEvent'
 import event from './event'
 
-if (SW_UPDATE_POPUP) {
+if (SW_UPDATE_POPUP && SW_POPUP_COMPONENT === 'SWUpdatePopup') {
   // eslint-disable-next-line vue/match-component-file-name
   Vue.component('SWUpdatePopup', () => import('./SWUpdatePopup.vue'))
 }