Progressive Web App (PWA) : Le Guide Complet pour Créer votre Application Web

Qu'est-ce qu'une Progressive Web App (PWA) ?

Une Progressive Web App (PWA) est une application web qui utilise des technologies modernes pour offrir une expérience similaire à une application native : installation sur l'écran d'accueil, fonctionnement hors-ligne, notifications push, et performances optimales.

Les PWA combinent le meilleur des deux mondes : l'accessibilité du web (pas besoin de télécharger depuis un store) et les fonctionnalités des applications natives (installation, hors-ligne, push).

Pourquoi choisir une PWA en 2026 ?

Avantages par rapport aux applications natives

Entreprises utilisant des PWA avec succès

• X (Twitter Lite) : +65% de pages/session, -70% de données consommées
• Pinterest : +60% d'engagement, +44% de revenus publicitaires
• Starbucks : leur PWA fait 233 Ko (vs 148 Mo pour l'app native)
• Uber : PWA de 50 Ko, chargement en 3 secondes sur les réseaux 2G

Les 3 piliers techniques d'une PWA

1. Le fichier Manifest (manifest.json)

Le manifest définit comment votre PWA apparaît quand elle est installée :

{
    "name": "Tourak Digital - Agence Web",
    "short_name": "Tourak",
    "description": "Agence de création web et marketing digital",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#3498db",
    "orientation": "any",
    "icons": [
        {
            "src": "/icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "/icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "screenshots": [
        {
            "src": "/screenshots/desktop.png",
            "sizes": "1280x720",
            "type": "image/png",
            "form_factor": "wide"
        },
        {
            "src": "/screenshots/mobile.png",
            "sizes": "640x1136",
            "type": "image/png",
            "form_factor": "narrow"
        }
    ]
}

2. Le Service Worker

Le Service Worker est un script JavaScript qui s'exécute en arrière-plan, indépendamment de la page web. Il gère le cache, les requêtes réseau et les notifications push :

// sw.js - Service Worker basique

const CACHE_NAME = 'tourak-v1';
const URLS_TO_CACHE = [
    '/',
    '/css/style.css',
    '/js/app.js',
    '/images/logo.svg',
    '/offline.html'
];

// Installation : mise en cache des ressources essentielles
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(URLS_TO_CACHE))
            .then(() => self.skipWaiting())
    );
});

// Activation : nettoyage des anciens caches
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then(names =>
            Promise.all(
                names.filter(name => name !== CACHE_NAME)
                     .map(name => caches.delete(name))
            )
        ).then(() => self.clients.claim())
    );
});

// Fetch : stratégie Cache First, puis réseau
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(cached => {
                if (cached) return cached;
                return fetch(event.request)
                    .then(response => {
                        // Mettre en cache les nouvelles ressources
                        if (response.status === 200) {
                            const clone = response.clone();
                            caches.open(CACHE_NAME)
                                .then(cache => cache.put(event.request, clone));
                        }
                        return response;
                    })
                    .catch(() => {
                        // Hors-ligne : afficher la page offline
                        if (event.request.mode === 'navigate') {
                            return caches.match('/offline.html');
                        }
                    });
            })
    );
});

Enregistrer le Service Worker

// Dans votre fichier JavaScript principal
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(reg => console.log('SW enregistré:', reg.scope))
            .catch(err => console.error('Erreur SW:', err));
    });
}

3. HTTPS obligatoire

Les PWA nécessitent impérativement une connexion HTTPS (sauf sur localhost pour le développement). Le Service Worker ne peut pas fonctionner sans HTTPS pour des raisons de sécurité.

Stratégies de cache pour le Service Worker

Notifications Push

// Demander la permission
async function requestNotificationPermission() {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
        console.log('Notifications autorisées !');
        subscribeToPush();
    }
}

// S'abonner aux push
async function subscribeToPush() {
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
    });
    // Envoyer la subscription au serveur
    await fetch('/api/push/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(subscription)
    });
}

// Dans le Service Worker : recevoir et afficher les push
self.addEventListener('push', (event) => {
    const data = event.data.json();
    event.waitUntil(
        self.registration.showNotification(data.title, {
            body: data.body,
            icon: '/icons/icon-192.png',
            badge: '/icons/badge-72.png',
            data: { url: data.url }
        })
    );
});

// Ouvrir l'URL quand on clique sur la notification
self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
});

Tester et auditer votre PWA

Lighthouse (Chrome DevTools)

L'outil officiel de Google pour auditer les PWA :

• Chrome DevTools > Lighthouse > cochez "Progressive Web App"
• Objectif : score 100 sur la section PWA
• Vérifie : manifest, Service Worker, HTTPS, réactivité, accessibilité

Checklist PWA complète

• Le site est servi en HTTPS
• Le manifest.json est présent et valide
• Un Service Worker est enregistré
• Le site fonctionne hors-ligne (au moins une page offline)
• Les icônes 192x192 et 512x512 sont présentes
• Le theme_color est défini
• Le site est responsive
• Le premier chargement est rapide (même sur 3G)
• L'invite d'installation s'affiche correctement

Frameworks et outils pour créer des PWA

Conclusion

Les Progressive Web Apps représentent l'avenir du web en combinant la portée du web et les fonctionnalités des applications natives. En 2026, avec le support grandissant des navigateurs et les attentes élevées des utilisateurs en matière d'expérience, créer une PWA est un investissement intelligent pour toute entreprise.

Tourak Digital développe des PWA performantes et engageantes. Contactez-nous pour transformer votre site en application web progressive.