0Pricing
Vue Academy · Lektion

vite-plugin-pwa einrichten

Plugin-Konfiguration, Manifest-Optionen, Icons, Screenshots, Anzeigemodi und Gültigkeitsbereich

vite-plugin-pwa einrichten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist eine PWA

Eine Progressive Web App ergänzt eine Webanwendung mithilfe eines Service Workers und eines Web-App-Manifests um Installierbarkeit, Offline-Unterstützung und nativeähnliche Funktionen. vite-plugin-pwa automatisiert die Einbindung beider Komponenten in einen Vue- und Vite-Build.

Das Plugin installieren

Installieren Sie vite-plugin-pwa als Entwicklungsabhängigkeit. Unter der Haube verwendet es Workbox, um den Service Worker zu generieren.

npm install -D vite-plugin-pwa

VitePWA zu den Plugins hinzufügen

Importieren Sie VitePWA und fügen Sie es dem Vite-Plugin-Array hinzu. Optionen werden an den einzelnen Funktionsaufruf übergeben.

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 steuert das Aktualisierungsverhalten. "autoUpdate" aktiviert neue Service Worker sofort; mit "prompt" können Sie vor dem Neuladen die Benutzerin oder den Benutzer fragen.

VitePWA({
  registerType: "autoUpdate"
});

Die manifest-Optionen

Das Objekt manifest wird zum Web-App-Manifest. Wichtige Felder sind name, short_name, theme_color und icons.

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

Das icons-Array

Stellen Sie mehrere Symbolgrößen bereit, damit das Betriebssystem die passende für den Startbildschirm und den Begrüßungsbildschirm auswählen kann. Fügen Sie ein maskierbares Symbol für adaptive Formen hinzu.

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

Workbox-Konfiguration

Die Option workbox konfiguriert den generierten Service Worker – welche Dateien vorab im Cache gespeichert werden und welche Regeln für das Laufzeit-Caching gelten.

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

injectRegister auto

injectRegister: "auto" fügt automatisch den Code zur Registrierung des Service Workers ein, sodass Sie keine Registrierungslogik manuell schreiben müssen.

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

Das virtuelle Registermodul verwenden

Für aufforderungsbasierte Aktualisierungen importieren Sie das virtuelle registerSW-Modul in Ihrer Einstiegsdatei und binden Sie dessen Callbacks ein.

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

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

In der Entwicklung aktivieren

Standardmäßig läuft der Service Worker nur in der Produktion. Aktivieren Sie devOptions, um das PWA-Verhalten während der Entwicklung zu testen.

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

Die Installation überprüfen

Öffnen Sie nach dem Erstellen und Bereitstellen den Tab „Application“ in den Chrome DevTools. Das Manifest sollte解析? parsed, ein aktiver Service Worker und eine in der Adressleiste verfügbare Installationsaufforderung angezeigt werden.

Kurze Überprüfung

Was bewirkt injectRegister: "auto"?

Zusammenfassung

Fügen Sie VitePWA mit einem registerType (autoUpdate oder prompt), einem manifest (name, short_name, theme_color, icons-Array) und workbox-Optionen zum Vite-Plugin-Array hinzu. Verwenden Sie injectRegister: "auto" für die automatische Registrierung des Service Workers oder das Modul virtual:pwa-register für aufforderungsbasierte Aktualisierungen.

Häufig gestellte Fragen

Ist die Lektion „vite-plugin-pwa einrichten“ kostenlos?

Ja — der vollständige Text von „vite-plugin-pwa einrichten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „vite-plugin-pwa einrichten“?

Plugin-Konfiguration, Manifest-Optionen, Icons, Screenshots, Anzeigemodi und Gültigkeitsbereich Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „vite-plugin-pwa einrichten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. vite-plugin-pwa einrichten
  2. Strategien für Service Worker
  3. Offline-Unterstützung und Background Sync
  4. Push-Benachrichtigungen in Vue-PWAs
← Zurück zu Vue Academy