pwa-auto-update

Auto-actualización para PWAs instaladas. El problema que resuelve: si un usuario tiene tu PWA instalada en el celular, nunca hace un "refresh" manual — así que tras cada deploy, se queda atascado en la versión vieja indefinidamente (peor todavía si el Service Worker cachea agresivamente).

Sin dependencias, sin framework — funciona con Vite + cualquier UI library (React, Vue, Svelte, vanilla).

Instalación

npm install pwa-auto-update

Cómo funciona

1. Plugin de Vite — en cada build, reemplaza un placeholder en tu sw.js por un identificador único (timestamp), forzando a que el navegador vea "un Service Worker distinto" en cada deploy.
2. sw.js — cachea la app para que funcione offline/rápido, y se actualiza a sí mismo de inmediato (skipWaiting + clients.claim) en vez de esperar a que se cierren todas las pestañas. Incluye también un handler de Web Push como ejemplo (opcional, se puede quitar).
3. Registro del lado del cliente — cada vez que la app vuelve a primer plano (visibilitychange/focus), le pregunta al navegador si hay una versión nueva; cuando la hay, recarga la página automáticamente.

Uso

// vite.config.js
import { swVersionPlugin } from 'pwa-auto-update/vite-plugin';

export default {
  plugins: [swVersionPlugin({ prefix: 'myapp' })],
};

// tu entry point (main.jsx, index.js, etc.)
import { registerServiceWorkerWithAutoUpdate } from 'pwa-auto-update';

registerServiceWorkerWithAutoUpdate();

Copiá el sw.js del paquete a tu carpeta public/ (debe quedar servido en la raíz, ej. /sw.js):

cp node_modules/pwa-auto-update/sw.js public/sw.js

Ajustá la lista de cache.addAll([...]) dentro de sw.js a los assets que quieras pre-cachear en tu proyecto.

Componentes de ejemplo (React)

En el repo hay dos componentes React (InstallPWAButton.jsx, InstallPWAModal.jsx) de ejemplo para invitar al usuario a instalar la PWA — no forman parte de este paquete de npm (para no forzar React/Tailwind/Framer Motion como dependencias), pero podés copiarlos y adaptarlos.

Licencia

MIT