0Pricing
Vue Academy · Lección

Configuración de vite-plugin-pwa

Configuración del plugin, opciones del manifiesto, iconos, capturas de pantalla, modos de visualización y ámbito

Configuración de vite-plugin-pwa es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es una PWA

Una Progressive Web App añade capacidad de instalación, compatibilidad sin conexión y funciones similares a las nativas a una aplicación web mediante un service worker y un manifiesto de aplicación web. vite-plugin-pwa automatiza la integración de ambos en una compilación de Vue + Vite.

Instalar el plugin

Instale vite-plugin-pwa como dependencia de desarrollo. Utiliza Workbox internamente para generar el service worker.

npm install -D vite-plugin-pwa

Añadir VitePWA a plugins

Importe VitePWA y añádalo al array de plugins de Vite. Las opciones se pasan a su única llamada de función.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

registerType controla el comportamiento de las actualizaciones. "autoUpdate" activa inmediatamente los nuevos service workers; "prompt" le permite preguntar al usuario antes de volver a cargar.

VitePWA({
  registerType: "autoUpdate"
});

Las opciones de manifest

El objeto manifest se convierte en el manifiesto de la aplicación web. Sus campos principales son name, short_name, theme_color e icons.

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

El array icons

Proporcione varios tamaños de icono para que el sistema operativo pueda elegir el adecuado para la pantalla de inicio y la pantalla de carga. Incluya un icono maskable para las formas adaptables.

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

Configuración de Workbox

La opción workbox configura el service worker generado: qué archivos precargar y qué reglas de almacenamiento en caché en tiempo de ejecución aplicar.

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

injectRegister: "auto" inyecta automáticamente el código que registra el service worker, por lo que no tiene que escribir manualmente la lógica de registro.

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

Usar el módulo de registro virtual

Para las actualizaciones basadas en avisos, importe el módulo virtual registerSW en el archivo de entrada y conéctelo a sus callbacks.

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

Activarlo en desarrollo

De forma predeterminada, el service worker solo se ejecuta en producción. Active devOptions para probar el comportamiento de la PWA durante el desarrollo.

VitePWA({
  devOptions: { enabled: true }
});

Verificar la instalación

Después de compilar y servir la aplicación, abra la pestaña Application de Chrome DevTools. Debería ver el manifiesto analizado, un service worker activo y un aviso de instalación disponible en la barra de direcciones.

Comprobación rápida

¿Qué hace injectRegister: "auto"?

Recapitulación

Añada VitePWA al array de plugins de Vite con un registerType (autoUpdate o prompt), un manifest (name, short_name, theme_color y un array icons) y opciones de workbox. Utilice injectRegister: "auto" para registrar automáticamente el service worker o el módulo virtual:pwa-register para las actualizaciones basadas en avisos.

Preguntas frecuentes

¿La lección «Configuración de vite-plugin-pwa» es gratis?

Sí — el texto completo de «Configuración de vite-plugin-pwa» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de vite-plugin-pwa»?

Configuración del plugin, opciones del manifiesto, iconos, capturas de pantalla, modos de visualización y ámbito Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Configuración de vite-plugin-pwa»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de vite-plugin-pwa
  2. Estrategias de Service Worker
  3. Compatibilidad sin conexión y sincronización en segundo plano
  4. Notificaciones push en una PWA de Vue
← Volver a Vue Academy