Une progressive web app (PWA, applications web progressive en français1) est une application web qui consiste en des pages ou des sites web, et qui peuvent apparaître à l'utilisateur de la même manière que les applications natives ou les applications mobiles.
Une progressive web app (PWA, applications web progressive en français1) est une application web qui consiste en des pages ou des sites web, et qui peuvent apparaître à l'utilisateur de la même manière que les applications natives ou les applications mobiles. Ce type d'applications tente de combiner les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages de l'expérience offerte par les appareils mobiles2,3.
Une PWA se consulte comme un site web classique, depuis une URL sécurisée mais permet une expérience utilisateur similaire à celle d'une application mobile, sans les contraintes de cette dernière (soumission aux App-Stores, utilisation importante de la mémoire de l'appareil…).
Elles proposent de conjuguer rapidité, fluidité et légèreté tout en permettant de limiter considérablement les coûts de développement4 : plus besoin de faire des développements spécifiques pour les applications en fonction de chacune des plateformes : iOS, Android… Les avancées récentes du navigateur et de la disponibilité des employés de service et des API Cache et Push ont permis aux développeurs Web de permettre aux utilisateurs d'installer des applications Web sur leur écran d'accueil, de recevoir des notifications push et même de travailler en mode hors connexion. C'est d'ailleurs une technologie qui est mise en avant par Google, les Progressive Web Apps selon Google.
Une étude a montré que, en moyenne, une application perd 20% de ses utilisateurs pour chaque étape entre le premier contact de l'utilisateur avec l'application et l'utilisateur commence à utiliser l'application. Un utilisateur doit d'abord trouver l'appli dans un magasin d'applications, la télécharger, l'installer puis enfin l'ouvrir. Vous pouvez en savoir plus sur cet article présentant les PWA face aux applications mobiles natives.
Google a mis en place une liste de contrôles établissant une note via l’outil Lighthouse intégré dans le navigateur chrome qui permet de vérifier automatiquement le respect des caractéristiques suivantes :
Progressive : les applications web progressives fonctionnent sur n'importe quel périphérique en intégrant les fonctionnalités disponibles du navigateur et de l'appareil utilisé.
Sécurisée : Afin de répondre aux problématiques de sécurité des échanges entre les utilisateurs et les sites, les PWA doivent être fiables et sûres par la mise en place d’un protocole HTTPS.
Engageante : elles proposent une expérience utilisateur immersive en plein écran et un réengagement facilité grâce à l'envoi de notifications push web.
Installable : l'utilisation d'un fichier manifest permet aux PWA de proposer, à l'instar d'une application mobile native, l'installation d'un raccourci sur l'écran d'accueil du terminal mobile.
Rapidité : d'après Google, 53 % des internautes abandonnent un site si le chargement prend plus de trois secondes. Une fois le site chargé, la navigation doit se faire de manière rapide et fluide.
Optimisation pour le référencement : utilisant les technologies du web, les progressive web app peuvent être référencées sur les moteurs de recherche de la même manière que n'importe quel site web classique.
Indépendante de la connexion : Grâce à la gestion du cache via l’utilisation d’un Service Worker, une fois le contenu chargé une première fois, il est possible de le consulter même dans les zones de faible connexion réseau.
Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : Secure contexts (HTTPS), un ou plusieurs Service Workers et un fichier manifest.
Secure contexts (HTTPS) : L'application web doit être servie sur un réseau sécurisé. Être un site sécurisé est non seulement une bonne pratique, mais cela fait également de votre application web un site de confiance, surtout si les utilisateurs ont besoin d'effectuer des transactions sécurisées. La plupart des fonctionnalités liées à un PWA telles que la géolocalisation et même les Service Workers ne sont disponibles qu'une fois l'application chargée à l'aide de HTTPS.
Service workers : Un Service Worker est un script qui permet d'intercepter et de contrôler la façon dont un navigateur web traite ses requêtes réseau et la mise en cache des ressources. Avec les Service Workers, les développeurs web peuvent créer des pages web rapides et fiables et des expériences hors ligne.
Manifest file : Un fichier JSON qui contrôle la façon dont votre application apparaît à l'utilisateur et garantit que les applications web progressives sont découvrables. Il décrit le nom de l'application, l'URL de démarrage, les icônes et tous les autres détails nécessaires pour transformer le site web en un format similaire à celui d'une application.
Les PWA doivent pouvoir être découvertes, installées, reliées, indépendantes du réseau, progressives, réengageables, réactives et sûres. Pour en savoir plus sur la signification de ces éléments, lisez Avantages des applications web progressives.
Les Desktop Progressive Web Apps ? ( PWA ) sont un excellent moyen multiplateforme et multinavigateur de créer des applications avec un modèle de sécurité centré sur la sécurité et la confidentialité des utilisateurs et d'obtenir un partage intégré avec la liaison inhérente au Web. Créez ou améliorez votre application Web existante avec des API modernes pour leur donner des capacités, une fiabilité et une facilité d'installation similaires à celles d'une application de bureau. Les PWA sont le meilleur moyen de fournir votre application Web pour Chrome OS.
Sur Chrome OS, la puissance de la plate-forme Web est à l'avant-plan ; les applications Web sont une fonctionnalité de base de la plate-forme. Les PWA installés s'affichent dans le lanceur Chrome OS, peuvent être épinglés sur l'étagère et s'intègrent profondément au reste du système d'exploitation.
Commencez par consulter la liste de contrôle PWA ? et assurez-vous que votre application Web satisfait à la liste de contrôle PWA de base . Vous pouvez utiliser PWABuilder ? pour vous aider à fournir une page hors ligne personnalisée et rendre votre application installable. Ensuite, utilisez ces recommandations pour faire briller votre PWA sur Chrome OS.
Tout comme Chrome sur Android, désormais, si votre PWA répond aux exigences Chrome actuelles, l' événement « beforeinstallprompt » se déclenchera. À partir de là, vous pouvez utiliser l'objet d'événement d'invite pour contrôler l'utilisateur invité à « installer » votre PWA.
Vous pouvez également diriger les utilisateurs vers le menu "Paramètres" de Chrome, les trois points verticaux dans le coin supérieur droit. À partir de là, ils verront une option de menu pour installer votre application Web progressive.
Une fois l'application installée, elle est disponible à partir des points de lancement d'application Windows standard, du menu Démarrer et du bureau. L'utilisateur peut gérer l'application à partir de ces icônes et même l'épingler à la barre des tâches.
Ce que vous n'avez actuellement pas la possibilité de faire, c'est de conduire une expérience de tuile en direct. Vous êtes limité à une icône statique. Même lorsque vous ajoutez la PWA installée au menu Démarrer, vous ne verrez pas l'icône de l'application. Au lieu de cela, il utilise l'icône Chrome. C'est parce que pour Windows, vous lancez Chrome, pas une véritable instance de votre application.
Sur Android, vous obtenez des expériences d'application standard pour les applications Web progressives. C'est parce que Chrome crée un WebAPK, qui est une version modifiée d'un package APK utilisé pour les applications Android natives.
Les PWA Chrome Desktop sont toujours des signets Web glorifiés, et non un package « webAPPX ». Sur Windows, les fichiers APPX sont similaires à Android APK, ce sont des packages d'applications que vous installez à partir du Windows Store.
Une fois que le concept d'un webAPPX est disponible, je m'attends à ce que Chrome et Edge soient pris en charge, mais jusqu'à ce jour glorieux, nous avons une super expérience de signet.
Étant donné que la PWA de bureau se trouve dans le menu Démarrer, vous pouvez interagir avec elle comme avec les autres applications Windows. Cela signifie que vous pouvez cliquer avec le bouton droit sur l'icône du menu Démarrer et exécuter en tant qu'administrateur, épingler à la barre des tâches, ouvrir l'emplacement de la PWA sur votre système.
Ne vous laissez pas berner par l'option "désinstaller", cela ouvrira le panneau de configuration du système où vous pourrez désinstaller des applications. Vous n'y trouverez pas vos PWA. Espérons que cela sera ajouté une fois que nous aurons une expérience « WebAPPX ».