fix: bust service worker cache on each build with version+timestamp

The SW cache name was hardcoded to 'pinchchat-v1', meaning PWA users
would get stale cached assets forever. Now the cache name includes
the package version and build timestamp, so each build creates a new
cache and old ones are cleaned up on activation.

Also adds:
- Periodic SW update check (every 30 min)
- Auto-reload when new SW version is detected
This commit is contained in:
Nicolas Varrot
2026-02-13 11:57:32 +00:00
parent 13f5c4ac0c
commit 72e9bce4c5
3 changed files with 41 additions and 4 deletions

View File

@@ -1,5 +1,5 @@
// PinchChat Service Worker — cache static assets for offline/instant load // PinchChat Service Worker — cache static assets for offline/instant load
const CACHE_NAME = 'pinchchat-v1'; const CACHE_NAME = 'pinchchat-__SW_VERSION__';
// Cache static assets on install // Cache static assets on install
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {

View File

@@ -8,7 +8,24 @@ import './index.css'
// Register service worker for PWA support (offline caching, installability) // Register service worker for PWA support (offline caching, installability)
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(() => { navigator.serviceWorker.register('/sw.js').then((reg) => {
// Check for updates periodically (every 30 min)
setInterval(() => reg.update().catch(() => {}), 30 * 60 * 1000);
// When a new SW is installed and waiting, reload to activate it
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
if (!newWorker) return;
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// New version available — reload on next navigation
// The new SW called skipWaiting(), so it activates immediately
// Reload to pick up cached assets from the new cache version
window.location.reload();
}
});
});
}).catch(() => {
// SW registration failed — app works fine without it // SW registration failed — app works fine without it
}); });
}); });

View File

@@ -1,13 +1,33 @@
import { defineConfig } from 'vite' import { defineConfig, type Plugin } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' import tailwindcss from '@tailwindcss/vite'
import { readFileSync, writeFileSync, existsSync } from 'node:fs'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'node:url'
import pkg from './package.json' with { type: 'json' } import pkg from './package.json' with { type: 'json' }
const __dirname = dirname(fileURLToPath(import.meta.url))
/** Replace __SW_VERSION__ in sw.js with version+timestamp at build time */
function swVersionPlugin(): Plugin {
const version = `${pkg.version}-${Date.now()}`
return {
name: 'sw-version',
closeBundle() {
const swPath = resolve(__dirname, 'dist', 'sw.js')
if (existsSync(swPath)) {
const content = readFileSync(swPath, 'utf-8')
writeFileSync(swPath, content.replace(/__SW_VERSION__/g, version))
}
},
}
}
export default defineConfig({ export default defineConfig({
define: { define: {
__APP_VERSION__: JSON.stringify(pkg.version), __APP_VERSION__: JSON.stringify(pkg.version),
}, },
plugins: [react(), tailwindcss()], plugins: [react(), tailwindcss(), swVersionPlugin()],
build: { build: {
rollupOptions: { rollupOptions: {
output: { output: {