SmarMaker - Documentation
Docs» front» front:pwa

PWA

Documentation Vite-PWA

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”.

Previous Next

SmarMaker - Documentation
Traductions de cette page:
  • Français
  • Deutsch
  • English
  • Español
  • Italiano
  • Nederlands

Table of Contents


  • SmartMaker
    • SmartAuth
    • Back (PHP)
    • Front (React)
      • Architecture
      • Composants et pages
      • Routage
      • Requêtes Api
      • Stockage de données
      • Traductions
      • Thèmes
      • PWA
      • Astuces
    • SmartCommon
    • HowTo first app
  • Formations
  • Démonstration
  • Afficher le texte source
  • Anciennes révisions
  • Liens de retour
  • Haut de page
  • S'identifier
front/pwa.txt · Dernière modification : 2025/10/01 07:13 de paolo