Guide PWA (Progressive Web Apps) : Rendre les Apps Web comme des Apps Mobiles

Qu'est-ce qu'une PWA ?

Les PWA (Progressive Web Apps) sont des applications web construites avec des technologies web qui offrent une expérience d'app mobile native.

Les PWA utilisent des technologies web modernes comme Service Worker, Web App Manifest et HTTPS. Elles fonctionnent dans tout navigateur et ne nécessitent pas d'app store.

Fonctionnalités clés : Fonctionnalité hors ligne, Ajouter à l'écran d'accueil, notifications push, synchronisation en arrière-plan, mode plein écran.

Avantages : Une seule base de code (web + mobile), pas d'approbation d'app store nécessaire, mises à jour instantanées, coût de développement réduit, SEO friendly.

Web App Manifest

Le fichier manifest.json définit les métadonnées de la PWA : name, short_name, start_url, display, background_color, theme_color, icons.

Exemple de manifest : { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone permet à l'app de fonctionner sans l'UI du navigateur (barre d'adresse, navigation). Les options fullscreen et minimal-ui sont également disponibles.

Icônes : Au moins des icônes PNG de 192x192 et 512x512 pixels sont requises. Le support des icônes maskable crée des icônes adaptatives.

Liez le manifest dans <head> avec <link rel="manifest" href="/manifest.json">. Le navigateur lit le manifest pour activer les fonctionnalités PWA.

Service Worker

Service Worker est un fichier JavaScript qui s'exécute entre le navigateur et le réseau. Il fonctionne en arrière-plan et fournit l'accès hors ligne, le cache et les notifications push.

Enregistrement : Service Worker est enregistré avec navigator.serviceWorker.register('/sw.js'). Doit fonctionner sur HTTPS ou localhost.

Stratégies de cache : Cache First (d'abord le cache, puis le réseau), Network First (d'abord le réseau, puis le cache), Stale While Revalidate (servir depuis le cache, mettre à jour en arrière-plan).

Cache API : Les assets statiques sont mis en cache avec caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])).

Fallback offline : Affichez une page personnalisée hors ligne. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

Exigences PWA et Lighthouse

HTTPS : Les PWA doivent fonctionner sur HTTPS (sauf localhost). Le certificat SSL est requis.

Design responsive : Comme la PWA fonctionne sur des appareils mobiles, le design responsive est obligatoire. Ajoutez le meta tag viewport.

Chargement rapide : Le chargement initial doit être inférieur à 3 secondes. Accélérez avec le code splitting, le lazy loading et le cache.

Audit PWA Lighthouse : Exécutez l'audit PWA dans l'onglet Lighthouse de Chrome DevTools. Vérifie tous les critères PWA (installable, fonctionne hors ligne, chargement rapide).

Installabilité : Le navigateur affiche automatiquement le bouton 'Ajouter à l'écran d'accueil' quand les conditions du manifest et du Service Worker sont remplies.

PWA vs App Native

Avantages PWA : Une seule base de code, mises à jour instantanées, pas besoin d'app store, SEO friendly, coût réduit, petite taille.

Avantages app native : Accès complet au matériel (caméra, Bluetooth, NFC), meilleure performance, visibilité dans l'app store, fiabilité des notifications push.

Critères de sélection : PWA si le budget est limité et un lancement rapide est nécessaire. App native si un accès complet au matériel et une performance maximale sont nécessaires.

Approche hybride : Commencez avec PWA, passez à l'app native quand la base d'utilisateurs grandit. Ou convertissez la PWA en app native avec Capacitor/Ionic.

Exemples de PWA et Outils

Exemples de PWA réussis : Twitter Lite (65% de données en moins), Pinterest (44% d'engagement utilisateur en plus), Starbucks (commande hors ligne).

Outils de développement : Workbox (bibliothèque Service Worker de Google), PWA Builder (Microsoft), Lighthouse (audit), Chrome DevTools (debugging).

Support des frameworks : Next.js (next-pwa), Nuxt.js (@nuxtjs/pwa), React (Create React App PWA template), Vue (Vue CLI PWA plugin).

Tests : Vérifiez Service Worker, Cache et Manifest dans l'onglet Application de Chrome DevTools. Mesurez le score PWA avec Lighthouse.