Progressive web apps

Une progressive web app (PWA) est une application Web qui utilise l'amélioration progressive pour offrir aux utilisateurs une expérience plus fiable, utilise de nouvelles fonctionnalités pour offrir une expérience plus intégrée et peut être installée. Comme il s'agit d'une application Web, elle peut atteindre n'importe qui, n'importe où, sur n'importe quel appareil, à l'aide d'un seul codebase. Une fois installée, une PWA ressemble à n'importe quelle autre application. Plus précisément:

  • Elle possède une icône sur l'écran d'accueil, dans le lanceur d'applications, sur le lanceur d'applications ou dans le menu Démarrer.
  • Elle s'affiche lorsque vous recherchez des applications sur l'appareil.
  • Elle s'ouvre dans une fenêtre autonome, entièrement séparée de l'interface utilisateur du navigateur.
  • Elle a accès à des niveaux d'intégration supérieurs au système d'exploitation, tels que la gestion des URL ou la personnalisation de la barre de titre.
  • L'application fonctionne hors connexion.

La plate-forme Web

Le Web est une plate-forme incroyable. Sa combinaison d'universalité basée sur les appareils et les systèmes d'exploitation, son modèle de sécurité centré sur l'utilisateur et le fait qu'aucune entreprise ne contrôle ses spécifications ou son implémentation en font une plate-forme puissante de livraison de logiciels.

Associé au lien inhérent du Web, il vous permet d'effectuer des recherches et de partager ce que vous avez trouvé avec qui vous voulez, où que vous soyez. Chaque fois que vous consultez un site Web, il s'agit de la dernière version déployée par l'éditeur. Votre expérience sur ce site peut être aussi temporaire ou permanente que vous le souhaitez.

Avec un seul codebase, les applications Web peuvent toucher n'importe qui, n'importe où et sur n'importe quel appareil. Pour les développeurs, le Web offre également un mécanisme de déploiement simple et transparent. Il n'y a aucun packaging, aucun examen supplémentaire du contenu ni retard des mises à jour. Les utilisateurs bénéficient toujours de la dernière version lorsqu'ils accèdent à votre application. Grâce à de nouvelles fonctionnalités et techniques, une application Web peut désormais vous permettre d'interagir ou de consulter du contenu même hors connexion, un obstacle qu'il était impossible de surmonter il y a quelques années.

Applications spécifiques à une plate-forme

Les applications spécifiques à une plate-forme, sur mobile comme sur ordinateur, sont connues pour être riches et fiables. Ils sont toujours présents, sur les écrans d'accueil, les quais et les barres des tâches. Ils fonctionnent quelle que soit la connexion réseau et sont lancés de façon autonome. Ils peuvent lire et écrire des fichiers à partir du système de fichiers local, accéder au matériel connecté via USB, série ou Bluetooth, et interagir avec les données stockées sur vos appareils, telles que les contacts et les événements d'agenda. Dans les applications propres à une plate-forme, vous pouvez prendre des photos, lire des titres figurant sur l'écran d'accueil ou contrôler la lecture de contenus multimédias pendant que vous utilisez une autre application. Ces applications font partie de l'appareil sur lequel elles s'exécutent.

Un défi pour les applications spécifiques à une plate-forme est qu'elles ne sont pas compatibles avec plusieurs plates-formes et appareils. Il est donc difficile, si possible, de migrer une application Android vers iOS, ou iOS vers Windows ou ChromeOS sans créer de nouvelle application.

Le meilleur des deux mondes

Si l'on considère les applications de plate-forme et les applications Web en termes de capacités et de portée, les applications de plate-forme représentent les meilleures capacités, tandis que les applications Web représentent la couverture la plus large. Les progressive web apps se situent à l'intersection des fonctionnalités des applications de plate-forme et de la portée des applications Web. Une progressive web app inclut des fonctionnalités provenant des deux mondes.

Web

  • Facilité d'association
  • Accessible par défaut
  • omniprésente
  • Facile à déployer
  • Faciles à mettre à jour
  • Tout le monde peut publier

Applications de plate-forme

  • Disponible hors connexion
  • Hautes performances
  • Intégration d'appareils
  • Expérience autonome
  • Icône Installé
  • Riche et fiable

L'adoption a ses avantages

Hulu, un service de streaming vidéo aux États-Unis, a créé une progressive web app de son expérience pour remplacer ses applications de bureau qui étaient peu utilisées par les utilisateurs. Comme indiqué lors de la conférence Google I/O 2019, un développeur a pu effectuer des recherches et mettre en œuvre cette expérience en deux semaines à partir de son application Web existante.

En cinq mois, 96% des utilisateurs de son ancienne application avaient adopté la PWA, avec une augmentation de 27% des visites de retour et une augmentation de 5,5% de l'engagement. Elles se trouvent dans le lanceur d'applications et dans la barre des tâches, ce qui rend les PWA plus faciles à accéder que si elles se trouvaient simplement dans un onglet.

JD.ID, une plate-forme d'e-commerce indonésienne qui propose des services de livraison pour de nombreux produits, souhaitait développer sa présence en ligne en mettant l'accent sur les performances et l'expérience solide et indépendante du réseau pour sa PWA. Grâce à cette expérience améliorée, l'entreprise a augmenté son taux de conversion global sur mobile de 53 % et 200% pour les utilisateurs ayant installé l'application, et le nombre d'utilisateurs actifs par jour de 26%.

Clipchamp est un éditeur de vidéos en ligne intégré au navigateur et conçu pour les ordinateurs de bureau. Il permet à quiconque de raconter des histoires qui méritent d'être partagées en vidéo. La fidélisation des utilisateurs a augmenté de 9% avec les PWA par rapport aux utilisateurs d'applications de bureau standards. De plus, les installations de PWA ont augmenté de 97% chaque mois au cours des cinq premiers mois de lancement.

Gravit Designer de Corel Corporation est un outil de conception vectorielle puissant qui est adapté aux ordinateurs. Il sert des dizaines de milliers d'utilisateurs actifs par jour à la demande d'un logiciel d'illustration vectorielle enrichi, abordable et accessible. Depuis que les utilisateurs ont ajouté une PWA en tant qu'option d'installation, le taux d'activité des PWA augmente de 24 %. Les PWA enregistrent 31% d'utilisateurs réguliers en plus. De plus, les utilisateurs de PWA sont 2,5 fois plus susceptibles d'acheter Gravit Designer PRO que sur les autres plates-formes et options d'installation.

Le streaming révolutionnaire

Le secteur des plates-formes de streaming, y compris le cloud gaming et l'informatique à distance, illustre parfaitement la puissance des progressive web apps. Depuis 2021, la plupart des fournisseurs de jeux dans le cloud lancent les progressive web apps, qui vous permettent de jouer à des consoles depuis n'importe quel appareil, via un navigateur ou via une installation de PWA : iPhone, Android, iPad, ordinateurs portables, Mac ou PC. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now et BlueStacks X proposent des solutions de cloud gaming sur navigateur sous la forme de PWA. Ils offrent tous une excellente expérience avec des performances proches du format natif sur toutes les plates-formes, grâce à des technologies Web telles que WebRTC, WebAssembly et les API GamePad.

défis

Après avoir abordé les avantages de l'utilisation de la plate-forme Web pour publier des PWA, il est également important d'être conscient des défis que vous pouvez rencontrer.

Compatibilité multinavigateur

Apple est une entreprise essentielle pour l'univers multi-appareil. elle possède iOS, iPadOS, macOS et Safari. Bien qu'Apple n'ait jamais utilisé le terme PWA en public, l'entreprise prend en charge les technologies permettant de rendre une PWA installable et hors connexion depuis 2018 sur Safari pour iPhone et iPad.

Toutefois, l'implémentation par Apple des spécifications des PWA ne prend pas en compte de nombreuses fonctionnalités d'autres navigateurs, en particulier ceux qui fonctionnent avec le moteur Chromium.

Au milieu, nous avons aussi Firefox et son moteur Gecko avec des implémentations comprenant davantage de spécifications de PWA sur Android et moins de fonctionnalités d'installation sur ordinateur.

Les limites incluent l'absence de notifications push, les API d'intégration (telles que Web Bluetooth ou WebNFC) et les techniques de promotion d'installation qui indiquent aux utilisateurs qu'ils peuvent installer le site Web actuel pour bénéficier d'une expérience dans l'application. En outre, il existe plusieurs bugs avec des fonctionnalités implémentées.

Comme pour tout développement Web, il est obligatoire de tester votre expérience sur chaque plate-forme lorsque vous publiez votre PWA et lorsqu'une nouvelle version majeure du navigateur ou de l'OS est publiée. Vous devez toujours fournir des solutions de remplacement ou d'autres expériences lorsqu'une fonctionnalité n'est pas disponible.

Notoriété des PWA

En tant que développeur de PWA, vous rencontrerez probablement un problème de notoriété, tant du côté de l'entreprise que du côté utilisateur. Certains propriétaires d'entreprise ne connaissent pas les PWA ou ont une idée fausse de la puissance et des défis des progressive web apps.

Lorsque vous publiez une PWA, la prochaine étape consiste à vous assurer que les utilisateurs comprennent que le site Web peut être installé, ce qui conduit à une expérience d'installation de l'application.

Le défi d'installation est plus important sur certaines plates-formes, telles qu'iOS et iPadOS, et parfois les concepteurs UX incluent des écrans qui expliquent à l'utilisateur comment installer l'application.

Compatibilité

N'oubliez pas qu'une progressive web app n'est rien d'autre qu'une application Web : les contenus et les services s'exécutent donc en conformité avec les spécifications et les protocoles standards. Par conséquent, techniquement, une PWA fonctionne partout où le Web fonctionne. Vous n'avez donc pas besoin que la plate-forme soit compatible avec les "spécifications des PWA".

Toutefois, lorsqu'il s'agit de PWA et de compatibilité, nous réfléchissons généralement aux fonctionnalités permettant de dépasser les limites du navigateur et des contextes exclusivement en ligne: installation d'icônes et assistance hors connexion.

En plus de la compatibilité de la plate-forme Web classique, vérifions la compatibilité des fonctionnalités de base de l'application, telles que l'installation d'icônes et les fonctionnalités hors connexion.

    97 %

    Navigateurs compatibles hors connexion

    88 %

    Les utilisateurs Web peuvent installer une PWA

Données provenant de StatCounter et "Can I Use".

Ordinateurs de bureau et portables

Dans un monde d'appareils multifacteur, il est difficile de savoir ce qu'est un appareil de bureau. Néanmoins, du point de vue du système d'exploitation, ces navigateurs et magasins sont compatibles avec l'installation de PWA et les fonctionnalités hors connexion:

Windows 10 et 11
Google Chrome (à partir de la version 73), Microsoft Edge (à partir de la version 79), Microsoft Store
ChromeOS
navigateur Chrome intégré (à partir de la version 72), Play Store (à partir de la version 85)
macOS, Linux, et Windows 7 et 8.x
Google Chrome (à partir de la version 73), Microsoft Edge

Dans la vidéo suivante, l'utilisateur installe une PWA à partir du navigateur sur un ordinateur de bureau, puis y accède comme n'importe quelle autre application dans sa fenêtre autonome.

Appareils mobiles

Concernant les téléphones mobiles et les tablettes, une progressive web app peut être installée avec des fonctionnalités hors connexion dans les navigateurs et plates-formes de téléchargement d'applications suivants:

iOS et iPadOS
Safari (depuis iOS 11.3), l'AppStore (depuis iOS/iPadOS 14, avec certaines limitations), configuration mobile pour la distribution aux entreprises
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, le navigateur Huawei, Baidu, UCWeb, Play Store (à partir de la version 72 avec Google Chrome installé ou les navigateurs compatibles avec TWA), Galaxy Store, iFrame Play d'entreprise pour la distribution aux entreprises.

Dans la vidéo suivante, l'utilisateur installe une PWA à partir du navigateur sur un appareil mobile via la boîte de dialogue du navigateur et via le menu Add to Home screen (Ajouter à l'écran d'accueil).

Autres appareils

D'autres petits appareils sont compatibles avec les PWA, comme les consoles de jeu (Xbox avec Microsoft Store) ou les appareils XR (Microsoft Hololens, les forfaits Oculus de Facebook). Toutefois, les autres appareils dotés d'un navigateur n'acceptent généralement pas les PWA, y compris les suivants:

  • Consoles de jeu
  • Smart TV
  • Montres connectées
  • Voitures

Votre PWA fonctionnera toujours dans le navigateur de tous les appareils, avec des limites spécifiques. Cette capacité à fonctionner sur de nombreux appareils vous permet de créer des parcours multi-appareils, où l'utilisateur peut commencer une tâche sur un appareil et la terminer sur un autre. Les données sont synchronisées sur ces appareils, à l'aide de la même application déployée.

Ressources