Vue 3 PWA 项目如何调用 registerServiceWorker 生命周期的自定义函数

方案1：直接替换回调逻辑（简单场景） #

你可以直接在现有注册配置的对应生命周期钩子中，将原来的console日志替换为你需要的自定义函数，比如触发UI提示、埋点上报、执行缓存清理等操作，参考示例代码如下：

import { register } from 'register-service-worker'
// 按需引入你需要的工具、UI组件
import { ElNotification } from 'element-plus'
import { trackServiceWorkerEvent, forceRefreshApp } from '@/utils/common'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      // 替换为你的自定义逻辑，例：埋点上报
      trackServiceWorkerEvent('sw_ready')
    },
    registered () {
      trackServiceWorkerEvent('sw_registered')
    },
    cached () {
      trackServiceWorkerEvent('sw_cached_success')
    },
    updatefound () {
      // 例：显示新版本下载中提示
      ElNotification.info({
        title: '更新提示',
        message: '新版本正在后台下载，请稍候'
      })
      trackServiceWorkerEvent('sw_new_version_found')
    },
    updated () {
      // 例：下载完成后提示用户点击刷新
      ElNotification({
        title: '更新完成',
        message: '新版本已准备就绪，点击立即刷新使用',
        duration: 0,
        onClick: () => forceRefreshApp()
      })
      trackServiceWorkerEvent('sw_new_version_ready')
    },
    offline () {
      ElNotification.warning({
        title: '网络异常',
        message: '当前无网络连接，已进入离线运行模式'
      })
      trackServiceWorkerEvent('sw_offline_mode')
    },
    error (error) {
      trackServiceWorkerEvent('sw_register_error', error)
      console.error('Service worker 注册失败:', error)
    }
  })
}

方案2：跨组件共享SW状态（复杂场景） #

如果你需要在多个Vue组件中监听Service Worker的状态变化，可以配合全局状态管理托管事件，以下是Pinia的实现示例：

1. 先创建全局状态文件src/stores/swStatus.js：

import { defineStore } from 'pinia'
export const useSWStatusStore = defineStore('swStatus', {
  state: () => ({
    hasNewVersion: false,
    isOffline: false,
    registerError: null
  }),
  actions: {
    updateHasNewVersion(val) {
      this.hasNewVersion = val
    },
    updateOfflineStatus(val) {
      this.isOffline = val
    },
    saveRegisterError(err) {
      this.registerError = err
    }
  }
})

2. 在registerServiceWorkers.js中引入状态并在对应钩子更新：

import { register } from 'register-service-worker'
import { useSWStatusStore } from '@/stores/swStatus'
// 引入全局Pinia实例（需要在main.js中导出pinia实例）
import { pinia } from '@/main'

const getSWStore = () => {
  return useSWStatusStore(pinia)
}

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated() {
      getSWStore().updateHasNewVersion(true)
    },
    offline() {
      getSWStore().updateOfflineStatus(true)
    },
    error(err) {
      getSWStore().saveRegisterError(err)
    }
  })
}

之后你可以在任意Vue组件中直接读取该状态，自定义对应的UI交互逻辑。

注意事项 #

• 如果你需要实现静默更新，不需要用户手动触发刷新，可以在updated钩子中直接调用location.reload(true)强制跳过缓存刷新，但不推荐该操作，可能会打断用户正在进行的操作
• Service Worker默认仅在页面首次加载时检测更新，如果你需要定时主动检测更新，可以在registered钩子中添加定时器，定期调用registration.update()触发检测
• 如果你没有使用Pinia，也可以用mitt事件总线实现跨组件通知，原理和状态管理一致，在SW钩子中emit对应事件，组件中监听事件即可

内容的提问来源于stack exchange，提问作者Siddiqi