Tout ce qu'il faut savoir sur les Progressive Web Apps

Les Progressive Web Apps proposent un bon nombre d’avantages aussi bien pour vous en tant que créateur, que pour les utilisateurs finaux de ces applications. Visibilité, design, performances, engagement sont autant de bénéfices que vous pouvez mettre à profit pour combler vos utilisateurs et enrichir votre business.

1. Vous gagnez en visibilité et engagez vos utilisateurs

a. Multi-Plateforme : gagnez du temps et de l’argent

Les Progressive Web Apps peuvent être exécutées sur n’importe quel terminal, et ont la capacité de s’adapter totalement à l’écran sur lequel elle sera lue. Ce fonctionnement présente deux avantages majeurs.

Le premier est évidemment que la PWA est développée avec les technologies du web. Son installation et son téléchargement sont donc différents de ceux d'une app native. L'offre de compétences dans les technologies web est supérieure à la demande. Cela coûte globalement moins cher de développer une application web progressive qu'une app native, d'autant que si on veut cibler iOS et Android, il faudra réaliser 2 développements natifs distincts.

Le deuxième avantage repose sur le fait que les Progressive Web Apps, Les PWAs s'exécutent dans une app universelle, les navigateurs web. Tous les devices connectés à internet en possèdent un, aussi bien mobile, tablette que desktop. Encore une fois, en ne développant plus qu’une seule app, vous rationalisez vos coûts.

b. Exécutée sur le web : maîtrisez votre application et sa distribution

Les Progressive Web Apps sont distribuées à la manière d’un site web, c’est à dire par le biais d’une URL appelée par un navigateur. Vous l’aurez compris, nous mettons ici le doigts sur un énorme avantage des Progressive Web Apps: vous n’avez pas besoin ici de passer par l’App Store ou Google Play pour distribuer votre application. Elles sont disponibles sur le web mobile et tablette.

En quoi est-ce un avantage?

Premièrement au niveau des coûts : vous n’avez pas de frais supplémentaires à payer pour pouvoir distribuer votre application (actuellement 25€ pour Google, et 89€/an pour Apple).

Aussi, vous êtes totalement libre et indépendant quand au design, aux fonctionnalités, éléments et au contenu de votre application : vous pouvez la distribuer librement sans avoir besoin de la soumettre à une révision quelconque.

Ce deuxième point permet de mettre en lumière un avantage non négligeable de ce mode de distribution : l’actualisation de votre PWA. Toutes vos améliorations sont appliquées immédiatement, vous n’avez plus besoin d’attendre ou de passer par une révision. En outre, notez que les applications natives sont du code compilé, ce qui signifie que pour profiter de vos mises à jours, vos utilisateurs devront télécharger le nouveau code sur leur terminal, ce qui n’est absolument pas le cas avec une Progressive Web App.

Ainsi vos utilisateurs pourront jouer un rôle déterminant dans l’amélioration de votre app. Prendre en compte leurs feedbacks est beaucoup plus rapide avec une Progressive Web App puisque vous pouvez apporter des modifications instantanément à votre app en fonction de leurs retours. Vous pouvez réaliser des tests utilisateurs, analyser les statistiques qui en découlent et découvrir ce que vous avez à améliorer. En d’autres termes, avec une PWA, si quelque chose ne plait pas ou ne fonctionne pas, vous pouvez très rapidement réajuster le tir, maximisant l’engagement de vos utilisateurs !

c. Facile à promouvoir : gagnez en visibilité

L'intégralité des contenus que vous produisez pour votre Progressive Web App est indexable par les moteurs de recherche. Votre app possède la même visibilité qu'un site web dans Google. La facilité d’accès des PWA est un avantage indéniable pour votre business puisqu’on peut tout à fait imaginer d’appliquer aux apps les techniques d’optimisation largement répandues sur le web.

Comme nous le disions plus haut, les PWAs sont accessibles grâce à une URL, comme un site web. Référencement naturel, achat de liens sponsorisés, retargeting... Tous ces outils Marketing deviennent alors vos meilleurs alliés !

N’oubliez pas également que l’accès aux PWA se fait par le biais d'une simple URL, que vous pouvez facilement glisser n'importe où, et surtout dans des endroits que l'on néglige souvent. Utilisation de liens de référence, posts sur les réseaux sociaux, inscriptions sur des annuaires, campagnes de mails sont autant de moyens de diffuser l’URL de votre Progressive Web App, et de réduire la distance entre vous et vos potentiels utilisateurs : une fois votre URL exposée, vos utilisateurs seront à portée de clic. Nous le disions plus haut, les Progressive Web Apps obtiennent en moyenne 3 fois plus de visibilité que les apps natives, un chiffre qui peut peser dans la balance au moment de développer votre application.

d. Des fonctionnalités avancées : engagez et fidélisez votre audience

Une autre caractéristique fondamentale des Progressive Web Apps est incontestablement son aspect engageant. Alors qu’elles étaient jusqu’ici réservées aux apps natives, les développeurs peuvent désormais activer les notifications push pour les PWAs également.

Nous discuterons du fonctionnement des notifications push pour le web plus loin, mais sachez d’ores et déjà que les apps qui ont déjà activé cette fonctionnalité ont pu constater un bond de 72 % dans le temps passé dans l’app et une augmentation de 50 % des visites récurrentes (Why Build a Progressive Web App? par Udacy).

Cela n’est plus un débat, les notifications push sont un élément essentiel à prendre en compte dans la construction de votre communication avec vos utilisateurs. Incontournables dans le monde du natif, elles s’invitent désormais non pas seulement sur dans les applications web mobile, mais aussi sur desktop. Ce nouveau concept va révolutionner l’intégralité des usages sur le web, pourquoi ne pas en profiter dès maintenant?


2. Vos utilisateurs profitent d’une expérience sans pareil

a. Fluide, intuitive : une expérience app like

Une PWA c’est avant tout une expérience utilisateur. C’est donc avec l’utilisateur à l’esprit que les développeurs se tournent vers un panel de technologies issues du web, d’outils et de bonnes pratiques, pour établir en retour de nouveaux standards, sur le web, et sur tous les écrans.

Du côté pratique, les Progressive Web Apps imitent la navigation des apps natives dans le but d’offrir des interactions fluides, à la manière d’une app. Pour les utilisateurs récurrents cela sous-entend que les éléments clé de l’app seront affichés immédiatement, dans la mesure où ils ont déjà été mis en cache, pour une performance accrue, le contenu étant lui récupéré à chaque utilisation - nous verrons ce point en détails plus loin.

Pensées initialement pour le mobile, les Progressive Web Apps offrent une expérience utilisateur parfaite, en ramenant les codes du développement mobile sur tous les autres types d'écran. Cette nouvelle façon d’envisager la conception aussi bien mobile que desktop correspond tout à fait aux nouvelles attentes des utilisateurs, et participe donc grandement à leur fidélisation.

b. Accessible et légère : une consultation sans contrainte

Vous l’aviez compris, avec les Progressive Web Apps, vos utilisateurs sont seulement à 1 clic de votre contenu et ils y accèdent à la seconde, sur n’importe quel appareil (mobile, tablette, desktop, laptop), avec petit ou grand écran, grâce à leur navigateur. Les Progressive Web Apps ne nécessitent pas d'installation pour être consultée, permettant ainsi à vos utilisateur de consulter votre contenu facilement et sans aucune contrainte d’installation de l'app.

 

 

Si vos utilisateurs sont séduits par votre contenu, ils peuvent accéder encore plus facilement à votre app : les Progressive Web Apps peuvent être installées directement sur l'écran d'accueil de vos utilisateurs de façon instantanée, sans nécessiter de téléchargement et sans avoir besoin de passer par les stores.

Aussi leur légèreté incomparable ôte toute contrainte de mémoire sur les devices au moment de l'installation. Vos utilisateurs n’ont donc plus à se soucier de l’espace mémoire disponible sur leur appareil. Quand un utilisateur tente d’accéder à une page en particulier, seulement les éléments nécessaires pour afficher cette pages sont chargés, préservant ainsi l’espace mémoire des appareils. A titre d’exemple, en moyenne, une PWA prend 200x moins d’espace qu’une application native iOS.

c. Rapide : un chargement instantané

Les PWAs sont construites dans l’idée de privilégier l’utilisateur en lui offrant une expérience au sommet. A ce titre une mise à jour dynamique du contenu est assurée afin que l’utilisateur ait toujours accès au contenu le plus récent.
Les Progressive Web Apps ont la possibilité d’exécuter du code JavaScript sans avoir besoin d’être au premier plan, voire sans qu’aucune page web ne soit ouverte dans le navigateur. Ainsi, la mise à jour régulière des données de l’ap est rendue possible, permettant ainsi l’affichage direct des données à jour à l’arrivée de l’utilisateur. Les performances de l’app s’en trouvent également améliorées grâce au chargement en amont aussi bien des ressources statiques que des pages complètes.

Finis donc les temps de chargements interminables, vos utilisateurs navigueront sur votre PWA avec une fluidité et une rapidité sans pareil sur le web.

d. Fonctionnement hors ligne : zéro frustration pour l’utilisateur

L’une des caractéristiques majeures d’une Progressive Web App, c’est sa capacité à fonctionner en l’absence d’une connexion internet stable. A la première visite de l’utilisateur, le système de mise en cache permettra de stocker localement une partie ou l’intégralité du contenu disponible. Ainsi, à la prochaine visite, et même sans aucune connexion, l’utilisateur pourra avoir accès à ce contenu, et pourra naviguer entre les pages de la PWA.

Vous l’avez bien compris, les Progressive Web Apps sont à mi-chemin entre les sites web et les apps natives, utilisant le meilleur de ces deux concepts. Leur fonctionnement reposent donc sur la combinaison inédite de concepts existants qui, mis en commun leur permet d’atteindre des performances incroyables.

1. Comment une web app devient-elle Progressive?

a. Les Challenges des Progressive Web Apps

Pour pouvoir être qualifiée de PWA, une application web doit absolument répondre à certains critères, lui permettant de fournir l’expérience utilisateur incomparable qui caractérise les Progressive Web App.
Par définition une PWA doit donc être:

 

 

 

 

 

 

 

 

 

Maintenant que nous avons à l’esprit les principes clé que doit respecter une Progressive Web App, découvrons ce qui, concrètement, lui permet de relever ces challenges.


b. Le fonctionnement des Progressive Web Apps

Les Progressive Web App sont développées à partir de langage web client, qui vont permettre de gérer l'interface utilisateur de chaque page.

Chez GoodBarber par exemple, nous avons choisi de développer nos Progressive Web Apps en JavaScript, et d’utiliser Angular 4.0, un framework développé par Google qui fournit aux développeurs les outils pour concevoir des expériences utilisateurs web comparables à celles des apps natives.

Nous avons choisi de créer des apps isomorphiques, c’est--à-dire des apps capables d’exécuter le code JavaScript aussi bien coté server (Server Side Rendering - SSR) que coté client (Client Side Rendering - CSR)

Pour que vous compreniez bien quels sont les avantages de ce mécanisme, voici comment fonctionnent les Progressive Web Apps GoodBarber:

La première page de l’application est générée côté serveur (SSR) permettant ainsi aux robots des moteurs de recherche d’indexer une page déjà entièrement construite. Mais l’application effectue également des calculs à l’intérieur du navigateur (CSR), permettant ainsi à l’application de fonctionner sans réseau, puisque tout le JavaScript de la PWA aura été téléchargé en arrière plan et stocké en cache.

c. Architecture des Progressive Web Apps

Les Progressive Web Apps fonctionnent, comme nous le disions plus haut sur la combinaison de concepts existant:

Il s'agit du squelette de votre application, à l’intérieur duquel seront diffusées vos données. L’App Shell contient les éléments principaux d’interface et les composants strictement nécessaire pour le fonctionnement de l’interface utilisateur. Ces éléments y sont conservés localement, tandis que les contenus sont récupérés dynamiquement depuis une API.

L’App Shell permet, à partir du deuxième passage dans l’application, un affichage rapide de l’application, une consommation de bande passante la plus faible possible, un chargement des ressources statiques depuis le cache local, et enfin la séparation du contenu de la navigation, permettant ainsi d’obtenir des temps de chargement de l’application extrêmement courts.

 Il s’agit de la base technique de nombreuses fonctionnalités qui distinguent les PWAs des sites web classiques. Il se positionne entre l’app et le navigateur (ou le réseau lorsqu’il est disponible) et peut fortement modifier le comportement de l’app grâce aux nombreuses possibilités : Les Service Workers rendent possible l'utilisation de la PWA en mode hors-ligne. Parmi d'autres tâches qu'ils accomplissent, les Service Worker sont aussi un rouage essentiel pour la réception des notifications push dans votre PWA.

Votre PWA est décrite dans un fichier JSON appelé le manifeste (Web App Manifest). Il s’agit d’un fichier contenant les métadonnées nécessaires à l'indexation de votre app dans un Store comme le Windows Store, ou à l'installation de votre app sur l'écran d'accueil de votre utilisateur. Il s’agit donc d’un fichier descriptif qui permettra de donner un rendu plus natif à l’application avec un affichage plein écran, des icônes identifiables, ou encore la possibilité de modifier l’orientation de l’écran.


d. Les Service Workers

Les Service Workers sont un élément clé des PWA, ils méritent donc un focus afin d’avoir conscience des nouvelles possibilités qu’ils offrent au web. D’un point de vue technique, un Service Worker est un script exécuté en arrière-plan par un navigateur. Il est capable d’exécuter des actions en réponse à des évènements comme des requêtes réseau, ou des infos transmises par le système d’exploitation (modifications de connectivité par exemple). Il permet aux développeurs de construire des fonctionnalités avancées comme la gestion de notifications push et la gestion du cache. Une fois le Service Worker installé dans le navigateur, il effectue les tâches qui lui sont assignées de manière indépendante, et ce même si l'utilisateur ne navigue pas sur le site. Le fonctionnement d’un service worker s’approche de celui d’un serveur proxy, il va servir d’intermédiaire entre le navigateur et Internet afin d’améliorer l’expérience utilisateur, notamment en stockant les données d’une page web en cache.

En synthèse, un Service Worker est finalement un simple fichier JavaScript qui s'exécute en arrière plan et qui se déclenche à l’appel de certains évènements. Il va intercepter les requêtes faites au serveur et sera de capable de renvoyer une réponse soit en transmettant la ressource reçue par le serveur, soit en fournissant une version locale de la ressource si elle a déjà été demandée.

Dans le cas des Progressive Web Apps GoodBarber par exemple, il va permettre d'optimiser la manière dont le navigateur va afficher les polices de caractères en les téléchargeant lors de la première visite de l'utilisateur et en les stockant en cache. Lors des visites ultérieures, la police sera servie localement, ce qui rendra l'affichage de la police instantanée, garantissant un affichage de l'application plus rapide.

Comme vous pouvez le voir, Apple n’a pas encore ouvert les portes de son fameux navigateur aux service workers et donc à toute la puissance des PWAs. Mais bonne nouvelle Safari et Safari iOS ne devraient pas tarder à apparaître dans la liste des navigateurs compatibles. Concernant le navigateur Edge, les Service Workers sont d’ores et déjà compatibles sur Android et d’autres développements sont en cours.

Comme nous l'avons dit, le Service Worker permet de construire des fonctionnalités avancées comme la synchronisation en arrière plan, permettant l'affichage direct des données à jour à l'arrivée de l'utilisateur (grâce à la mise à jour régulière de ces données en arrière plan). La synchronisation permet donc d'offrir une expérience utilisateur extrêmement fluide en augmentant considérablement la rapidité d'exécution de l'application.

L’utilisation des Service Workers implique que les Progressive Web Apps doivent obéir à des spécifications en matière de sécurité. Les Service Workers ont la capacité d’effectuer des opérations très puissantes dans le navigateur. Les données de l’utilisateurs doivent impérativement être chiffrées afin de s’assurer que ce pouvoir est utilisé à bon escient.

L’installation du Service Worker, indispensable à l’utilisation des fonctionnalités majeures de la PWA ne peut se faire que si la page web est servie en HTTPS. Une condition donc nécessaire pour servir l’intégralité de votre PWA avec ce protocole sécurisé, ce qui constitue au passage un facteur positif pour le référencement de vos pages.

2. Les fonctionnalités propres aux PWAs

a. Notifications push

Cette fonctionnalité est rendue possible grâce à la capacité des service workers à fonctionner en arrière plan. Pour permettre cette utilisation, deux dispositifs vont fonctionner de façon complémentaire: L’API Push et l'API Notification.

Tous les navigateurs existants, à l'exception de Safari, s’appuient donc sur les Service Workers pour parvenir à ce résultat. Safari quant à lui utilise un système propre à Apple appelé APNs qui permet à un prestataire de services externe d’envoyer des messages ou des commandes à n’importe quel device Apple fonctionnant sous OS X. Il est important de noter que les notifications pour les sites web n’apparaissent pas sur les devices fonctionnant sous iOS (mobile).

En d’autres termes, le service worker va traiter une notification envoyée par un service de push via l’API Push. Ensuite, grâce à l’API notification, il va afficher cette notification à l’utilisateur.

b. Fonctionnement hors ligne

L'accessibilité hors ligne s'appuie également sur le Service Worker qui, une fois installé dans le navigateur va gérer la mise en cache des fichiers de l'app, et intercepter les requêtes réseau puis effectuer des actions appropriées selon que le réseau soit disponible ou non. Cette fonctionnalité permet à la fois de rendre possible la consultation de l'application sans connexion, mais aussi de profiter d’une expérience utilisateur améliorée puisque, même avec une connexion à Internet, certains fichiers n’auront plus besoin d’être chargés depuis le serveur web, puisque déjà stockés localement.