Différences

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

--- front:pwa [2025/10/01 06:36] – [Configurer sa PWA] 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**
+**Vite** offre une mise en place simple rapide grâce à son plugin **Vite-plugin-pwa**.
 ### Configurer sa PWA
 ```
-import { defineConfig } from 'vite';
+// vite.config.js
-import react from '@vitejs/plugin-react';
-import { VitePWA } from 'vite-plugin-pwa';
+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()
+        tailwindcss(),
         VitePWA({
-            registerType: 'autoUpdate',
+            registerType: "autoUpdate",
             manifest: {
-                name: 'SmartMaker',
+                name: "SmartMaker",
-                short_name: 'SmartMaker',
+                short_name: "SmartMaker",
-                start_url: '/',
+                description: "",
-                display: 'standalone',
+                start_url: "/",
-                background_color: '#ffffff',
+                display: "standalone",
-                theme_color: '#5fbabf',
+                background_color: "#ffffff",
+                theme_color: "#5fbabf",
                 icons: [
                     {
-                        src: 'images/pwa-64x64.png',
+                        src: "images/pwa-64x64.png",
-                        sizes: '64x64',
+                        sizes: "64x64",
-                        type: 'image/png'
+                        type: "image/png"
                     },
                     {
-                        src: 'images/pwa-192x192.png',
+                        src: "images/pwa-192x192.png",
-                        sizes: '192x192',
+                        sizes: "192x192",
-                        type: 'image/png'
+                        type: "image/png"
                     },
                     {
-                        src: 'images/pwa-512x512.png',
+                        src: "images/pwa-512x512.png",
-                        sizes: '512x512',
+                        sizes: "512x512",
-                        type: 'image/png',
+                        type: "image/png",
                     },
                 ]
@@ Ligne 48: / Ligne 52: @@
 });
 ```
+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".