Progressive Web App : définition de l’application web hybride
Dans un précédent article, on vous expliquait pourquoi utiliser les Progressive Web App et comment ces dernières fonctionnent, sachez maintenant que cette technologie est disponible depuis le store de Google !
Pour rappel, une Progressive Web App ou PWA est en quelques sortes un “mix” entre une application mobile native et un site internet.
Bon, l’image est très grossière et c’est en réalité plus compliqué que ça.
Ce qu’il faut comprendre avant tout, c’est que la philosophie de ces technologies repose sur deux points : fluidité et accessibilité !
En effet, ces applications progressives sont accessibles depuis n’importe quel support , qu’il soit sur mobile, tablette ou même Desktop.
Pourquoi ? Parce que en réalité les PWA sont développées à l’aide des langages HTML, CSS et JavaScript !
Au final, la dite “application” est en réalité une page web, ouverte par un client web (votre navigateur préféré) dans un conteneur dédié.
Il est même possible de mettre ce conteneur en plein écran, on retrouve bien là l’idée d’une application.
Ok c’est cool les PWA, mais quels sont les avantages apportés par rapport à une application native ?
C’est plus rapide à l’utilisation et ça coûte moins cher à mettre en place !
En effet, avec ces applications progressives, vous n’avez plus besoin de développer une solution adaptée pour chaque support (1 application IOS, 1 application Android, 1 application Windows Phone , ah bah non).
Les appareils mobiles embarquent des navigateurs web, et ces clients Web permettent d’accéder à un site internet commun à tous supports.
Pourquoi pas alors, installer un “raccourci” sur votre appareil qui vous permettrait de vous connecter directement à l’adresse web du service demandé ?
C’est ce que permettent les PWA et ça offre une accessibilité à un service depuis n’importe quel navigateur internet !
Cela permet d’éviter des soucis d’applications disponibles exclusivement sur un seul et même store ! Parce que oui, il faut souligner que c’est particulièrement frustrant pour un utilisateur de voir, par exemple, que l’application officielle dédiée à son Thermomix n’est disponible que sur IOS, et non Android …
Service Worker, l’argument de vélocité des PWA
Service worker c’est le nom de la fonctionnalité qui permet aux PWA d’être ce qu’elles sont.
Cet Anglicisme permet grâce à un cache de stockage de faire tourner en arrière-plan une application. Oui oui, comme pour une application native !
L’avantage c’est que les données peuvent être chargées de façon asynchrone.
Ça permet alors de réduire le temps de chargement lors du lancement de l’application et même de l’utiliser en mode “hors-ligne”.
Ce n’est pas tout, il est également possible de gérer l’envoi de pushs notifications.
Des PWA intégrables à Google Play Store ?
Avec la nouvelle mise à jour Chrome 72, il est désormais possible de proposer des PWA directement depuis le store Android de Google.
Cependant d’après notre source, publier sa PWA dans le store ne serait pas aussi facile que ça en a l’air.
En effet, la publication devrait se faire à l’aide d’une API Java (Trusted Web Activity) qui en est qu’à ses premières heures.
Avec la démocratisation des PWA, des outils plus adaptés devraient normalement être mis en ligne. Néanmoins une méthode plus artisanale est possible pour créer un PWA’s launcher.
Pourquoi publier une PWA dans le store ?
Premièrement avant de voir comment déposer sa ou ses PWA dans le Google Play store, il paraît bon de lister les avantages que cela peut procurer.
Parce que contrairement à d’autres applications natives, les PWA sont également téléchargeables depuis le web, peuvent même être référencées grâce à l’utilisation de métadonnées.
Tout de même, le fait de les implémenter dans un store permet entre autre de :
- Proposer une visibilité autre que sur le web (of course)
- Monétiser l’application, usage encore limité (difficultée à monétiser du contenu additionnel)
- Proposer du contenu “natif” à télécharger qui sera mixé par le Service Worker de votre PWA.
- Imbriquer plusieurs PWA dans un seul launcher qui se chargera de diriger les différents services vers des URLs respectives.
Trusted Web Activity, ses différences avec Cordova
TWA (Trusted Web Activity, l’APi d’intégration) serait un mode spécial de Chrome Custom Tabs, une solution native qui permet depuis Chrome 45 d’ouvrir une fenêtre navigateur web directement dans l’application, à la manière d’une WebView.
Également, pour déployer une application native, vous aviez l’habitude de déposer un APK (Android Package) à l’aide de Cordova. Cet APK, dans le cas d’une application native doit comporter toutes les ressources nécessaires.
Oui parce que pour fonctionner, l’application native utilise son propre “ bac à sable”, composé de son cache, ses cookies etc …
Dans le cas des PWA, c’est différent ! La PWA, grâce au Service Worker, se lie au cache de votre navigateur.
L’application est donc, dans un sens moins lourde à télécharger. Seuls les contenus natifs seront à déposer sur le store.
Un deuxième avantage à ça, c’est que si un utilisateur se connecte sur votre site internet, et ensuite télécharge la PWA, il n’aura pas besoin de se connecter une deuxième fois.
La PWA étant liée au cache navigateur, les informations de navigation de l’utilisateur seront reprises. Notons tout de même la remarque de Maximiliano (notre source) : même s’il est possible de consulter une PWA sans connexion internet, il sera tout de même nécessaire d’avoir une connexion internet pour le premier chargement de l’application, sinon vous verrez s’afficher une page blanche (y).
Visiblement, pour l’instant le cache de la PWA ne serait pas synchronisé lors de son installation.
En outre, lorsqu’un utilisateur désinstalle une PWA par le manager du raccourci natif, le cache du navigateur n’est pas nettoyé pour autant. Cela veut dire que les données de la PWA restent en cache, et qu’il est toujours possible d’envoyer des notifications à l’utilisateur par le biais du navigateur, même si celui-ci à désinstaller son appli.
Création d’une PWA Package avec TWA
Pour créer un package PWA utilisant TWA vous devez utiliser un IDE (environnement de développement intégré), dans notre cas on retient Android Studio qui contient des bibliothèques Java et Kotlin pour Android.
À ce jour, il n’y a que des méthodes “expérimentales“ pour créer un package PWA utilisant TWA. Les méthodes prises pour exemple par Maximiliano sont celles du repository Github de Chrome.
Bonne nouvelle, dans notre cas, vous n’aurez pas besoin d’écrire de Java, ni même de Kotlin !
Il suffit de le faire en Javascript, de créer un projet Android Studio et d’insérer vos métadonnées dans un fichier AndroidManifest.xml provenant de votre Web App Manifest et c’est bon, à table !
Qu’est-ce que le fichier Manifest ? C’est une description que vous devez insérer dans votre application native, dans notre cas le launcher de la PWA. Ça permet de renseigner des métadonnées comme le nom de l’auteur, du créateur de l’application, la date de publication etc ….
C’est une des seules choses que l’on peut considérer comme native dans cette application PWA.
Validation de l’URL de votre service web
Les PWA fonctionnent uniquement si vous faites matcher votre nom de domaine avec votre application, c’est ce que l’on appelle le Digital Asset Link. Cela permet d’invoquer une relation de confiance entre l’hôte et l’APK, ce qui permet de justifier que vous êtes bien le propriétaire de l’application que vous déposez sur le store.
Sachez que pour ce faire, il convient de créer un nom de domaine dédié à votre PWA.
Pourquoi ? Parce que par exemple si vous saisissez le nom de domaine cocacola.fr comme référent, votre PWA qui elle sera peut-être dans un dossier plus profond (cocacola.fr/pwa), va charger tout le site complet en cache … C’est inutile, ça fait perdre du temps et ça consomme de la data pour l’utilisateur parce qu’encore une fois, la PWA synchronisera son contenu en arrière-plan.
Publication de votre PWA
Pour publier votre PWA, vous devrez suivre les règles du Google Play Store et également créer un compte de publication développeur en vous acquittant des 25$ de droit d’entrée.
Mise à jour de l’application
Comme dit précédemment, Service Worker vous permet de lier votre PWA au cache de votre navigateur. Cela permet de faire des mises à jour en arrière-plan, et de façon assez transparente pour l’utilisateur.
Une aubaine pour l’expérience utilisateur, car dans ce sens vous ne recevrez plus de notifications de mise à jour hebdomadaire pour une simple màj mineure. Ce qui veut dire que vous ne serez plus obligé de télécharger une application complète pour simplement modifier une petite nuance de votre application.
En revanche dans le cas d’une mise à jour plus importante ; on entend par là que vous modifier des éléments natifs (métadonnées, screens etc …), vous devrez déposer une nouvelle version de votre package complète.
Un point à relever et le fait qu’il n’y ait pas d’outil permettant à la PWA de communiquer avec son enveloppe native. En quoi est-ce un problème ? Dans l’éventualité où vous souhaitez créer du contenu additionnel payant. L’utilisateur sera obligé de payer via le site internet par carte bleue ou autre paiement, seulement il ne pourra pas utiliser son compte Android lié à l’application. Parce que c’est bien l’enveloppe native qui est reliée au Play store, et non la PWA.
Débogage
Petit hic, il semblerait qu’il n’ait pas encore à l’heure actuelle de possibilités de déboguer l’application de façon distante. Un problème de liaison entre Service Worker et TWA serait la raison de ce petit couac.
Du favoritisme pour chrome
Non étonnant de Google, les PWA installées depuis le store auront tendances à privilégier Google Chrome. Cela même si Chrome n’est pas votre navigateur par défaut, et que vous avez un autre browser plus uptodate.Vous en savez maintenant un petit peu plus sur le système de publication BETA de PWA de Google Play Store. Êtes-vous prêt à sauter le pas ? Avec quel framework front allez-vous développer votre PWA ? Si vous hésitez encore, on a fait un article pour vous aidez à choisir 😉
