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:
@@ -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) => {
|
||||||
|
|||||||
19
src/main.tsx
19
src/main.tsx
@@ -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
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user