Coucou 🙂,
Après un article bien complet sur iOS et Symfony-UX/Turbo, on revient sur un truc un peu plus léger.
Bien plus ouvertes, les PWA peuvent "s'installer" sur les terminaux Android des utilisateurs et aussi sur les ordinateurs.

Qu'est-ce qu'une progressive web app, PWA ?

Tout d'abord, j'aimerais vous dire que ce que je vous explique ci-dessous, c'est surtout vrai sous Android, sur iOS Safari n'est pas si ouvert, enfin, si, mais pour installer une PWA il n'y a pas de simple bouton à clique, Apple demande aux utilisateurs de faire eux-mêmes la manipulation (plusieurs cliques) pour installer une PWA sur l'écran d'accueil. Du coup, dans le monde réel personne ne les utilise sur IOS.

Alors, qu'est-ce qu'une PWA exactement ? En termes simples, c’est une application web qui utilise les technologies web les plus récentes pour permettre une expérience utilisateur presque identique à celle d’une application native mobile. Oui, vous m'avez bien entendu, les PWA peuvent fonctionner hors ligne, envoyer des notifications push, et même être installées sur l'écran d'accueil de votre smartphone, tout comme une application native. Sympa, non ?

Prenons un exemple concret. Imaginez que vous avez une boutique en ligne de chaussettes à motifs de bananes. Vos clients adorent vos chaussettes (parce que, qui n'aime pas les bananes ? 😛), mais ils aimeraient pouvoir naviguer sur votre site même quand leur connexion Internet fait des siennes.
Voilà où une PWA entre en scène ! Avec une PWA, vos clients peuvent continuer à admirer vos chaussettes même sans connexion Internet et recevoir des notifications dès que vous lancez un nouveau modèle. Auparavant, c'était réservé aux applications natives!

Mais ce n’est pas tout ! Les PWA ont aussi des superpouvoirs pour les développeurs. Elles sont beaucoup moins coûteuses et plus rapides à développer comparé aux applications natives. En plus, avec une seule version, elles sont compatibles avec tous les systèmes d'exploitation (enfin, comme j'ai dit plus haut, attention à iOS).

Et l'ultime avantage, c’est que les PWA ne nécessitent pas d’être téléchargées depuis un store d’applications. Finis les longs processus de validation (oui, oui, si vous avez déjà soumis des applications sur les stores, vous voyez de quoi je parle) ! Vos clients peuvent installer votre PWA directement depuis leur navigateur.

Alors voilà, les PWA, c'est un peu comme si vous aviez le meilleur des deux mondes : le monde des applications natives et le monde pratique et universel du web. C'est un cocktail détonnant et plein de promesses. Et qui sait, peut-être, que votre future application de chaussettes à motifs de bananes deviendra la nouvelle sensation de la toile grâce aux PWA !

Maintenant, gardez a l'esprit que les PWA, c'est de la technologie web, donc, il y a certaines choses pas aussi accessibles que via des applications natives, sur iOS déjà, elles sont souvent bien plus limitées et sur Android, là comme ça, je peux vous dire que par exemple l'accès a certaines API sont plus restreinte en web qu'en native, par exemple l'accès aux contacts.

De quelle application parle-t-on ?

Toujours, la même, celle qui me permet de mettre en place plein de nouvelles choses, l'application de réservation.

L'idée ici, va être de créer une petite invitation à installer la PWA quand l'appareil le permet, on ne veut pas flood nos utilisateurs, mais, dans le cas du restaurant des Frères Marchand, les clients sont des habitués, et une bonne partie souhaite avoir l'application sur l'écran d'accueil.

Quels sont les prérequis pour qu'une PWA soit installable ?

N'importe quelle application web ne peut pas s'installer sur l'écran d'accueil d'un smartphone, en effet, il y a des prérequis :

Un Service Worker

C'est le chef d'orchestre de votre PWA, il gère les interactions en arrière-plan, permettant des fonctionnalités telles que la mise en cache et les notifications push. C’est lui qui fait que vos utilisateurs peuvent consulter votre recette de gâteau au chocolat même en étant coincés au milieu de la forêt sans réseau !
Le service Worker est un fichier JS, directement interprété par le navigateur, dans une autre partie, nous verrons comment dire au navigateur que "ce fichier est le service worker".

Mais attention, votre Service Worker ne peut pas être un fichier JS vide, en effet pour que le navigateur accepte d'installer votre PWA, vous devez implémenter la fonction "Fetch", celle-ci est la fonction qui gère les requêtes qui sont faites aux réseaux, c'est avec cette fonction que vous allez pouvoir gérer le mode hors ligne.

Voici un exemple de Service Worker :

Comme vous pouvez le voir ici, on ajoute un "eventListener" de "fetch", comme je vous l'ai dit plus haut.

Un fichier Manifest

C'est un fichier JSON qui contient les métadonnées de l'application, son nom, sa description,son icône, ou encore comment elle doit se comporter une fois installé sur le terminal.
Sans ce fichier, pas d'installation possible sur les appareils des utilisateurs, en effet, ce fichier est la "carte d'identité" de votre application.

Maintenant, voyons à quoi ça ressemble :

Il peut y avoir des champs en plus tels que "related_applications", qui permettent de dire aux navigateurs qu'il y a une application sur le Play Store, par exemple.
Pour tous les autres champs, cela semble clair, non ? 😛

Pensez également à ajouter une « meta » dans votre HTML, afin de donner l'URL de votre « manifest » au navigateur :

Un peu d'HTTPS ?

Et oui, pour que votre application soit reconnue comme une vraie PWA, il faut forcément que votre application soit servie via du HTTPS, que ce soit le front, ou les requêtes vers le "back-end".

Une URL qui ne change pas

Cela parait bête dit comme ça, mais, il faut que votre application soit toujours disponible sur le même domaine, la même URL, les services gratuits de test type heroku, du coup, ça ne marche pas.

Du JavaScript pour enregistrer le service Worker

On en a parlé plus haut, il faut un fichier qui sert de service worker, mais, le navigateur ne va pas aller tout seul chercher ce fichier, il faut lui dire où il est, pour cela, dans votre JavaScript "de base" celui chargé par votre application ajoutez ceci :

On regarde si on est dans le navigateur et si celui-ci a les fonctions relatives au service worker, si oui on enregistre notre service worker.

Conclusion sur les prérequis

Avec les points énoncés précédemment, vous avez maintenant de quoi rendre votre application installable, mais un problème persiste... C'est le navigateur qui décide quand il propose d'installer votre application 😮.

Contrôler l'expérience d'installation.

Dans mon cas, j'ai choisi un bandeau en bas de l'écran, ce bandeau s'affiche la première fois, puis toutes les 10 fois. L'idée est de donner l'information au visiteur, mais de ne pas le spammer.

Le bandeau HTML

Commençons par ajouter notre bandeau en bas de page, on va le cacher de base, il existe, mais ne s'affiche pas via la classe "d-none" de Bootstrap.

Ici, rien de bien particulier, c'est une simple bannière Bootstrap, avec un "sticky-bottom" pour qu'elle soit en bas de l'écran, elle est par défaut caché.
Les plus observateurs d'entre vous ont vu que j'utilise le "translator" de Symfony, pour localiser le message, en effet, l'application est localisée.

Le code JavaScript

Maintenant, on va utiliser le JavaScript pour dire au navigateur "hey, c'est nous qui gérons l'installation".

Ça en fait du JavaScript, n'est-ce pas ?

Déjà la fonction "shouldShowPwaInstallBanner" permet de définir si oui ou non on affiche la bannière, pour ça on stock le nombre de visites dans le "localstorage".
La première fois, on renvoie "true" et ensuite seulement une fois toutes les dix visites.

Le plus important, l'événement "beforeinstallprompt",c'est lui que le navigateur va appeler quand il va détecter que votre PWA est installable, c'est ici que l'on va pouvoir gérer l'installation.
On va sauvegarder le prompt dans "pwaDeferredPrompt" après l'avoir empêché de s'exécuter (on reprend complètement la main sur le comportement).

Enfin, si on doit afficher la bannière, on l'affiche et on on gère la clique sur le bouton, la clique sur le bouton va tout simplement réutiliser le prompt que nous avons gardé de côté dans "pwaDeferredPrompt".

Une fois que l'utilisateur a cliqué sur le bouton, son navigateur prend le relais en lui demandant de confirmer l'installation, là nous n'avons plus la main.

Si vous voulez voir ce que ça donne, visitez l'application avec votre smartphone Android .

Les WebAPKs

En fait, certains navigateurs, comme Chrome ou encore « Samsung internet », prennent votre PWA et l’empaquète dans un APK, cet APK est ensuite envoyé au un serveur qui le signe (de ce que j'ai compris), pour s'installer comme une application classique.
L'intérêt est que l'application est mieux intégrée à Android, il n'y a pas le logo du navigateur en plus sur l'écran d'accueil.

Quand le navigateur ne peut pas accéder a son serveur de signature, il utilise l'ancienne méthode et alors il y a le petit logo du navigateur sur l'écran d'accueil.

Une PWA sur le Play Store

Et oui, vu que je viens de vous parler des WebAPK, je peux vous dire également qu'il est possible de mettre votre application sur le Google Play Store sans trop de travail.
Pour cela je vous renvoie à la documentation de BubleWrap…

En ce qui me concerne, je n'ai pas utilisé BubbleWrap, j'ai préféré une intégration plus poussée avec le système Android pour l'application du Play Store...
Vous voyez déjà le prochain article là, non ? 😛

Conclusion

Et voilà, dorénavant votre petite PWA est installable, et vous pouvez proposer avos utilisateurs les plus fidèles de l'installer sur l'écran d'accueil de leur smartphone 😁.
Les PWA ne sont pas parfaites, mais elles permettent une arrivée sur mobile avec beaucoup moins de pression que de passer par les stores, évidement vu que cela reste du web les intégrations avec le système sont moins poussées, mais quand même, ça marche plutôt pas mal.

On se retrouve prochainement pour un autre article 😁.