Me fais-tu confiance?
Depuis quelque temps, les applications Web peuvent être transformées en une application native avec peu d'effort, en fonction de la complexité de l'application. Par exemple, des frameworks comme Capacitor.js ou Cordova offrent de telles fonctionnalités et sont également des logiciels open source. Pour proposer une application Web en tant qu'application native, vous devez créer l'application Web localement, indiquer au framework où se trouve cette sortie de génération et attendre que les applications soient créées. Le concept de base est que votre site Web s'exécute simplement dans une vue Web intégrée. Eh bien, les choses sont sur le point de changer à nouveau en introduisant « Trusted Web Activity » de Google.
PWA++
Qu'est-ce qu'une « activité Web de confiance » (TWA) ? Voici l'essentiel :
- Une « activité Web de confiance » est utilisée dans le contexte de Google Play Store et d'une application Android native générée à partir d'une PWA
- Vous pouvez vérifier la propriété de votre PWA pour l'application Android en créant un identifiant appelé "assetlinks" - c'est là que Google Play est nécessaire
- en téléchargeant ce fichier « assetlinks » dans le répertoire public de votre application Web, Google peut vérifier la propriété de la PWA lorsque l'application Android native obtient afin que personne d'autre que vous ne puisse la créer
D'accord, c'était un bref aperçu du concept derrière TWA. Pour rappel, la partie « confiance » concerne la vérification de la propriété de votre PWA.
Un nouveau TWA, s'il vous plaît !
D'accord, mais comment ça marche concrètement ? La configuration est en fait très simple et ne devrait pas prendre plus d'une heure. Voici comment c'est fait :
Tout d'abord, assurez-vous que votre PWA est correctement configuré :
- manifest.json est disponible et validé
- icône + nom sont corrects
- vous pouvez vérifier ces changements rapidement dans DevTools
La bibliothèque principale qui prendra tout le gros du travail s'appelle « bubblewrap », un package Node.js qui fournit une CLI, qui sera utilisée tout au long du didacticiel.
Tout d'abord, créez un nouveau répertoire pour le TWA appelé « twa ». À l'intérieur de "twa", nous allons créer un autre répertoire appelé "android". "twa" lui-même contiendra les node_modules et "android" l'application Android native réelle.
Assurez-vous que vous êtes maintenant à l'intérieur de "twa" pour lancer un nouveau projet npm :
npm init -y
Ajoutons maintenant la CLI en tant que dépendance de développement :
npm i -D @bubblewrap/cli
C'est tout ce dont nous avons besoin pour l'instant. Commençons alors le projet « bulle ». Remplacez simplement le domaine par le vôtre et vérifiez où se trouve le "manifest.json". Il vous sera demandé les emplacements Java SDK + Android SDK, que vous pouvez réutiliser s'ils sont déjà installés :
npx bubblewrap init --manifest=https://your-pwa.com/manifest.json
Ensuite, il est temps de passer en revue quelques questions et réponses avec la CLI « bulle ». En fonction des métadonnées disponibles dans votre PWA, la plupart des champs seront déjà pré-remplis :
npx bubblewrap build
Maintenant que votre PWA a été identifiée et que l'application Android est créée, il est temps de faire un test de fumée rapide. Démarrez un émulateur ou utilisez votre appareil de test réel de votre choix :
npx bubblewrap install
Si tout se passe bien, vous verrez votre application Web comme une application Android native fonctionnelle. Super, le plus dur est déjà fait !
Il ne reste plus qu'à créer le fichier de vérification appelé « assetlinks.json ». Comme je suppose que vous souhaitez télécharger l'app bundle sur Google Play, il est important de noter comment la signature est réellement gérée :
- Google Play gérera les clés de signature pour vous, ce qui signifie que nous devons rechercher la valeur SHA-256 correspondante dans Google Play Console
- "bubblewrap" a peut-être déjà créé un fichier "assetlinks" avec une entrée, qui contient un hachage SHA-256 différent - pas de soucis, nous utiliserons à la fois les clés de Google Play et celle générée
Si aucun fichier "assetlinks" n'a été créé, la façon dont j'ai procédé était de télécharger "Asset Links Tool" (recommandé par Google, lien dans l'addendum) sur mon appareil de test et de lire le SHA-256 à partir de l'application de test signée installée créée et installé par « bubblewrap ». Ce json peut ensuite être utilisé par vous. Assurez-vous simplement de dupliquer la première entrée et de remplacer le SHA-256 par celui de Google Play, ce qui donne un fichier "assetlinks" avec 2 entrées, ne différant que par leurs clés de signature.
Presque terminé, il vous suffit maintenant de créer un nouveau répertoire dans le dossier public de votre PWA existant et de télécharger l'application une fois :
.well-known/assetlinks.json
Désormais, Google peut le lire et en vérifier la propriété.
Un pas de plus...
Il ne reste plus qu'à télécharger le kit de publication sur Google Play et à le publier ! Oui, c'est en fait aussi simple. Google pousse vraiment ce qui est possible sur le Web et n'a pas peur d'essayer de nouvelles choses. « Activité Web de confiance » est une nouvelle façon de combler encore plus le fossé entre le Web et le natif, bien que actuellement limité à Android.
Oh, et oui : bien sûr, cette application Web est une PWA et une TWA. Vous pouvez consulter l'application Android sur Google Play, le lien est ci-dessous dans l'addendum.
- Tom
