Vue3项目中Service Worker无法检测到应用新版本的问题求助

I have a Vue3 app with the auto-generated registerServiceWorker.ts file from the CLI, which looks like this:

/* eslint-disable no-console */
import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log('App is being served from cache by a service worker.\n' +
        'For more details, visit ');
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

I haven't modified this code at all—it works fine for caching content and serving from cache offline. However, when I deploy a new version to the server (even though the index.html file is completely changed), I never see the "New content is available; please refresh." message. Is there a hidden way to notify the service worker that a new app version has been uploaded?

Great question! This is a common gotcha with Vue CLI's default PWA setup, which uses Workbox under the hood. Let's break down why you're not seeing the update prompt and how to fix it:

Why the default setup isn't triggering updates #

The core issue here is that service workers only trigger update checks when the service worker file itself (service-worker.js) changes. By default, Vue CLI's Workbox configuration caches index.html but doesn't actively monitor it for changes—so even if you update index.html, if the service-worker.js file's content hasn't changed, the browser won't detect an update.

Fix 1: Force periodic update checks #

You can modify your registration logic to actively check for updates on app load, which ensures the browser checks if a new service worker is available. Update your registerServiceWorker.ts with this adjusted code:

/* eslint-disable no-console */
import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log('App is being served from cache by a service worker.');
    },
    registered(registration) {
      console.log('Service worker has been registered.');
      // Check for updates every 60 seconds (adjust interval as needed)
      setInterval(() => {
        registration.update();
      }, 60000);
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated(registration) {
      console.log('New content is available; please refresh.');
      // Add a user-friendly prompt instead of just logging
      if (confirm('New version available! Click OK to refresh and update.')) {
        window.location.reload();
      }
      // Optional: Auto-refresh once the user interacts
      registration.waiting?.postMessage({ type: 'SKIP_WAITING' });
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

// Listen for skip waiting signal to auto-refresh
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    window.location.reload();
  });
}

Fix 2: Configure Workbox to monitor index.html changes #

Modify your vue.config.js to adjust Workbox's caching strategy for index.html, ensuring it checks for updates on every load:

module.exports = {
  pwa: {
    workboxOptions: {
      runtimeCaching: [
        {
          urlPattern: /index\.html$/,
          handler: 'StaleWhileRevalidate', // Serve cached version first, then check for updates
          options: {
            cacheName: 'index-html-cache',
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }
}

This setup tells Workbox to serve the cached index.html immediately, but in the background, it fetches the latest version from the server. If the new version differs, it will update the cache and trigger the service worker update flow.

Fix 3: Ensure the service worker file changes on build #

Vue CLI generates service-worker.js based on your app's assets. To guarantee the browser detects updates:

• Keep Vue CLI's default production build setting that adds unique hashes to asset filenames—this ensures service-worker.js changes when your app content does.
• Configure your server to send Cache-Control: no-cache headers for service-worker.js, so the browser never caches this file and always fetches the latest version when checking for updates.

Key Notes #

• Even after a new service worker is installed, it won't take control of the current page until the user refreshes (unless you use skipWaiting). The updated event is your chance to prompt the user to refresh.
• For testing, use Chrome DevTools' Application > Service Workers tab to simulate updates, bypass cache, and inspect the service worker state.

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