Une Progressive Web App (PWA) est une application développée avec des langages de développement web (HTML5, CSS, JavaScript) exécutée depuis un navigateur web, qui se présente comme une application mobile native (notifications push, vision plein écran, GPS géolocalisation, mise à jour du contenu en arrière-plan, fonctionnement hors ligne, icône applicative, caméra…).
Les fichiers HTML, les fichiers CSS et les images sont stockés dans la mémoire cache du navigateur ce qui permet une meilleur contrôle de l’appel réseau. Dès la première visite, le contenu est mis en cache sur le périphérique (poids minime) pour faciliter les prochaines visites.
Une PWA utilise un ou plusieurs «Service Workers», des scripts qui fonctionnent en parallèle de la page web et donnent accès aux fonctionnalités. Basée sur une architecture App Shell, le contenu et la structure de l’application sont séparés pour gagner en temps de chargement.
Elle occupe moins d’espace sur le périphérique de l’utilisateur par rapport à une application native. Elle s’actualise automatiquement lors de son chargement.
Une PWA peut être développée avec un framework tel que Vue.JS, Angular, ou React.
Créer une PWA avec React en utilisant la bibliothèque create-react-app
npx create-react-app my-pwa --pwa
Exemple concret de PWA
Simple PWA 100% Lighthouse (Stéphane Arrami)