Progressive Web Apps : transformer votre site en application mobile

Introduction

Les Progressive Web Apps (PWA) sont des sites web qui offrent une experience proche d'une application native : installation sur l'ecran d'accueil, fonctionnement hors ligne, notifications push et performances optimisees. Le concept a ete formalise par Google en 2015, mais c'est en 2024-2025 que l'adoption a veritablement accelere.

Des entreprises majeures utilisent les PWA avec succes : Starbucks a constate que sa PWA est 99,84 % plus legere que son application iOS. Pinterest a vu ses interactions augmenter de 60 % apres son passage en PWA. Twitter Lite, la PWA de Twitter, a reduit la consommation de donnees de 70 %.

Les trois piliers d'une PWA

1. Le manifeste d'application web

Le fichier manifest.json (ou manifest.webmanifest) definit les metadonnees de votre application :

{
  "name": "Mon Application",
  "short_name": "MonApp",
  "description": "Description de l'application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#D4714B",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Le parametre display: "standalone" fait apparaitre l'application sans la barre d'adresse du navigateur, comme une app native.

2. Le Service Worker

Le Service Worker est un script JavaScript qui s'execute en arriere-plan, independamment de la page web. Il agit comme un proxy entre le navigateur et le reseau :

// sw.js - Strategie Cache First
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/app.css',
        '/scripts/app.js',
        '/images/logo.svg'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Les principales strategies de cache sont :

• Cache First : cherche d'abord dans le cache, puis sur le reseau. Ideal pour les fichiers statiques.
• Network First : essaie le reseau d'abord, se rabat sur le cache. Ideal pour le contenu dynamique.
• Stale While Revalidate : sert le cache immediatement tout en mettant a jour en arriere-plan. Bon compromis.

3. Le HTTPS

Les Service Workers ne fonctionnent qu'en HTTPS (sauf sur localhost pour le developpement). C'est une mesure de securite essentielle : un Service Worker intercepte toutes les requetes reseau, et un attaquant qui en prendrait le controle pourrait modifier n'importe quelle reponse.

Les fonctionnalites avancees

Les notifications push

Les notifications push permettent de re-engager les utilisateurs meme quand le site est ferme. Elles reposent sur deux API :

• Push API : recoit les messages du serveur
• Notifications API : affiche la notification

L'utilisateur doit explicitement accorder la permission. En France, le RGPD exige un consentement clair et un moyen simple de se desinscrire.

Le mode hors ligne

Avec un Service Worker, vous pouvez offrir une experience hors ligne complete :

• Afficher les pages deja visitees depuis le cache
• Presenter une page « hors connexion » personnalisee pour les contenus non mis en cache
• Synchroniser les donnees (formulaires, actions) quand la connexion revient grace a la Background Sync API

Le partage natif

L'API Web Share permet d'utiliser le menu de partage natif du systeme d'exploitation :

navigator.share({
  title: 'Mon article',
  text: 'Decouvrez cet article interessant',
  url: window.location.href
});

Les limites des PWA

• iOS : Apple a longtemps limite les PWA. Depuis iOS 16.4 (mars 2023), les notifications push sont enfin supportees, mais certaines fonctionnalites restent absentes (Bluetooth, NFC)
• Decouverte : les PWA ne beneficient pas de la visibilite des stores (meme si Google Play accepte les TWA - Trusted Web Activities)
• Stockage : le cache est limite (generalement 50 Mo par origine) et peut etre purge par le navigateur

Outils et frameworks

• Workbox (Google) : bibliotheque de reference pour la gestion des Service Workers
• Vite PWA Plugin : integration simple pour les projets Vite
• Lighthouse : audit PWA integre aux DevTools de Chrome

Conclusion

Les PWA representent une alternative serieuse aux applications natives pour de nombreux cas d'usage. Elles offrent un excellent compromis entre performance, accessibilite et cout de developpement. Si votre projet ne necessite pas d'acces materiel pousse (capteurs biometriques, realite augmentee), une PWA merite d'etre serieusement envisagee.