Le vieux rêve qui consiste à mobiliser les technologies web pour mettre le développement mobile à portée de tous, a pris une toute nouvelle direction avec l’émergence vers 2015 des PWA ou Progressive Web Apps. Prometteuse pour les uns, racoleuse pour les autres, cette sorte de troisième voie, une fois de plus née chez Google, bénéficie d’une forte popularité chez les éditeurs d’applications mobiles qui y voient, bien souvent, une alternative économique aux applications traditionnelles.

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

La PWA ou Progressive Web App, encore appelée application web progressive en français, est un format d’application à vocation mobile conçue par les équipes de Google. Son fonctionnement repose sur des standards empruntés au monde du web. C’est pourquoi, la PWA fonctionne exclusivement par l’intermédiaire d’un navigateur Internet (Firefox, Chrome, Edge, Safari etc.). Ça n’est donc ni un framework ni un langage de programmation. La promesse de la PWA est de se substituer aux applications mobiles via un développement basé sur la déclaration d’un manifeste et l’utilisation de services javascript qui, à l’instar d’un proxy, vont permettre d’agir sur le cache du navigateur. Ces fameux service workers vont donc permettre de détourner, entre autres, les mécanismes de mémoire cache et d’affichage afin de simuler l’expérience proposée par une application mobile conventionnelle (des applications mobiles pour iOS et Android par exemple respectivement élaborées avec Swift et Kotlin). Les applications mobiles fonctionnent en dialoguant directement avec le système d’exploitation de l’appareil qui les embarquent. A contrario, les PWA ont besoin d’un intermédiaire, en l’occurrence le navigateur Internet. Leur potentiel est donc limité aux possibilités offertes par ce dernier. Pour autant, il ne faut pas confondre PWA et le futur standard Web app. C’est bien ce dernier qui est en cours de définition par le W3C (un consortium qui regroupe notamment des enseignes telles que Google, Microsoft, Mozilla, Intel…).

La PWA dialogue avec le navigateur, là où l’application mobile est en relation directe avec le système d’exploitation.

Quelles sont les caractéristiques techniques des PWA ?

Les progressive web apps sont avant tout des sites web !

Levons tout d’abord un premier malentendu. Les progressive web apps sont des sites web. Elles reposent sur les mêmes technologies que les sites Internet et fonctionnent exclusivement par l’intermédiaire d’un navigateur (qui peut-être visible ou non). Les considérer comme des applications mobiles au même titre que les apps natives est une erreur pourtant très répandue. Il serait plus juste de les envisager comme une forme évoluée du RWD (Responsive Web Design). En substance, à l’instar des sites web, les PWA offrent un large panel de possibilités. En appliquant des recettes SEO bien connues des référenceurs, on pourra faire en sorte par exemple, qu’elles soient indexées par les moteurs de recherche. A contrario, pour tout ce qui concerne les fonctions intrinsèques du smartphone et ses ressources systèmes, le format PWA trouve vite ses limites.

Le centre d’aide en ligne de Google précise que les PWA sont des sites web qui permettent de bénéficier d’un accès plus rapide et de fonctionnalités supplémentaires

Pas de PWA sans HTTPS

Deux raisons imposent l’utilisation de HTTPS. Puisqu’une PWA est avant tout un site web, le chiffrage des communications entre le navigateur et le serveur via TLS/SSL fait désormais consensus. Pour autant, s’il s’agit bel et bien d’une bonne pratique, ça n’est pas la raison principale pour laquelle il faut recourir au protocole HTTPS. En fait, plusieurs fonctions comme la géolocalisation et les service workers ne fonctionneront qu’à la condition de sécuriser l’application.

Le fichier manifeste, la carte d’identité de l’application web progressive

Le manifeste est une spécification du W3C en cours de normalisation, ce qui contribue à créer un amalgame entre le futur standard et le format popularisé par Google. Ce fichier JSON est une sorte de carte d’identité de la Progressive Web App. Par son biais, il va, par exemple, permettre de proposer le dépôt d’un icône sur l’écran d’accueil du smartphone. Le fichier manifeste devrait également contenir des précisions quant au nom de l’application, l’identité de son auteur ainsi qu’une brève description. D’autres caractéristiques peuvent être indiquées mais elles n’apportent pas fondamentalement de plus-value pour l’instant.

Avertissement : les développeurs doivent être conscients que cette spécification n’est pas stable. Cependant, certains aspects de cette spécification sont disponibles dans au moins un navigateur […]. Les développeurs qui ne participent pas aux discussions pourront constater que cette spécification évolue de manière incompatible. Les fournisseurs intéressés par l’implémentation de cette spécification […] doivent s’abonner au référentiel sur GitHub et prendre part aux discussions.

Source : W3C – mai 2021.

Agir sur le cache navigateur grâce aux service workers

Les service workers sont des fichiers JavaScript qui vont fonctionner à l’instar d’un proxy entre le navigateur, le réseau et le serveur d’hébergement de l’application. Leur intérêt principal consiste à agir sur le cache navigateur afin de simuler une navigation hors-ligne. Pour autant, d’autres usages des service workers autorisent la synchronisation de données en arrière-plan, le pré-chargement de données, voire générer des messages push. Ceci étant dit, comme le précise à juste titre Mozilla, les service workers sont des fonctions encore expérimentales. Il faut donc avoir à l’esprit que leur interprétation n’est pas uniforme selon que vous utilisez telle ou telle combinaison de système d’exploitation et de navigateur.

Schéma illustrant le fonctionnement d’un service worker paramétré pour proposer le mode off-line.

Les quatre fonctionnalités qui font aujourd’hui parler des PWA

De nombreuses enseignes prestigieuses ont testé le formidable potentiel offert par la PWA : Forbes, Trivago, ou encore Starbucks. Pourtant, seuls quatre usages se distinguent et semblent, à eux seuls, résumer le potentiel d’attraction des applications web progressives.

1. Accéder plus rapidement au site web grâce à l’installation d’un icône sur l’écran d’accueil du smartphone

Ludique en apparence, cette fonctionnalité améliore, parfois de manière spectaculaire, rétention et engagement des utilisateurs. Du strict point de vue marketing, le caractère « gadget » de cette petite fonctionnalité ne devrait pas être sous-estimé. Pour autant, ça n’est pas réellement une innovation puisque la fonction est au moins aussi ancienne que la méthode Ajax.

2. Reproduire l’expérience immersive des applications mobiles en affichant un site web en plein écran

Cette deuxième caractéristique est sans doute celle qui rencontre le plus de succès. À l’instar de l’icône, ça n’est pas non plus une réelle innovation puisque l’on connaît l’existence en HTML5 de l’API full-screen depuis le début des années 2010. Pour autant, ne boudons pas notre plaisir, cette fonctionnalité permet de proposer une expérience de navigation immersive assez proche, visuellement parlant, de celles offertes par les applications mobiles natives. Un bon point pour la PWA. On peut néanmoins s’interroger sur sa pertinence ; en effet, le navigateur internet et ses différents composants (champ de saisie de l’URL, menu, boutons de navigation etc.) sont aussi des repères rassurants, de surcroît personnalisables par l’internaute lambda. Les faire disparaître n’est pas forcément gage de succès. C’est sans compter, enfin, sur les conséquences qu’une telle démarche peut engendrer en matière d’Accessibilité numérique.

3. Générer des notifications

La génération de notifications est une des plus belles promesses des PWA. À ce jour pourtant, le dispositif ne fait pas d’ombre à ceux offerts par les applications mobiles natives. À l’instar des autres fonctions promises, les notifications push fonctionneront à la condition surtout de préférer Android. Pour bien apprécier les capacités des PWA, c’est plus précisément la combinaison du système d’exploitation avec le navigateur qu’il faut prendre en compte. Commençons par Android : l’OS mobile de Google offre la possibilité de générer des notifications push avec Chrome, Opera et Safari. Ça se complique avec Firefox depuis peu. Comme nous le verrons, plus en détail ci-dessous, Mozilla semble faire marche arrière toute ! Si l’on se penche sur iOS, force est de constater que, malgré les nombreuses annonces faites depuis plusieurs années, les notifications push ne fonctionnent, au mieux, qu’au prix de méthodes de contournements bien fastidieuses sur lesquelles, de surcroît, on ne pourra pas miser sur le long terme.

4. Consulter le site web via le mode hors-ligne

Le mode hors-ligne est littéralement le « fond de commerce » de l’application web progressive. Comme vous avez pu le noter ci-avant, grâce au paramétrage des service workers, il va être possible d’une part, de proposer le téléchargement de l’application puis d’autoriser d’autre part sa consultation en l’absence de connexion internet. À l’heure où le mode off-line se généralise chez la plupart des éditeurs de services premium (YouTube premium, Spotify premium, Disney+), cette fonctionnalité apporte un réel avantage aux sites web qui la mettent à contribution. Un bon point pour la PWA.

Quelles sont les limites des Progressive Web Apps ?

La PWA : tout sauf un standard !

L’application web progressive n’est pas un standard mais bel et bien un format conçu chez Google. S’il profite jusqu’à présent du soutien de Microsoft, c’est beaucoup plus timoré du côté de Cupertino. Il faut déjà avoir installé l’icône d’une PWA depuis un iPhone pour mesurer le degré de motivation et d’investissement d’Apple. De son côté, Mozilla a clairement annoncé qu’il n’a pas vocation à prendre en charge la PWA. Depuis février 2021, Firefox ne permet plus de faire fonctionner une application web progressive ! Il faut enfin avoir à l’esprit que le W3C œuvre de son côté à la mise au point d’un véritable standard baptisé Web App. Le consortium est d’ailleurs particulièrement prudent sur les avancées de ce dernier. Il vous invite également à en faire autant.

Vers un futur consensus ?

Même s’il fait beaucoup parler de lui, le format PWA n’est pas un standard universel. Le sera t-il à plus long terme ? Rien n’est impossible et les travaux du W3C pourraient peut-être prendre cette direction le moment venu. Mais aujourd’hui ce n’est pas le cas, et les blocages que l’on peut observer (Mozilla et Apple en tête) nous laissent à penser que la situation ne devrait pas évoluer dans ce sens à court terme tout du moins.

Dave Townsend : « Il n’y a actuellement aucun plan de prise en charge de PWA dans Firefox »

Source : Mozilla
Le centre d’aide en ligne de Google précise que Chrome pour iOS n’est pas compatible avec les PWA.

Des applications téléchargeables depuis Google Play mais pas sur l’App Store

Google a logiquement ouvert les portes de son store d’applications mobiles aux PWA. Apple s’y refuse toujours, très certainement pour privilégier son écosystème. Il est encore trop tôt pour se prononcer sur les politiques appliquées par les autres stores d’applications. On peut toutefois d’ores et déjà en déduire, de ce point de vue, que les applications mobiles natives continuent d’offrir un avantage loin d’être négligeable. Nul ne sait, si ce phénomène n’aura pas tendance à s’amplifier dans les prochaines années.

Des icônes qui ne sont pas toujours faciles à télécharger

Comme nous l’avons indiqué ci-avant, à l’instar des applications mobiles natives, les PWA offrent la possibilité d’installer l’icône d’une application sur la tableau de bord du smartphone, de la tablette voire de l’ordinateur de son choix. L’apparente simplicité de cette fonctionnalité ne doit pas occulter l’impact qu’elle a auprès des utilisateurs. C’est un véritable avantage offert à celles et ceux qui souhaitent développer une stratégie de proximité avec leurs clients et/ou utilisateurs. Pourtant cette promesse n’est que partiellement respectée. Avec Android, vous ne rencontrerez pas de problème particulier et profiterez d’une expérience très similaire à celle offerte par une application mobile native. Vous pourrez même télécharger votre application depuis Google Play. Par contre, si l’iPhone n’empêche pas fondamentalement l’utilisation de l’icône, il faut reconnaître que cette fonction est bien moins pratique sur iOS.

Des notifications limitées au bon vouloir des navigateurs

Les applications web progressives offrent théoriquement la possibilité d’envoyer des notifications. Il est effectivement assez aisé de générer des alertes email quel que soit d’ailleurs le système d’exploitation employé (Android, iOS etc.). Les notifications in-app s’avèrent également tout à fait fonctionnelles quel que soit la combinaison d’appareil, d’OS et de navigateur que vous choisissez. A contrario, à l’instar du téléchargement d’icône et finalement de la plupart des autres fonctions offertes par les PWA, les notifications push s’avèrent quasiment impossibles sur un iPhone. Vous l’aurez compris, le problème ne se pose pas avec Android. Pour autant, il faut bien avoir à l’esprit qu’il n’est pas possible de refuser les notifications de Chrome et d’accepter celles d’une PWA.

21 usages et la façon dont les PWA les implémentent

  1. Accès au carnet d’adresse : ne comptez pas exploiter le contenu de votre carnet d’adresse avec une PWA. Aujourd’hui c’est tout simplement impossible ;
  2. Bluetooth : plus de 70% des navigateurs sont compatibles bluetooth ;
  3. Captures audio et vidéo : ce sont, là encore des fonctionnalités d’ores et déjà forts répandues sur le web. La majorité des applications tolère convenablement ces usages ;
  4. Communication temps réel (chat audio / vidéo) : pas de problème de ce côté là. Ce sont des fonctions déjà très répandues sur le web. La majorité des navigateurs tolère donc ces fonctions au sein des PWA ;
  5. Communication inter-app : la communication entre deux PWA, ne posera pas plus de problème qu’entre deux sites web. A contrario, la communication entre une PWA et une application native pourrait s’avérer un peu plus ardue ;
  6. Détection de mouvement : la détection de mouvement est globalement bien supportée par 90% des navigateurs ;
  7. Géolocalisation : c’est une fonction déjà fort répandue sur les sites web de dernière génération. Elle est donc tout naturellement supportée par de très nombreux navigateurs ;
  8. Geofencing : le geofencing fait partie des ces fonctions qui ne sont pas accessibles aux PWA ;
  9. Gestion USB : c’est assez partiellement toléré par les PWA ;
  10. NFC : le NFC n’est tout simplement pas supporté par la PWA ;
  11. Notifications : les notifications sont globalement bien supportées par les PWA. Seuls 15% environ des navigateurs ne les tolère pas ;
  12. Mode off-line : il est bien supporté par une majeure partie des navigateurs ;
  13. Mode plein-écran : on pourrait croire que cette fonction est bien supportée par la majeure partie des navigateurs. Ce n’est pas tout à fait la réalité ;
  14. Planification de tâches :c’est une fonction non supportée par les PWA ;
  15. Paiement : les API de paiement sont compatibles avec les PWA ;
  16. Push : plus de 50% des navigateurs supportent les notifications push. Il faut pourtant avoir à l’esprit qu’il s’agit essentiellement de navigateurs Chrome ;
  17. Réalité augmentée : l’AR est déjà bien représentée sur le web. Elle se trouve tout naturellement bien supportée par prêt de 3 navigateurs sur 4 ;
  18. Réalité virtuelle : la VR repose sur des fondamentaux assez similaires à ceux de la réalité augmentée. Elle est donc supportée dans les mêmes proportions ;
  19. Reconnaissance vocale : à l’instar du bluetooth, plus de 70% des navigateurs sont compatibles avec la reconnaissance vocale ;
  20. SMS / MMS : À l’instar du geofencing, pas de SMS / MMS avec les PWA ;
  21. Synchronisation de données en arrière plan : c’est une exclusivité Android. Sur iOS, la mise-à-jour d’une PWA exige qu’on l’affiche au premier plan.

En conclusion

Bien qu’il ne s’agisse pas réellement d’un standard, les applications web progressive ouvrent incontestablement de nouvelles perspectives en matière d’expérience web mobile. Si le champ des possibles est très prometteur, dans les faits, les usages se cantonnent encore souvent à quatre fonctionnalités clefs :

  • installation de l’icône sur le smartphone de l’utilisateur ;
  • affichage plein-écran ;
  • mode hors-ligne ;
  • notifications.

Dans un contexte que vous maîtrisez, la PWA s’avèrera un allié de premier plan. Autrement dit, si votre application est destinée à des possesseurs d’Android, ce format est fait pour vous. De même, si vous avez pour objectif de réaliser le POC d’une application mobile (Proof Of Concept) avec le concours de développeurs web. Si enfin, vous possédez un site web RWD et que vous souhaitez proposer une expérience mobile encore plus poussée, orientez-vous sans hésitation vers la PWA. A contrario, si vous avez besoin d’une application mobile mais que votre unique prisme est économique, deux limites s’imposeront rapidement à vous. En dehors d’Android, le support de la PWA est encore très partiel. Enfin, n’oubliez pas que les fonctions intrinsèques du smartphone comme l’accès au carnet de contact ou le NFC ne sont toujours pas accessibles aux PWA.

Cet article vous a plu ? Profitez d’encore plus de contenus sur les technologies mobiles en vous abonnant à Ikonnect, la newsletter mensuelle d’Ikomobi

Sources :