Différences

Ci-dessous, les différences entre deux révisions de la page.

--- front:pwa [2025/10/01 06:25] – paolo
+++ front:pwa [2025/10/01 07:13] (Version actuelle) – [Configurer sa PWA] paolo
@@ Ligne 3: / Ligne 3: @@
 Documentation [Vite-PWA](https://vite-pwa-org.netlify.app/)
-Une Progressive Web App (PWA) est une application qui combine le meilleur du web et du mobile (surtout web). Elle s’installe sur l’écran d’accueil, fonctionne hors connexion et offre une expérience fluide proche d’une app native.
+Une **Progressive Web App (PWA)** est une application qui combine le meilleur du web et du mobile (surtout web). Elle s’installe sur l’écran d’accueil, fonctionne hors connexion et offre une expérience fluide proche d’une app native.
+**Vite** offre une mise en place simple rapide grâce à son plugin **Vite-plugin-pwa**.
+### Configurer sa PWA
+```
+// vite.config.js
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { VitePWA } from "vite-plugin-pwa";
+export default defineConfig({
+    plugins: [
+        react(),
+        tailwindcss(),
+        VitePWA({
+            registerType: "autoUpdate",
+            manifest: {
+                name: "SmartMaker",
+                short_name: "SmartMaker",
+                description: "",
+                start_url: "/",
+                display: "standalone",
+                background_color: "#ffffff",
+                theme_color: "#5fbabf",
+                icons: [
+                    {
+                        src: "images/pwa-64x64.png",
+                        sizes: "64x64",
+                        type: "image/png"
+                    },
+                    {
+                        src: "images/pwa-192x192.png",
+                        sizes: "192x192",
+                        type: "image/png"
+                    },
+                    {
+                        src: "images/pwa-512x512.png",
+                        sizes: "512x512",
+                        type: "image/png",
+                    },
+                ]
+            }
+        })
+    ]
+});
+```
+Attention, les images doivent être stockées dans le dossier ''public''.
+Vous pouvez maintenant prévisualiser de la **PWA** compilée avec les commandes ci-dessous.
+```
+npm run build
+npm run preview
+```
+Vous pouvez également ouvrir votre inspecteur et vérifier que le Service Worker et le manifest sont bien pris en compte.
+L'installation varie selon les navigateurs mais il s'agit généralement de trouver un bouton "Installer" ou "Installer l'application".
-**Vite** offre une mise en place simple rapide grâce à son plugin **Vite-plugin-pwa**
-### Configurer sa **PWA**