Démarrer une PWA dans une application Android
Les progressive web apps (PWA) sont des applications Web qui utilisent des fonctionnalités semblables à celles des applications pour créer des expériences de haute qualité, rapides, fiables et engageantes.
Le Web a une portée incroyable et offre aux utilisateurs des moyens efficaces de découvrir de nouvelles expériences. Toutefois, les utilisateurs ont également l'habitude de rechercher des applications dans leur magasin de systèmes d'exploitation. Dans de nombreux cas, ces utilisateurs connaissent déjà la marque ou le service qu'ils recherchent, et ils ont un haut niveau d'intention qui se traduit par des métriques d'engagement supérieures à la moyenne.
Le Play Store est une plate-forme d'applications Android. Les développeurs souhaitent souvent ouvrir leurs progressive web apps à partir de leurs applications Android.
L'activité Web de confiance 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 qu'Android WebView ou de frameworks tels que Cordova.
Android WebView n'a pas vocation à se substituer à un navigateur. Android WebView est un outil pour les développeurs qui permet d'utiliser l'interface utilisateur 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 système de fichiers, entre autres.
Cordova a été conçue pour pallier les insuffisances de WebView, mais les API sont ensuite 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 souvent pas toujours comme prévu, et les problèmes de compatibilité entre les versions d'Android et les OEM peuvent également poser problème. Lorsqu'ils utilisent l'une de ces solutions, les développeurs ont besoin de processus d'assurance qualité supplémentaires et entraînent des frais de développement supplémentaires pour détecter et créer des solutions de contournement.
L'activité Web sécurisée est un nouveau conteneur pour les applications Web sur Android
Les développeurs peuvent désormais utiliser une activité Web de confiance en tant que conteneur pour inclure une PWA en tant qu'activité de lancement d'une application Android. Cette technologie exploite le navigateur pour afficher la PWA en plein écran, garantissant ainsi la même compatibilité 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 faciliter encore plus l'implémentation d'une application Android à l'aide d'une activité Web fiable.
Un autre avantage qui n'est pas disponible dans d'autres solutions est que 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 transparente entre les différentes expériences.
Compatibilité des navigateurs
Cette fonctionnalité est disponible dans Chrome depuis la version 75, et Firefox l'a mise en œuvre dans sa version nocturne.
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 fiable doit respecter les critères d'installation des PWA.
De plus, pour répondre au comportement attendu des utilisateurs dans les applications Android, Chrome 86 a introduit une modification où le fait de ne pas gérer les scénarios suivants est considéré comme un plantage:
- Défaut de validation des liens vers les ressources numériques lors du lancement de l'application.
- Échec du renvoi du code HTTP 200 pour une requête de ressource réseau hors connexion.
- Une requête de navigation renvoyant une erreur HTTP 404 ou 5xx".
Lorsque l'un de ces scénarios se produit dans l'activité Web de confiance, un plantage de l'application Android est visible par l'utilisateur. Consultez les conseils pour gérer ces scénarios dans votre service worker.
L'application doit également répondre à d'autres critères spécifiques à Android, tels que le respect des règles.
Outils
Les développeurs Web qui souhaitent tirer parti de l'activité Web sécurisée n'ont pas besoin de se familiariser avec de nouvelles technologies ou API pour transformer leur PWA en application Android. Ensemble, Bubblewrap et PWABuilder fournissent des outils pour les développeurs 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 amorcer un nouveau projet, vous devez exécuter l'outil et transmettre 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
Après avoir exécuté cette commande, 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 progressive web apps. Il s'intègre également à Bubblewrap pour fournir une interface IUG permettant d'encapsuler ces PWA dans une application Android. L'équipe PWABuilder a rédigé un excellent article de blog sur la façon de générer une application Android à l'aide de cet outil.
Valider la propriété de la PWA dans l'application Android
Un développeur qui crée une progressive web app de qualité ne souhaite pas qu'un autre développeur crée une application Android avec elle sans son autorisation. Pour éviter que cela ne se produise, l'application Android doit être associée à la progressive web app à l'aide d'un outil appelé Digital Asset Links.
Bubblewrap et PWABuilder effectuent la configuration nécessaire sur l'application Android, mais une dernière étape est la dernière étape : 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 trouver la clé qui a signé l'APK diffusé auprès des utilisateurs finaux consiste à le télécharger depuis le Play Store.
Pour éviter de présenter une application défectueuse aux utilisateurs, déployez l'application sur une version de test fermée, installez-la sur un appareil de test, puis générez le fichier assetlinks.json approprié pour l'application à l'aide de l'outil Asset Link de Peter. Rendez le fichier assetlinks.json généré disponible à l'adresse /.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é. L'activité Web de confiance 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é minimaux.
Si vous faites vos premiers pas 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 qu'elle répond aux critères de qualité.
Utilisez ensuite Bubblewrap ou PWABuilder pour générer l'application Android, importez-la sur une chaîne de test fermé sur le Play Store et associez-la à la PWA à l'aide de l'outil Asset Link de Peter.
Enfin, faites passer votre application du canal de test fermé à la version de production.