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.

// 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",
                    },
                ]
            }
        })
    ]
});

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