Progressive Web Apps : définition et choix du framework

Une PWA s'installe comme une application mobile sans passer par les stores. Compatibilité iPhone et Android, frameworks et outils pour en créer une, et cas où le natif reste préférable.

Une Progressive Web App (PWA) est un site ou une application web qui s’installe sur l’écran d’accueil comme une application mobile, peut fonctionner hors connexion et envoyer des notifications, sans passer par l’App Store ni Google Play. Il n’existe pas de « framework PWA » obligatoire : n’importe quel framework JavaScript (React avec Next.js, Vue avec Nuxt, Angular, Svelte) permet d’en créer une, car la PWA repose sur deux briques standard, un manifeste et un service worker. Le bon choix est donc d’abord celui que votre équipe maîtrise, complété par l’outil PWA adapté (@angular/pwa, vite-plugin-pwa, Serwist ou Workbox).

Notre version de 2021 de cet article présentait les PWA comme une technologie encore mal prise en charge par Safari. C’est de moins en moins vrai : depuis iOS 16.4, une PWA installée sur iPhone peut recevoir des notifications. On fait ici le point sur ce qu’est vraiment une PWA, ce qu’elle sait faire en 2026, comment choisir son framework et ses outils, et surtout dans quels cas elle remplace (ou non) une application native.

Qu’est-ce qu’une Progressive Web App ?
Comment fonctionne une PWA ?
Quels navigateurs et appareils prennent en charge les PWA ?
Quel framework choisir pour créer une PWA ?
Quels outils pour transformer un site en PWA ?
Quels sont les avantages et les limites des PWA ?
PWA ou application native : que choisir ?
Un exemple de PWA connue ?
Comment tester et évaluer une PWA ?
Questions fréquentes
Sources

Qu’est-ce qu’une Progressive Web App ?

agence de developpement de Progressive Web Apps a montpellier osmova — **Progressive Web Apps**

Google, qui a popularisé le terme, définit les Progressive Web Apps comme des applications web construites et enrichies avec des API modernes pour offrir des fonctions avancées, tout en restant accessibles à n’importe quel utilisateur, sur n’importe quel appareil, avec une seule base de code. Le mot « progressive » vient du principe d’amélioration progressive : l’application fonctionne dans tous les navigateurs, et les fonctions avancées s’activent là où elles sont disponibles.

Concrètement, une PWA reste un site web : elle a une URL, elle se partage par un lien, elle est indexée par Google comme n’importe quelle page. Mais elle peut aussi :

s’installer sur l’écran d’accueil d’un smartphone, dans le Dock ou la barre des tâches d’un ordinateur, et s’ouvrir dans sa propre fenêtre, sans barre d’adresse ;
fonctionner hors connexion ou sur un réseau lent, grâce à des fichiers mis en cache ;
envoyer des notifications push, y compris sur iPhone depuis 2023 ;
accéder à une partie des fonctions de l’appareil : appareil photo, micro, géolocalisation, partage, stockage local ;
se mettre à jour en arrière-plan, sans que l’utilisateur ait à télécharger une nouvelle version.

Si vous hésitez encore entre les différents types d’applications, notre article sur la différence entre application native et application web pose les bases.

Comment fonctionne une PWA ?

Une PWA repose sur trois éléments techniques, tous standardisés et indépendants du framework utilisé :

Le HTTPS : une PWA doit être servie en connexion sécurisée (sauf en développement local).
Le manifeste d’application web : un petit fichier JSON (souvent manifest.webmanifest) qui décrit l’application : nom, icônes, couleur, page de démarrage, mode d’affichage (plein écran, fenêtre autonome). C’est lui qui rend l’installation possible.
Le service worker : un script JavaScript qui tourne en arrière-plan, entre le navigateur et le réseau. Il met en cache les fichiers, sert une version hors ligne, reçoit les notifications push. On l’explique en détail dans notre article qu’est-ce qu’un service worker.

Un point a changé ces dernières années : selon la documentation MDN, le service worker n’est plus une condition pour qu’une PWA soit installable dans les navigateurs Chromium (Chrome, Edge, Samsung Internet). Ces navigateurs demandent un manifeste contenant un nom, des icônes de 192 et 512 pixels, une URL de démarrage et un mode d’affichage. Le service worker reste en revanche indispensable pour le hors ligne et les notifications.

Exemple de manifeste minimal :

{
  "name": "Mon application",
  "short_name": "MonApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b3d91",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Quels navigateurs et appareils prennent en charge les PWA ?

La prise en charge a nettement progressé depuis 2021, mais elle n’est toujours pas uniforme. Voici l’état décrit par la documentation MDN et WebKit.

Plateforme	Installation	À savoir
Android (Chrome, Samsung Internet)	Oui, comme une vraie application (WebAPK)	La meilleure intégration. Les autres navigateurs Android créent un simple raccourci
iPhone et iPad	Oui, via « Sur l’écran d’accueil »	Depuis iOS 16.4, l’installation est possible depuis Safari, Chrome, Edge ou Firefox, et les notifications push fonctionnent pour les applications ajoutées à l’écran d’accueil
Ordinateur (Chrome, Edge)	Oui	Sur Windows, macOS, Linux et ChromeOS
Mac (Safari)	Oui, via Fichier > Ajouter au Dock	Depuis macOS Sonoma (Safari 17), même sans manifeste
Firefox sur ordinateur	Non	Le site fonctionne, mais ne s’installe pas à partir du manifeste

Sur iPhone, la limite principale reste l’installation : il n’y a pas de bouton d’installation automatique, l’utilisateur doit passer par le menu Partager. Il faut donc l’accompagner avec un message explicatif. L’affirmation de notre ancien article selon laquelle une PWA « consomme beaucoup de batterie » n’a pas de fondement général : la consommation dépend de ce que fait l’application, pas du format.

Quel framework choisir pour créer une PWA ?

agence de creation de Progressive Web Apps — **Progressive Web Apps**

Le framework sert à construire l’interface et la logique de l’application. La partie « PWA » (manifeste et service worker) s’ajoute par-dessus, avec un outil dédié. Les critères de choix sont donc ceux de tout projet web : compétences de l’équipe, taille de la communauté, besoin de rendu côté serveur pour le référencement, taille du code envoyé au navigateur. Notre comparatif Angular vs React vs Vue détaille ces différences.

Framework	Outil PWA associé	Pour qui
Angular	`ng add @angular/pwa` (officiel)	Grosses applications métier, équipes habituées à TypeScript et à un cadre très structuré
React avec Next.js	Manifeste intégré à Next.js, Serwist pour le hors ligne	Projets qui ont besoin de référencement et d’un grand vivier de développeurs
Vue avec Nuxt	vite-plugin-pwa (module Nuxt)	Équipes qui veulent une prise en main rapide et une documentation claire
Svelte avec SvelteKit	Service worker natif de SvelteKit, ou vite-plugin-pwa	Applications légères, où le poids du code compte (réseaux lents)
Ionic (avec Angular, React ou Vue)	Intégré	Applications qui doivent exister à la fois en PWA et dans les stores, via Capacitor

Angular

Maintenu par Google, Angular est le plus complet des frameworks de cette liste : routage, formulaires, requêtes, tests, tout est fourni. Il a été l’un des premiers à proposer un service worker officiel, qu’une seule commande installe et configure (ng add @angular/pwa). Contrepartie : une courbe d’apprentissage plus longue, et TypeScript obligatoire. À noter, AngularJS (la version 1, citée dans notre ancienne version) est une technologie différente, qui n’est plus maintenue : les projets actuels utilisent Angular.

React et Next.js

React, créé par Facebook (Meta), est une bibliothèque d’interface plutôt qu’un framework complet : on l’associe généralement à Next.js, qui ajoute le routage et le rendu côté serveur. La documentation officielle de Next.js propose un guide PWA complet : manifeste généré par le framework, notifications push, service worker. Pour le cache hors ligne, elle oriente vers Serwist. Atout de React : le plus grand vivier de développeurs, et la possibilité de partager une partie de la logique avec une application React Native.

Vue et Nuxt

Vue, créé par Evan You et porté par sa communauté, est apprécié pour sa simplicité et sa documentation. Avec Nuxt (son équivalent de Next.js) et le module vite-plugin-pwa, transformer l’application en PWA demande très peu de configuration. C’est souvent le choix le plus rapide pour un MVP ou une application de taille moyenne.

Svelte et SvelteKit

Svelte fonctionne comme un compilateur : il transforme les composants en JavaScript optimisé au moment de la construction, ce qui produit des fichiers plus légers. SvelteKit détecte automatiquement un fichier src/service-worker.js, le compile et l’enregistre. Notre ancien article lui reprochait l’absence de TypeScript : ce n’est plus le cas, Svelte prend en charge TypeScript. Sa communauté reste plus petite que celles de React ou Vue.

Ionic

Ionic n’est pas un framework concurrent des précédents mais une bibliothèque de composants d’interface d’allure mobile, utilisable avec Angular, React ou Vue. Associé à Capacitor, il permet de publier la même application en PWA et dans les stores. Il intéresse les projets qui veulent une présence dans l’App Store sans maintenir deux développements natifs. Sur les applications très graphiques (vidéo, animations lourdes), les performances restent en retrait d’une application native.

Quels outils pour transformer un site en PWA ?

Workbox : la bibliothèque de Google qui simplifie l’écriture des service workers (stratégies de cache, préchargement). Beaucoup d’outils ci-dessous l’utilisent en interne.
vite-plugin-pwa : génère le manifeste et le service worker pour les projets construits avec Vite. Il existe des intégrations pour Vue, React, Svelte, SvelteKit, Nuxt, Astro, Qwik, Remix ou Laravel.
Serwist : l’outil que la documentation Next.js cite pour ajouter un cache hors ligne complet.
PWABuilder : projet open source porté à l’origine par Microsoft. On saisit l’URL de son site, l’outil évalue ce qui manque, génère un manifeste et un service worker, puis peut empaqueter la PWA pour le Microsoft Store, Google Play ou les casques Meta Quest. Pratique pour tester le format avec peu d’investissement.

Notre ancien article recommandait Webpack pour « ajouter le hors ligne ». C’est inexact : Webpack est un outil d’assemblage du code, le hors ligne vient du service worker. Les projets récents utilisent d’ailleurs plus souvent Vite.

Pour un site WordPress, des extensions ajoutent un manifeste et un service worker basique. C’est suffisant pour permettre l’installation sur l’écran d’accueil, mais cela ne transforme pas un site vitrine en application : l’intérêt d’une PWA vient des fonctions que l’on construit dedans.

Quels sont les avantages et les limites des PWA ?

Progressive Web Apps agence web montpellier — **Progressive Web Apps**

Les avantages

Une seule base de code pour Android, iPhone et ordinateur, au lieu de trois développements.
Pas de validation par les stores : une correction est en ligne dès sa publication, sans attendre une revue d’Apple ou de Google.
Pas de téléchargement préalable : l’utilisateur utilise l’application dès le premier clic sur un lien, puis l’installe s’il le souhaite.
Visible dans Google : chaque page reste une page web indexable, à condition de soigner le rendu côté serveur.
Rapide et légère : le cache du service worker rend les visites suivantes quasi instantanées, même sur un réseau faible.
Moins chère à développer et à maintenir que deux applications natives, pour un périmètre fonctionnel comparable.

Les limites

Installation moins évidente sur iPhone, qui passe par le menu Partager.
Accès incomplet au matériel : Bluetooth, NFC, capteurs avancés, intégrations profondes au système restent réservés en tout ou partie aux applications natives, surtout sur iOS.
Pas de vitrine dans les stores par défaut, ce qui prive d’un canal de découverte (on peut contourner partiellement avec PWABuilder ou Capacitor).
Stockage hors ligne limité selon le navigateur : une PWA n’est pas adaptée à une application qui télécharge beaucoup de médias pour une lecture hors ligne.
Pas de sens pour tous les sites : si votre site est surtout consulté ponctuellement via Google, une PWA ne sera qu’une version plus complexe du même site.

PWA ou application native : que choisir ?

Votre situation	Notre recommandation
Outil interne, application métier, espace client	PWA : installation simple, mise à jour instantanée, un seul développement
Service utilisé régulièrement, avec des notifications (réservation, suivi de commande)	PWA, éventuellement publiée ensuite dans les stores
Budget limité, besoin de tester un marché	PWA en MVP, puis application native si l’usage le justifie
Usage intensif du matériel (Bluetooth, capteurs, vidéo lourde)	Application native ou multiplateforme (Flutter, React Native)
Découverte par les stores indispensable à votre modèle	Application native ou PWA empaquetée

Pour trancher, posez-vous trois questions. Vos délais : une PWA se livre plus vite qu’une application par plateforme. Vos fonctionnalités : plus elles dépendent du matériel du téléphone, plus le natif se justifie. Votre budget : un seul développement coûte moins cher que deux. Pour les applications mobiles classiques, notre article sur les avantages et inconvénients d’une application mobile complète ce tableau.

Chez Osmova, on développe des applications web sur mesure, et la PWA est souvent la réponse la plus raisonnable pour un outil métier ou un espace client : on vous dit franchement si votre projet a vraiment besoin d’une application native.

Un exemple de PWA connue ?

L’exemple le plus cité reste celui d’Uber. En 2017, l’entreprise a reconstruit son site mobile de réservation (m.uber) en PWA pour les marchés où les réseaux sont lents et les téléphones peu puissants. Selon son équipe technique, le cœur de l’application ne pesait que 50 ko, ce qui permettait de commander une course en trois secondes environ sur un réseau 2G typique. C’est l’illustration du principal atout des PWA : toucher des utilisateurs qui n’installeraient jamais une application lourde.

Comment tester et évaluer une PWA ?

Pendant des années, on recommandait l’audit « PWA » de Lighthouse. Il n’existe plus : Lighthouse a retiré la catégorie PWA dans sa version 12, en 2024. Pour tester une PWA aujourd’hui :

Ouvrez les outils de développement de Chrome, onglet Application : la section Manifest signale les erreurs d’installabilité, la section Service workers montre l’état du script et permet de simuler le hors ligne.
Continuez à utiliser Lighthouse pour la performance, l’accessibilité et le SEO, qui restent essentiels pour une PWA.
Testez l’installation sur de vrais appareils : un Android avec Chrome, un iPhone (menu Partager, puis « Sur l’écran d’accueil »), un ordinateur.
Coupez le réseau et vérifiez ce qui s’affiche : une page hors ligne claire vaut mieux qu’une erreur du navigateur.

Questions fréquentes

Quel langage utiliser pour une Progressive Web App ?

Les langages du web : HTML, CSS et JavaScript (ou TypeScript). Le côté serveur peut être écrit dans n’importe quel langage (PHP, Python, Node.js), il n’a pas d’incidence sur le caractère PWA de l’application.

Qu’est-ce que le manifeste d’une PWA ?

C’est un fichier JSON, souvent nommé manifest.webmanifest ou manifest.json, qui regroupe les informations nécessaires à l’installation : nom, icônes, couleurs, page de démarrage et mode d’affichage.

Une PWA fonctionne-t-elle sur iPhone ?

Oui. Elle s’installe depuis le menu Partager, et depuis iOS 16.4 elle peut recevoir des notifications push une fois ajoutée à l’écran d’accueil. Certaines fonctions matérielles restent en revanche indisponibles.

Peut-on publier une PWA sur Google Play ou l’App Store ?

Oui, en l’empaquetant. PWABuilder génère des paquets pour Google Play et le Microsoft Store ; Capacitor permet de publier la même base de code sur l’App Store. Apple applique alors ses règles de validation, qui exigent une vraie valeur ajoutée par rapport au site.

Une PWA est-elle bonne pour le référencement ?

Elle n’est ni meilleure ni moins bonne par nature : Google indexe ses pages comme celles d’un site. Ce qui compte, c’est que le contenu soit rendu côté serveur (ou pré-rendu) et que les pages soient rapides, ce que permettent Next.js, Nuxt ou SvelteKit.

Combien coûte une PWA ?

Le prix dépend des fonctionnalités, pas du format PWA, qui ajoute peu de travail à une application web bien conçue. Comptez surtout les écrans, les intégrations (paiement, CRM, API) et la maintenance.

Progressive Web Apps : définition, frameworks et quand en créer une

Qu’est-ce qu’une Progressive Web App ?

Comment fonctionne une PWA ?

Quels navigateurs et appareils prennent en charge les PWA ?