Comment obtenir une application Web progressive dans le Google Play Store

PWA (Applications Web progressives) est avec nous depuis un certain temps maintenant. Pourtant, chaque fois que j'essaie de l'expliquer aux clients, la même question apparaît: "Mes utilisateurs pourront-ils installer l'application à l'aide de magasins d'applications?" La réponse a traditionnellement été non, mais cela a changé avec Chrome 72 qui a expédié une nouvelle fonctionnalité appelée TWA (activités Web de confiance).

Les activités Web de confiance sont une nouvelle façon d'intégrer votre contenu Web-App tel que votre PWA avec votre application Aandroid à l'aide d'un protocole basé sur des onglets personnalisés.

Dans cet article, j'utiliserai PWA (WordGuru) existant de NetGuru et expliquerai étape par étape ce qui doit être fait pour rendre l'application disponible et prêt à être installé directement à partir de Google Play App Store.

Certaines des choses que nous couvrons ici peuvent sembler idiotes à tous les développeurs Android, mais cet article est écrit du point de vue d'un développeur frontal, en particulier celui qui n'a jamais utilisé Android Studio ou a créé une application Android. Veuillez également noter qu'une grande partie de ce que nous couvrons ici est toujours extrêmement expérimentale car elle est limitée à Chrome 72.

Étape 1: Configurez une activité Web de confiance

La configuration d'un TWA ne vous oblige pas à écrire un code Java, mais vous devrez avoir Android Studio. Si vous avez déjà développé des logiciels iOS ou Mac, cela ressemble beaucoup à XCode en ce qu'il fournit un environnement de développement agréable conçu pour rationaliser le développement d'Android. Alors, prenez cela et rencontrez-moi ici.

Créer un nouveau projet TWA dans Android Studio

Avez-vous un studio Android? Eh bien, je ne peux pas vraiment vous entendre, donc je vais supposer que vous l'avez fait. Allez-y et craquetez-le, puis cliquez sur «Démarrer un nouveau projet Android Studio». À partir de là, choisissons l'option «Ajouter aucune activité», qui nous permet de configurer le projet.

La configuration est assez simple, mais il est toujours bon de savoir ce qui est:

• Nommez le nom de l'application (mais je parie que vous le saviez).
• Nom du package: un identifiant pour les applications Android sur le Play Store. Il doit être unique, donc je suggère d'utiliser l'URL du PWA dans l'ordre inverse (par exemple com.netguru.wordguru).
• Emplacement de sauvegarde: où le projet existera localement.
• Langue: Cela nous permet de sélectionner un langage de code spécifique, mais il n'y en a pas besoin puisque notre application est déjà écrite. Nous pouvons laisser cela à Java, qui est la sélection par défaut.
• Niveau API minimum: il s'agit de la version de l'API Android avec laquelle nous travaillons et est requise par la bibliothèque d'assistance (que nous couvrirons ensuite). Utilisons l'API 19.

Il y a peu de cases à cocher en dessous de ces options. Celles-ci ne sont pas pertinentes pour nous ici, alors laissez-les tous sans contrôle, puis passez à la fin.

Ajouter la bibliothèque de support TWA

Une bibliothèque d'assistance est requise pour les TWA. La bonne nouvelle est que nous devons seulement modifier deux fichiers pour combler cette exigence et les deux vivent dans le même répertoire de projet: Gradle Scripts. Les deux sont nommés build.gradle, mais nous pouvons distinguer lequel est celui qui en regardant la description dans la parenthèse.

Il y a un gestionnaire de packages GIT appelé Jitpack qui est conçu spécifiquement pour les applications Android. C'est assez robuste, mais l'essentiel est qu'il fait de la publication de notre application Web un jeu d'enfant. C'est un service payant, mais je dirais que cela en vaut la peine si c'est la première fois que vous obtenez quelque chose dans le Google Play Store.

Remarque de l'éditeur: Ce n'est pas une prise parrainée pour Jitpack. Cela vaut la peine d'appeler parce que ce message assume peu ou pas de familiarité avec les applications Android ou de soumettre des applications à Google Play et il a moins de friction pour gérer un repo d'applications Android qui se connecte directement au magasin. Cela dit, ce n'est totalement pas une exigence.

Une fois que vous êtes à Jitpack, connectons notre projet à lui. Ouvrez ce fichier build.gradle (projet: wordguru) que nous venons de regarder et de lui dire de regarder Jitpack pour le référentiel de l'application:

 allProjects {
  Référentiels {
    ...
    maven {url 'https://jitpack.io'}
    ...
  }
}

Ok, maintenant, ouvrons ce autre fichier build.gradle. C'est là que nous pouvons ajouter toutes les dépendances requises pour le projet et nous en avons effectivement une:

 // build.gradle (module: application)

dépendances {
  ...
  Implémentation 'com.github.googlechrome: personnalisé-tabs-clie: a0f7418972'
  ...
}

La bibliothèque TWA utilise des fonctionnalités Java 8, nous allons donc avoir besoin d'activer Java 8. Pour ce faire, nous devons ajouter des compilaoptions au même fichier:

 // build.gradle (module: application)

Android {
  ...
  compilaoptions {
    SourceCompatibilité Javaversion.version_1_8
    TargetCompatibilité Javaversion.version_1_8
  }
  ...
}

Il existe également des variables appelées manifestes que nous couvrirons dans la section suivante. Pour l'instant, ajoutons ce qui suit pour définir où l'application est hébergée, l'URL par défaut et le nom de l'application:

 // build.gradle (module: application)

Android {
  ...
  defaultConfig {
    ...
    ManifestPlaceHolders = [
      nom d'hôte: "wordguru.netguru.com",
      defaultUrl: "https://wordguru.netguru.com",
      Launch Name: "Wordguru"
    ]]
    ...
  }
  ...
}

Fournir les détails de l'application dans le manifeste de l'application Android

Chaque application Android possède un manifeste d'Android (AndroidManifest.xml) qui fournit des détails essentiels sur l'application, comme le système d'exploitation auquel il est lié, les informations du package, la compatibilité des appareils et bien d'autres choses qui aident Google à afficher les exigences de l'application.

Ce qui nous concerne vraiment ici, c'est l'activité (). C'est ce qui implémente l'interface utilisateur et est requis pour les «activités» dans les «activités Web de confiance».

Assez drôle, nous avons sélectionné l'option «Ajouter sans activité» lors de la configuration de notre projet dans Android Studio et c'est parce que notre manifeste est vide et ne contient que la balise d'application.

Commençons par ouvrir le fichier manfifest. Nous remplacerons le nom du package existant par notre propre ID d'application et l'étiquette par la valeur des variables ManifestPlaceHolders que nous avons définies dans la section précédente.

Ensuite, nous allons réellement ajouter l'activité TWA en ajoutant une balise à l'intérieur de la balise .

<!-- manifests/AndroidManifest.xml -->

<manifeste xmlns: andro package="com.netguru.wordguru"> // en surbrillance

  <application android: allongbackup="true" icon="@ mipmap / ic_launcher" label="$ {Launchername}" en surbrillance supportsrtl="true" th style apptheme>

    <activit android: name="android.support.customtabs.trust.launcherActivity" label="$ {Launchername}"> // en surbrillance

      <m android: name="android.support.customtabs.trust.default_url" value="$ {defaultUrl}"></m> // met en surbrillance

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intention-filtre>
        <action android: name="android.intent.action.main"></action>
        <cat android: name="android.intent.category.launcher"></cat>
       intention-filtre>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intention-filtre android: autoverify="true">
        <action android: name="android.intent.action.view"></action>
        <cat android: name="android.intent.category.default"></cat>
        <cat android: name="android.intent.category.browsable"></cat>
        <donn android: sch host="$ {hostname}"></donn> // met en surbrillance
       intention-filtre>
    
  
 manifeste></intention-filtre></intention-filtre></activit></application></manifeste>

Et cela, mes amis, est l'étape 1. Passons à l'étape 2.

Étape 2: Vérifiez la relation entre le site Web et l'application

Les TWA nécessitent une connexion entre l'application Android et le PWA. Pour ce faire, nous utilisons des liens d'actifs numériques.

La connexion doit être définie aux deux extrémités, où TWA est l'application et PWA est le site Web.

Pour établir cette connexion, nous devons modifier à nouveau nos propriétaires de manifestes. Cette fois, nous devons ajouter un élément supplémentaire appelé AssetStatements qui conserve les informations sur notre PWA.

 // build.gradle (module: application)

Android {
  ...
  defaultConfig {
    ...
    ManifestPlaceHolders = [
      ...
      AssetStatements: '[{"Relation": ["Delegate_permission / Common.handle_All_Urls"],'  
        '"Target": {"namespace": "web", "site": "https://wordguru.netguru.com"}}]'
      ...
    ]]
    ...
  }
  ...
}

Maintenant, nous devons ajouter une nouvelle balise de méta-données à notre balise d'application. Cela informera l'application Android selon laquelle nous souhaitons établir la connexion avec l'application spécifiée dans les HalfestPlaceHolders.

<!-- manifests/AndroidManifest.xml -->

<manifeste xmlns: andro package="$ {packageid}">

  <irchable>
    ...
      <m android: name="Asset_statements" value="$ {Assetstatements}"></m>
    ...
  
 manifeste></irchable></manifeste>

C'est ça! Nous venons d'établir la relation application sur le site Web. Passons maintenant à la conversion du site Web en application.

Pour établir la connexion dans la direction opposée, nous devons créer un fichier .json qui sera disponible dans le chemin de la demande /.well-known/assetlinks.json. Le fichier peut être créé à l'aide d'un générateur intégré à Android Studio. Vous voyez, je vous ai dit qu'Android Studio aide à rationaliser le développement d'Android!

Nous avons besoin de trois valeurs pour générer le fichier:

• Hébergement du site du site: il s'agit de notre URL PWA (par exemple https://wordguru.netguru.com/).
• Nom du package de l'application: il s'agit de notre nom de package TWA (par exemple com.netguru.wordguru).
• Package d'application Empreinte digitale (SHA256): Il s'agit d'un hachage cryptographique unique qui est généré sur la base de Keystore Google Play Store.

Nous avons déjà la première et la deuxième valeur. Nous pouvons obtenir le dernier en utilisant Android Studio.

Nous devons d'abord générer APK signé. Dans le studio Android, allez à: Build → Générer un bundle signé ou APK → APK .

Ensuite, utilisez le stade de clés existant, si vous en avez déjà un. Si vous en avez besoin, allez d'abord pour «créer nouveau…».

Ensuite, remplissons le formulaire. Assurez-vous de vous souvenir des informations d'identification, car ce sont avec quoi la demande sera signée et qu'ils confirment votre propriété de l'application.

Cela créera un fichier de clés requis pour générer l'empreinte digitale du package d'application (SHA256). Ce fichier est extrêmement important car il fonctionne comme une preuve que vous êtes propriétaire de la demande. Si ce fichier est perdu, vous ne pourrez pas faire d'autres mises à jour de votre application dans le magasin.

Ensuite, sélectionnons le type de bundle. Dans ce cas, nous choisissons la «libération» car cela nous donne un bundle de production. Nous devons également vérifier les versions de signature.

Cela générera notre APK qui sera utilisé plus tard pour créer une version dans Google Play Store. Après avoir créé notre galerie, nous pouvons l'utiliser pour générer l'empreinte digitale du package d'application requise (le SHA256).

Revenons à Android Studio et allons à Tools → App Assistant Links . Cela ouvrira une barre latérale qui montre les étapes nécessaires pour créer une relation entre l'application et le site Web. Nous voulons aller à l'étape 3, «Déclarer l'association du site Web» et remplir les données requises: domaine du site et ID d'application. Ensuite, sélectionnez le fichier de galerie généré à l'étape précédente.

Après le remplissage du formulaire, appuyez sur «Générer le fichier de liens d'actifs numériques» qui générera notre fichier AssetLinks.json. Si nous ouvrons cela, cela devrait ressembler à ceci:

 [{
  "relation": ["Delegate_permission / Common.handle_all_urls"],
  "cible": {
    "Namespace": "Android_App",
    "package_name": "com.netguru.wordguru",
    "sha256_cert_fingerprints": ["8a: f4: ....: 29:28"]
  }
}]

Il s'agit du fichier que nous devons mettre à disposition dans le chemin de notre application /.well-known/assetlinks.json. Je ne décrirai pas comment le rendre disponible sur ce chemin car il est trop spécifique au projet et en dehors de la portée de cet article.

Nous pouvons tester la relation en cliquant sur le bouton «Lien et vérifier». Si tout se passe bien, nous obtenons une confirmation avec «Success!»

Ouais! Nous avons établi une relation bidirectionnelle entre notre application Android et notre PWA. Tout est en descente d'ici, alors ramenons à la maison.

Étape 3: Obtenez les actifs requis

Google Play nécessite quelques actifs pour s'assurer que l'application est bien présentée dans le magasin. Plus précisément, voici ce dont nous avons besoin:

• Icônes d'application: Nous avons besoin d'une variété de tailles, dont 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 192… ou nous pouvons utiliser une icône adaptative.
• Icône haute résolution: il s'agit d'une image 512 × 512 PNG utilisée dans tout le magasin.
• Graphique de fonction: il s'agit d'une bannière 1024 × 500 JPG ou PNG 24 bits (pas d'alpha) que Google Play utilise sur la vue Détails de l'application.
• Captures d'écran: Google Play les utilisera pour afficher différentes vues de l'application que les utilisateurs peuvent consulter avant de le télécharger.

Ayant tous ceux-ci, nous pouvons passer à la console des développeurs Google Play Store et publier l'application!

Étape 4: Publiez sur Google Play!

Passons à la dernière étape et enfinons enfin notre application vers le magasin.

En utilisant l'APK que nous avons généré précédemment (qui se trouve dans le répertoire AndroidStudioprojects), nous devons aller sur la console Google Play pour publier notre application. Je ne décrirai pas le processus de publication d'une application dans le magasin car l'assistant le rend assez simple et nous avons des conseils étape par étape tout au long du processus.

Il peut prendre quelques heures pour que la demande soit examinée et approuvée, mais quand elle l'est, elle apparaîtra enfin dans le magasin.

Si vous ne trouvez pas l'APK, vous pouvez en créer un nouveau en allant à la création → générer un bundle / apk signé → construire APK , en passant notre fichier de clés existant et en remplissant l'alias et le mot de passe que nous avons utilisés lorsque nous avons généré le stage. Une fois l'APK généré, un avis devrait apparaître et vous pouvez accéder au fichier en cliquant sur le lien «localiser».

Félicitations, votre application est dans Google Play!

C'est ça! Nous avons juste poussé notre PWA au Google Play Store. Le processus n'est pas aussi intuitif que nous le souhaiterions, mais toujours, avec un peu d'effort, c'est définitivement faisable, et croyez-moi, cela donne cette excellente garniture à la fin lorsque vous voyez votre application affichée dans la nature.

Il convient de souligner que cette fonctionnalité est encore très précoce et je considérerais cela expérimental pendant un certain temps. Je ne recommanderais pas de suivre une version de production de votre application pour l'instant car cela ne fonctionne qu'avec Chrome 72 et plus - toute version avant qui pourra installer l'application, mais l'application elle-même se bloquera instantanément, ce qui n'est pas la meilleure expérience utilisateur.

De plus, la sortie officielle de Custom-Tabs-Client ne prend pas encore en charge TWA. Si vous vous demandiez pourquoi nous avons utilisé le lien GitHub brut au lieu de la version officielle de la bibliothèque, eh bien, c'est pourquoi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!