Javascript webpush重新加载页面时服务工作者不需要的注销

我正在一个网站上实现推送通知，我已经能够成功订阅推送通知并接收它们

问题是当我重新加载页面时，我的服务人员每次都会注销并重新注册。每次注销时，PushManager也会关闭订阅，因此它不再侦听通知。我希望它避免注销，如果它已经注册

我不明白为什么它会有这种行为，被困了很长时间

我将Vue.js与pwa一起使用，并添加了一个具有缓存破坏功能的服务工作者

这是来自的输出chrome://gcm-internals :

来自chrome inspect元件的输出。重新加载时：

service-worker.js：

workbox.core.setCacheNameDetails({ prefix: 'd4' })
//Change this value every time before you build
const LATEST_VERSION = 'v1.1.1.10'
self.addEventListener('activate', event => {
  console.log(`%c ${LATEST_VERSION} `, 'background: #ddd; color: #0000ff')

  if (caches) {
    caches.keys().then(arr => {
      arr.forEach(key => {
        if (key.indexOf('d4-precache') < -1) {
          caches
            .delete(key)
            .then(() =>
              console.log(
                `%c Cleared ${key}`,
                'background: #333; color: #ff0000'
              )
            )
        } else {
          caches.open(key).then(cache => {
            cache.match('version').then(res => {
              if (!res) {
                cache.put(
                  'version',
                  new Response(LATEST_VERSION, {
                    status: 200,
                    statusText: LATEST_VERSION
                  })
                )
              } else if (res.statusText !== LATEST_VERSION) {
                caches
                  .delete(key)
                  .then(() =>
                    console.log(
                      `%c Cleared Cache ${LATEST_VERSION}`,
                      'background: #333; color: #ff0000'
                    )
                  )
              } else
                console.log(
                  `%c Great you have the latest version ${LATEST_VERSION}`,
                  'background: #333; color: #00ff00'
                )
            })
          })
        }
      })
    })
  }

  self.addEventListener('push', event => {
    const { title, options } = event.data.json()
    console.log('Push Received...', title, options)
    /*const notif =
      .catch(err => {
        console.error('error showing notification', err)
      })*/
    event.waitUntil(self.registration.showNotification(title, options))
  })

  self.addEventListener('notificationclick', function(event) {
    event.notification.close()
    event.waitUntil(clients.openWindow(event.notification.data.url))
  })
})

workbox.skipWaiting()
workbox.clientsClaim()

self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

webpack.config.js module.exports.plugins，只是与服务人员相关的部分：

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

module.exports.plugins = [
new SWPrecacheWebpackPlugin({
      cacheId: 'my-pwa-vue-app',
      filename: 'service-worker-cache.js',
      staticFileGlobs: ['dist/**/*.{js,css}', '/'],
      minify: true,
      stripPrefix: 'dist/',
      dontCacheBustUrlsMatching: /\.\w{6}\./
    })
]

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

module.exports.plugins = [
new SWPrecacheWebpackPlugin({
      cacheId: 'my-pwa-vue-app',
      filename: 'service-worker-cache.js',
      staticFileGlobs: ['dist/**/*.{js,css}', '/'],
      minify: true,
      stripPrefix: 'dist/',
      dontCacheBustUrlsMatching: /\.\w{6}\./
    })
]