vite-plugin-pwa

Qué es

vite-plugin-pwa es un plugin de Vite, agnóstico al framework, que añade capacidades de Progressive Web App a un proyecto con muy poca configuración. Está mantenido por la organización vite-pwa (creada por Anthony Fu) y se apoya en Workbox para generar el service worker. Genera automáticamente el Web App Manifest y la lógica de caché necesaria para que la aplicación sea instalable y funcione sin conexión.

Para qué sirve

• Convertir una app Vite en una PWA instalable, con icono y pantalla completa.
• Generar un service worker con soporte offline mediante estrategias de caché de Workbox.
• Mostrar avisos al usuario cuando hay contenido nuevo o la app está lista para usarse offline.
• Producir todos los assets PWA (iconos y splash) a partir de una sola imagen de origen.

Cuándo usarlo

• Cuando ya trabajas con Vite y quieres dar soporte PWA sin escribir manualmente el service worker ni el manifiesto.
• Encaja con Vue 3, React, Svelte, SolidJS, Preact y vanilla, además de meta-frameworks como SvelteKit, Astro, Nuxt 3, VitePress, Qwik o Remix.
• Si tu bundler no es Vite, necesitarás otra solución (por ejemplo Workbox directamente o el plugin equivalente del bundler que uses).

Ejemplo

Instalación como dependencia de desarrollo y registro del plugin en la configuración de Vite:

npm i vite-plugin-pwa -D

import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Mi App',
        short_name: 'MiApp',
        theme_color: '#ffffff',
      },
    }),
  ],
};

Puntos clave

• Enfoque zero-config: defaults sensatos para los casos comunes, pero totalmente extensible.
• Service worker basado en Workbox con estrategia stale-while-revalidate y soporte offline.
• Compatible con múltiples frameworks y meta-frameworks sobre Vite.
• Generador de assets PWA integrado y soporte de depuración del service worker en desarrollo.

Ten en cuenta

• Requiere Vite (versiones recientes apuntan a Vite 5+); no sirve para proyectos con otros bundlers.
• El comportamiento PWA conviene probarlo en build de producción y bajo HTTPS, ya que los service workers tienen ese requisito.
• La configuración de caché y de actualización (prompt vs. autoUpdate) hay que ajustarla al caso real para evitar servir contenido obsoleto.