0Pricing
Vue Academy · Lezione

Configurazione di vite-plugin-pwa

Configurazione del plugin, opzioni del manifest, icone, screenshot, modalità di visualizzazione, scope.

Configurazione di vite-plugin-pwa è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è una PWA

Una Progressive Web App aggiunge installabilità, supporto offline e funzionalità simili a quelle native a un'app web tramite un service worker e un manifest dell'app web. vite-plugin-pwa automatizza l'integrazione di entrambi in una build Vue + Vite.

Installare il plugin

Installi vite-plugin-pwa come dipendenza di sviluppo. Utilizza Workbox internamente per generare il service worker.

npm install -D vite-plugin-pwa

Aggiungere VitePWA ai plugin

Importi VitePWA e lo aggiunga all'array dei plugin di Vite. Le opzioni vengono passate alla sua singola chiamata di funzione.

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 controlla il comportamento degli aggiornamenti. "autoUpdate" attiva immediatamente i nuovi service worker; "prompt" consente di chiedere all'utente prima di ricaricare la pagina.

VitePWA({
  registerType: "autoUpdate"
});

Le opzioni del manifest

L'oggetto manifest diventa il manifest dell'app web. I campi principali sono name, short_name, theme_color e icons.

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

L'array icons

Fornisca più dimensioni delle icone, così il sistema operativo può scegliere quella corretta per la schermata principale e la schermata iniziale. Includa un'icona maskable per le forme adattive.

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" }
  ]
}

Configurazione di Workbox

L'opzione workbox configura il service worker generato, specificando quali file precaricare e le eventuali regole di caching a runtime.

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

injectRegister auto

injectRegister: "auto" inserisce automaticamente il codice che registra il service worker, così non è necessario scrivere manualmente la logica di registrazione.

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

Utilizzare il modulo di registrazione virtuale

Per gli aggiornamenti basati su prompt, importi il modulo virtuale registerSW nel file di ingresso e si colleghi ai relativi callback.

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

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

Abilitare in sviluppo

Per impostazione predefinita, il service worker viene eseguito solo in produzione. Abiliti devOptions per testare il comportamento della PWA durante lo sviluppo.

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

Verificare l'installazione

Dopo aver eseguito la build e avviato il server, apra la scheda Application di Chrome DevTools. Dovrebbe vedere il manifest analizzato, un service worker attivo e un prompt di installazione disponibile nella barra degli indirizzi.

Verifica rapida

Che cosa fa injectRegister: "auto"?

Riepilogo

Aggiunga VitePWA all'array dei plugin di Vite con un registerType (autoUpdate o prompt), un manifest (name, short_name, theme_color e array icons) e le opzioni di workbox. Utilizzi injectRegister: "auto" per registrare automaticamente il service worker oppure il modulo virtual:pwa-register per gli aggiornamenti basati su prompt.

Domande Frequenti

La lezione «Configurazione di vite-plugin-pwa» è gratuita?

Sì — il testo completo di «Configurazione di vite-plugin-pwa» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Configurazione di vite-plugin-pwa»?

Configurazione del plugin, opzioni del manifest, icone, screenshot, modalità di visualizzazione, scope. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurazione di vite-plugin-pwa»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di vite-plugin-pwa
  2. Strategie per i service worker
  3. Supporto offline e sincronizzazione in background
  4. Notifiche push in una PWA Vue
← Torna a Vue Academy