Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Progressive web apps

Une application Web progressive (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 toucher n'importe qui, n'importe où et sur n'importe quel appareil, le tout avec un seul codebase. Une fois installée, une PWA ressemble à n'importe quelle autre application, en particulier :

Elle comporte une icône sur l'écran d'accueil, le lanceur d'applications, le lanceur d'applications ou le menu Démarrer.
Il s'affiche lorsque vous recherchez des applications sur l'appareil.
Il s'ouvre dans une fenêtre autonome, complètement séparée de l'interface utilisateur du navigateur.
Il a accès à des niveaux d'intégration plus élevés avec l'OS, par exemple 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. Son caractère universel sur les appareils et les systèmes d'exploitation, son modèle de sécurité axé sur l'utilisateur et le fait qu'aucune entreprise ne contrôle ses spécifications ni son implémentation en font une plate-forme puissante pour la diffusion de logiciels.

Grâce à la connectivité inhérente du Web, vous pouvez effectuer des recherches sur le Web et partager ce que vous avez trouvé avec n'importe qui, où que vous soyez. Chaque fois que vous accédez à un site Web, vous voyez 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.

Les applications Web peuvent toucher n'importe qui, n'importe où et sur n'importe quel appareil avec un seul code base. Pour les développeurs, le Web offre également un mécanisme de déploiement transparent et simple. Vous n'avez pas besoin de packaging, ni d'examen supplémentaire du contenu, et vous n'avez pas besoin de retarder les mises à jour. Les utilisateurs bénéficient toujours de la dernière version lorsqu'ils consultent votre application. Avec 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 qui était impossible à surmonter il y a quelques années.

Applications spécifiques à une plate-forme

Les applications spécifiques à une plate-forme, aussi bien sur mobile que sur ordinateur, sont réputées pour leur richesse et leur fiabilité. Ils sont omniprésents, sur les écrans d'accueil, les stations d'accueil et les barres des tâches. Elles fonctionnent indépendamment de la connexion réseau et se lancent dans leur propre expérience 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 spécifiques à la plate-forme, vous pouvez prendre des photos, lire des titres listés sur l'écran d'accueil ou contrôler la lecture multimédia dans une autre application. Ces applications semblent faire partie de l'appareil sur lequel elles s'exécutent.

L'un des défis 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, voire possible, de migrer une application Android vers iOS ou iOS vers Windows ou ChromeOS sans avoir à créer une application à partir de zéro.

Le meilleur des deux mondes

Si vous considérez les applications de plate-forme et les applications Web en termes de fonctionnalités et de couverture, les applications de plate-forme représentent le meilleur des fonctionnalités, tandis que les applications Web représentent la meilleure couverture. Les progressive web apps se situent à la croisée des fonctionnalités des applications de plate-forme et de la couverture des applications Web. Une progressive web app inclut des fonctionnalités des deux mondes.

Web

Linkability
Accessible par défaut
Omniprésent
Facile à déployer
Mise à jour facile
Tout le monde peut publier

Applications de plate-forme

Compatible avec le mode hors connexion
Hautes performances
Intégration d'appareils
Expérience autonome
Icône "Installée"
Riche et fiable

L'adoption présente des avantages

Hulu, un service de streaming vidéo aux États-Unis, a créé une version Progressive Web App de son expérience pour remplacer ses applications pour ordinateur, qui recevaient de mauvais avis et étaient peu utilisées. Comme indiqué lors de la conférence Google I/O 2019, un développeur a pu effectuer des recherches et implémenter cette expérience à partir de son application Web existante en deux semaines.

En cinq mois, 96 % des utilisateurs de l'ancienne application ont adopté la PWA, avec une augmentation de 27 % du nombre de visites répétées et de 5,5 % de l'engagement. Étant donné qu'ils se trouvent dans le lanceur d'applications et sur les barres des tâches, les PWA sont plus faciles à retrouver que s'ils ne résidaient que dans un onglet.

JD.ID, une plate-forme d'e-commerce en Indonésie qui propose des services de livraison pour de nombreux produits, souhaitait développer sa présence en ligne en se concentrant sur les performances et une expérience solide, 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 vidéo en ligne intégré au navigateur, qui permet à tous de raconter des histoires à partager via des vidéos. La rétention des utilisateurs a augmenté de 9 % avec la PWA par rapport à l'application de bureau standard. Les installations de la PWA ont augmenté de 97 % chaque mois au cours des cinq premiers mois de son lancement.

Gravit Designer de Corel Corporation est un outil de conception vectorielle puissant et de qualité professionnelle qui sert des dizaines de milliers d'utilisateurs actifs par jour qui exigent un logiciel d'illustration vectorielle riche, abordable et accessible. Depuis l'ajout d'une PWA en tant qu'option d'installation pour les utilisateurs, ils ont constaté que les utilisateurs de la PWA sont 24 % plus actifs, que la PWA compte 31 % d'utilisateurs réguliers en plus et que les utilisateurs de la PWA sont 2,5 fois plus susceptibles d'acheter Gravit Designer PRO, par rapport à leurs autres plates-formes et options d'installation.

Le streaming change la donne

L'industrie des plates-formes de streaming, y compris le cloud gaming et le calcul à distance, est un excellent exemple de la puissance des applications Web progressives. Depuis 2021, la plupart des fournisseurs de jeux cloud ont lancé des applications Web progressives, qui vous permettent de jouer à des jeux de console sur n'importe quel appareil avec un simple navigateur ou une installation de PWA : iPhone, Android, iPad, ordinateur portable, 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 via le navigateur en tant que PWA. Ils offrent tous une expérience de qualité avec des performances proches des performances natives sur toutes les plates-formes grâce à des technologies Web telles que WebRTC, WebAssembly et les API GamePad.

Défis

Après avoir décrit les avantages de l'utilisation de la plate-forme Web pour publier des PWA, il est également important de connaître les défis auxquels vous pouvez être confronté.

Compatibilité multinavigateur

Apple est une entreprise essentielle pour le monde multi-appareil, puisqu'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 compatible hors connexion depuis 2018 sur Safari pour iPhone et iPad.

Toutefois, l'implémentation des spécifications PWA par Apple ne comporte pas de nombreuses fonctionnalités que possèdent d'autres navigateurs, en particulier ceux basés sur le moteur Chromium.

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

Les limites incluent le manque de notifications push, d'API d'intégration (telles que Web Bluetooth ou WebNFC) et de techniques de promotion de l'installation qui aident les utilisateurs à savoir qu'ils peuvent installer le site Web actuel pour bénéficier d'une expérience d'application. De plus, plusieurs bugs sont associés aux 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 d'un navigateur ou d'un OS est publiée. Vous devez toujours proposer des solutions de remplacement ou des expériences alternatives lorsqu'une fonctionnalité n'est pas disponible.

Sensibilisation aux 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é des utilisateurs. Certains propriétaires d'entreprises ne connaissent pas les PWA ou ont des idées fausses sur leurs avantages et leurs défis.

Lorsque vous publiez une PWA, votre prochain défi consiste à vous assurer que les utilisateurs comprennent que le site Web peut être installé, ce qui leur permet de bénéficier d'une expérience d'application installée.

Le défi de l'installation est plus important sur certaines plates-formes, telles qu'iOS et iPadOS. 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 qu'une application Web. Par conséquent, le contenu et les services s'exécutent selon les spécifications et protocoles standards. Par conséquent, une PWA s'exécute techniquement partout où le Web s'exécute. Vous n'avez pas besoin que la plate-forme soit compatible avec une "spécification PWA".

Toutefois, lorsque nous parlons de PWA et de compatibilité, nous pensons généralement aux fonctionnalités permettant de dépasser les limites du navigateur et des contextes en ligne uniquement : installation d'icônes et compatibilité hors connexion.

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

97 _%

Navigateurs accessibles hors connexion

88 _%

Les utilisateurs Web peuvent installer une PWA

Données provenant de StatCounter et de Can I Use

Ordinateurs de bureau et portables

Dans un monde d'appareils multifacteurs, il est difficile de savoir ce qu'est un appareil de bureau. Toutefois, du moins du point de vue du système d'exploitation, ces navigateurs et plates-formes de téléchargement 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 avec sa fenêtre autonome.

Appareils mobiles

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

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

Dans la vidéo suivante, l'utilisateur installe une PWA à partir du navigateur sur un appareil mobile à l'aide de la boîte de dialogue du navigateur et du menu Ajouter à l'écran d'accueil.

Autres appareils

D'autres petits appareils sont compatibles avec les PWA, comme les consoles de jeu (Xbox avec le Microsoft Store) ou les appareils XR (Microsoft Hololens, projets pour l'Oculus de Facebook). Toutefois, le reste des appareils équipés d'un navigateur n'accepte 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 leurs limitations spécifiques. Cette capacité à fonctionner sur plusieurs appareils vous permet de créer des parcours multi-appareils, où l'utilisateur peut démarrer une tâche sur un appareil et la terminer sur un autre, avec des données synchronisées entre eux, avec exactement la même application déployée.