Configurer vite-plugin-pwa
Configuration du plugin, options du manifeste, icônes, captures d’écran, modes d’affichage et portée
Configurer vite-plugin-pwa est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu’est-ce qu’une PWA
Une application web progressive ajoute à une application web la possibilité d’être installée, la prise en charge du mode hors ligne et des fonctionnalités semblables à celles d’une application native, grâce à un worker de service et à un manifeste d’application web. vite-plugin-pwa automatise l’intégration de ces deux éléments dans une compilation Vue + Vite.
Installer l’extension
Installez vite-plugin-pwa comme dépendance de développement. Il utilise Workbox en interne pour générer le worker de service.
npm install -D vite-plugin-pwaAjouter VitePWA aux extensions
Importez VitePWA et ajoutez-le au tableau des extensions de Vite. Les options lui sont transmises lors de son unique appel de fonction.
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 contrôle le comportement des mises à jour. "autoUpdate" active immédiatement les nouveaux workers de service ; "prompt" vous permet de demander confirmation à l’utilisateur avant le rechargement.
VitePWA({
registerType: "autoUpdate"
});Les options du manifeste
L’objet manifest devient le manifeste de l’application web. Ses principaux champs sont name, short_name, theme_color et icons.
VitePWA({
manifest: {
name: "My Vue App",
short_name: "VueApp",
theme_color: "#42b883"
}
});Le tableau d’icônes
Fournissez plusieurs tailles d’icônes afin que l’OS puisse choisir celle qui convient à l’écran d’accueil et à l’écran de démarrage. Incluez une icône adaptative pour les formes variables.
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" }
]
}Configuration de Workbox
L’option workbox configure le worker de service généré : les fichiers à mettre en cache à l’avance et les éventuelles règles de mise en cache à l’exécution.
VitePWA({
workbox: {
globPatterns: ["**/*.{js,css,html,png,svg}"]
}
});injectRegister automatique
injectRegister: "auto" injecte automatiquement le code qui enregistre le worker de service, afin que vous n’ayez pas à écrire vous-même la logique d’enregistrement.
VitePWA({
registerType: "autoUpdate",
injectRegister: "auto"
});Utiliser le module d’enregistrement virtuel
Pour les mises à jour nécessitant une confirmation, importez le module virtuel registerSW dans votre fichier d’entrée et utilisez ses fonctions de rappel.
import { registerSW } from "virtual:pwa-register";
const updateSW = registerSW({
onNeedRefresh() { /* show update toast */ },
onOfflineReady() { /* show ready toast */ }
});Activer en développement
Par défaut, le worker de service ne s’exécute qu’en production. Activez devOptions pour tester le comportement de la PWA pendant le développement.
VitePWA({
devOptions: { enabled: true }
});Vérifier l’installation
Après avoir compilé et démarré l’application, ouvrez l’onglet Application de Chrome DevTools. Vous devriez voir le manifeste analysé, un worker de service actif et une invite d’installation disponible dans la barre d’adresse.
Vérification rapide
Que fait injectRegister: "auto" ?
Récapitulatif
Ajoutez VitePWA au tableau des extensions de Vite avec un registerType (autoUpdate ou une invite), un manifest (name, short_name, theme_color et tableau icons) et des options workbox. Utilisez injectRegister: "auto" pour enregistrer automatiquement le worker de service, ou le module virtual:pwa-register pour les mises à jour nécessitant une confirmation.
Questions Fréquemment Posées
La leçon « Configurer vite-plugin-pwa » est-elle gratuite ?
Oui — le texte complet de « Configurer vite-plugin-pwa » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configurer vite-plugin-pwa » ?
Configuration du plugin, options du manifeste, icônes, captures d’écran, modes d’affichage et portée Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Configurer vite-plugin-pwa » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer vite-plugin-pwa
- Stratégies de Service Worker
- Prise en charge hors ligne et synchronisation en arrière-plan
- Notifications push dans une PWA Vue