Vite PWA 插件指南：实现周期性 Service Worker 更新-CSDN博客

Vite PWA 插件指南：实现周期性 Service Worker 更新

前言

在现代 Web 应用开发中，Service Worker 是实现离线功能、后台同步和推送通知等高级特性的关键技术。vite-plugin-pwa 作为 Vite 生态中的 PWA 插件，为开发者提供了便捷的 Service Worker 集成方案。本文将重点介绍如何利用该插件实现周期性 Service Worker 更新，确保用户始终使用最新版本的应用。

为什么需要周期性更新？

Service Worker 的生命周期中，浏览器会在页面导航时自动检查更新。但在以下场景中，这种默认行为可能不足：

单页应用(SPA)长时间运行不刷新
用户保持应用在后台运行多日
需要更精确控制更新频率的场景

周期性更新机制可以弥补这些不足，确保即使用户不刷新页面，也能及时获取应用更新。

基础实现

在项目的主入口文件（通常是 main.ts 或 main.js）中，我们可以这样配置周期性更新：

import { registerSW } from 'virtual:pwa-register'

// 设置更新间隔为1小时（毫秒单位）
const intervalMS = 60 * 60 * 1000

const updateSW = registerSW({
  onRegistered(registration) {
    if (registration) {
      setInterval(() => {
        registration.update()
      }, intervalMS)
    }
  }
})

这段代码实现了每小时检查一次 Service Worker 更新的功能。registerSW 是插件提供的虚拟模块方法，它简化了 Service Worker 的注册过程。

进阶实现：处理边界情况

基础实现虽然简单，但在实际生产环境中可能会遇到以下问题：

服务器宕机时调用更新方法
用户突然离线
网络连接不稳定

为了增强健壮性，我们可以使用更完善的实现方案：

import { registerSW } from 'virtual:pwa-register'

const intervalMS = 60 * 60 * 1000

const updateSW = registerSW({
  onRegisteredSW(swUrl, registration) {
    if (!registration) return
    
    setInterval(async () => {
      // 检查Service Worker是否处于安装状态
      if (registration.installing || !navigator) return
      
      // 检查网络连接状态
      if ('connection' in navigator && !navigator.onLine) return
      
      try {
        // 通过fetch请求确保Service Worker文件可访问
        const resp = await fetch(swUrl, {
          cache: 'no-store',
          headers: {
            'cache': 'no-store',
            'cache-control': 'no-cache',
          },
        })
        
        // 确认响应正常后再触发更新
        if (resp?.status === 200) {
          await registration.update()
        }
      } catch (error) {
        console.error('检查更新失败:', error)
      }
    }, intervalMS)
  }
})

这个进阶版本增加了以下保护措施：