Bonne nouvelle pour les Progressive Web Apps, Google semble encourager leur démocratisation en ouvrant son store aux PWA.
Qu’est ce que cela implique, à quoi doit-on s’attendre ?
Prenez un café, on vous dit tout !
À savoir : Les PWA offrent de nombreux avantages au service de l’e-commerce
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.
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 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.
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.
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 :
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.
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.
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.
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.
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.
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.
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 😉
Enfin une bonne nouvelle pour les utilisateurs d’Android ! Google a enfin décidé de rendre open source son moteur de rendu physique 2D/3D pour...
Cet événement est une initiative de l’association Grand Est Numérique ! Pour la 6ème édition de 2018, nous aurons droit à des sujets liés...
Au premier coup d’œil, on pourrait croire à une réponse d’Ionic à React Native, mais cette fois-ci, le framework dédié aux applications...
Inscrivez-vous à notre newsletter. Nous vous enverrons des publications et des articles de veille technique sur le digital.