Démarrer une PWA dans une application Android
Les progressive web apps (PWA) sont des applications Web qui utilisent des fonctionnalités semblables à celles d'une application pour créer des expériences de haute qualité, rapides, fiables et attrayantes.
Le Web a une couverture incroyable et offre aux utilisateurs des moyens efficaces de découvrir de nouvelles expériences. Toutefois, les utilisateurs sont également habitués à rechercher des applications dans le magasin de leur système d'exploitation. Dans de nombreux cas, ces utilisateurs connaissent déjà la marque ou le service qu'ils recherchent et présentent un niveau d'intentionnalité élevé, ce qui se traduit par des métriques d'engagement supérieures à la moyenne.
Le Play Store est une plate-forme de téléchargement d'applications Android. Les développeurs souhaitent souvent ouvrir leurs applications Web progressives à partir de leurs applications Android.
L'activité Web fiable est une norme ouverte qui permet aux navigateurs de fournir un conteneur entièrement compatible avec la plate-forme Web qui affiche les PWA dans une application Android. Cette fonctionnalité est disponible dans Chrome et en cours de développement dans Firefox Nightly.
Les solutions existantes étaient limitées
Il a toujours été possible d'inclure des expériences Web dans une application Android, à l'aide de technologies telles que Android WebView ou de frameworks tels que Cordova.
Android WebView présente une limite : il n'est pas destiné à remplacer un navigateur. Android WebView est un outil de développement permettant d'utiliser l'UI Web dans une application Android. Il ne fournit pas un accès complet aux fonctionnalités modernes de la plate-forme Web, telles que le sélecteur de contacts ou le fichier système, entre autres.
Cordova a été conçu pour pallier les lacunes de WebView, mais les API sont alors limitées à l'environnement Cordova. Cela signifie que vous devez gérer un codebase supplémentaire pour utiliser les API Cordova pour votre application Android, distinct de votre PWA sur le Web ouvert.
De plus, la visibilité des fonctionnalités ne fonctionne pas toujours comme prévu, et les problèmes de compatibilité entre les versions d'Android et les OEM peuvent également poser problème. Lorsque vous utilisez l'une de ces solutions, les développeurs ont besoin de processus d'assurance qualité supplémentaires et encourent des coûts de développement supplémentaires pour détecter et créer des solutions de contournement.
L'activité Web fiable est un nouveau conteneur pour les applications Web sur Android
Les développeurs peuvent désormais utiliser une activité Web fiable comme conteneur pour inclure une PWA en tant qu'activité de lancement pour une application Android. La technologie exploite le navigateur pour afficher la PWA en plein écran, ce qui garantit que l'activité Web fiable est aussi compatible avec les fonctionnalités et les API de la plate-forme Web que le navigateur sous-jacent. Il existe également des utilitaires Open Source pour simplifier encore plus l'implémentation d'une application Android à l'aide d'une activité Web fiable.
Autre avantage non disponible dans d'autres solutions : le conteneur partage l'espace de stockage avec le navigateur. Les états de connexion et les préférences des utilisateurs sont partagés de manière fluide entre les expériences.
Compatibilité avec les navigateurs
Cette fonctionnalité est disponible dans Chrome depuis la version 75, et Firefox l'implémente dans sa version nightly.
Critères de qualité
Les développeurs Web doivent utiliser une activité Web fiable lorsqu'ils souhaitent inclure du contenu Web dans une application Android.
Le contenu Web d'une activité Web sécurisée doit répondre aux critères d'installabilité des PWA.
De plus, pour correspondre au comportement que les utilisateurs attendent des applications Android, Chrome 86 a introduit un changement : l'échec de la gestion des scénarios suivants est considéré comme un plantage :
- Échec de la validation des liens vers les composants numériques au lancement de l'application.
- Échec de la réponse HTTP 200 pour une requête de ressource réseau hors connexion.
- Une requête de navigation renvoyant une erreur HTTP 404 ou 5xx".
Lorsqu'un de ces scénarios se produit dans l'activité Web sécurisée, l'application Android plante de manière visible par l'utilisateur. Consultez les conseils sur la gestion de ces scénarios dans votre service worker.
L'application doit également respecter des critères supplémentaires spécifiques à Android, comme la conformité aux règles.
Outils
Les développeurs Web qui souhaitent profiter des activités Web fiables n'ont pas besoin d'apprendre de nouvelles technologies ni d'API pour transformer leur PWA en application Android. Ensemble, Bubblewrap et PWABuilder fournissent des outils de développement sous la forme d'une bibliothèque, d'une interface de ligne de commande (CLI) et d'une interface utilisateur graphique (IUG).
Papier bulle
Le projet Bubblewrap génère des applications Android sous la forme d'une bibliothèque NodeJS et d'une interface de ligne de commande (CLI).
Pour démarrer un nouveau projet, exécutez l'outil et transmettez l'URL du fichier manifeste Web:
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
L'outil peut également compiler le projet. L'exécution de la commande ci-dessous génère une application Android prête à être importée sur le Play Store:
npx @bubblewrap/cli build
Une fois cette commande exécutée, un fichier nommé app-release-signed.apk sera disponible dans le répertoire racine du projet. Il s'agit du fichier qui sera importé sur le Play Store.
PWABuilder
PWABuilder aide les développeurs à transformer des sites Web existants en applications PWA. Il s'intègre également à Bubblewrap pour fournir une interface utilisateur graphique permettant d'encapsuler ces PWA dans une application Android. L'équipe PWABuilder a rédigé un excellent article de blog sur la génération d'une application Android à l'aide de cet outil.
Vérifier la propriété de la PWA dans l'application Android
Un développeur qui crée une excellente progressive web app ne souhaite pas qu'un autre développeur en crée une application Android sans son autorisation. Pour éviter cela, l'application Android doit être associée à la progressive web app à l'aide d'un outil appelé Digital Asset Links.
Bubblewrap et PWABuilder s'occupent de la configuration nécessaire sur l'application Android, mais il reste une dernière étape à effectuer : ajouter le fichier assetlinks.json à la PWA.
Pour générer ce fichier, les développeurs ont besoin de la signature SHA-256 de la clé utilisée pour signer l'APK téléchargé par les utilisateurs.
La clé peut être générée de plusieurs manières. Le moyen le plus simple de savoir quelle clé a signé l'APK diffusé auprès des utilisateurs finaux consiste à le télécharger depuis le Play Store lui-même.
Pour éviter de présenter une application défectueuse aux utilisateurs, déployez-la sur un canal de test fermé, installez-la sur un appareil de test, puis utilisez l'outil de liaison d'éléments de Peter pour générer le fichier assetlinks.json approprié pour l'application. Mettez le fichier assetlinks.json généré à disposition sur /.well-known/assetlinks.json, dans le domaine en cours de validation.
Étapes suivantes
Une progressive web app est une expérience Web de haute qualité. Trusted Web Activity est un nouveau moyen d'ouvrir ces expériences de haute qualité à partir d'une application Android lorsqu'elles répondent aux critères de qualité minimum.
Si vous débutez avec les progressive web apps, consultez nos conseils pour créer une PWA de qualité. Pour les développeurs qui disposent déjà d'une PWA, utilisez Lighthouse pour vérifier si elle répond aux critères de qualité.
Ensuite, utilisez Bubblewrap ou PWABuilder pour générer l'application Android, importez-la dans un canal de test fermé sur le Play Store et associez-la à la PWA à l'aide de l'outil de liaison d'assets de Peter.
Enfin, déplacez votre application du canal de test fermé vers le canal de production.