Publier des PWA sur les principaux App Stores : le pourquoi et le comment

À partir de Google Play Store, l'un après l'autre, le marché des applications a pris le train en marche pour accueillir les applications Web progressives (Qu'est-ce que l'application Web progressive?) Dans leur magasin, ce qui en fait la nouvelle approche incontournable pour la livraison de logiciels. Avec tout cela en jeu, ce serait un gaspillage de ne pas profiter de cette nouvelle technologie pour mieux étendre la portée de votre application.

Pour vous donner une perspective plus claire sur l'ensemble du mouvement des applications Web progressives, en particulier le processus de publication, nous examinerons aujourd'hui l'état actuel des PWA sur les principaux marchés d'applications ainsi que la manière de publier une PWA dans ces magasins.

Pourquoi devriez-vous publier votre Progressive Web App dans les principaux magasins d'applications ?

Auparavant, les applications Web progressives étaient limitées aux installations Web (Ajouter à l'écran d'accueil) uniquement. Cependant, avec le temps, les marchés d'applications tels que Google et Microsoft ont commencé à reconnaître le potentiel des PWA et ont pris des initiatives pour faire avancer l'adoption de cette technologie du futur.

Si vous avez les capacités et les fonds nécessaires, notre opinion professionnelle est que vous devriez y aller : rendez votre PWA omni-plateforme. Après tout, de grandes marques telles que Twitter, Uber et Spotify ont toutes sauté dans le train en marche et ont obtenu des résultats stellaires, prouvant que cette technologie n'est en effet pas uniquement marketing et mérite d'être envisagée. Microsoft lui-même est même allé plus loin en prévoyant de faire des applications Web progressives l'expérience principale de Windows.

 Lecture recommandée : 12 meilleurs exemples d'applications Web progressives.

Comment publier votre PWA dans les principaux magasins d'applications

Google Play Store

Étant le précurseur du mouvement PWA, il ne serait pas surprenant de voir Google Play Store tenir les bras ouverts pour les Progressive Web Apps. Avec TWA (Trusted Web Activities) en place, l'ensemble des séquences de publication a été simplifié et devrait être terminé en un rien de temps.

Conditions

• Android Studio installé
• Un compte développeur Google
• Une Progressive Web Apps fonctionnelle et dont la qualité est vérifiée.

Étape 1 : Créez un clone de l'application Android TWA Starter et modifiez

• Clonez le projet svgomg-twa avec la commande suivante :

 git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importez le projet dans Android Studio en utilisant File > New > Import Project .

Dans /app/build.gradle , modifiez twaManifest selon vos besoins. Les détails sur quoi et comment changer peuvent être trouvés dans le fichier build.gradle.

Remarque : L' applicationId doit respecter le format <com>.<your-brand>.<your-app>

Après modifications, votre /app/build.gradle devrait ressembler à ceci :

 def twaManifest = [
    ID de l'application : 'com.simicart.app',
    hostName : 'simicart.com', // Le domaine en cours d'ouverture dans la TWA.
    launchUrl : '/', // Le chemin de démarrage de la TWA. Doit être relatif au domaine.
    name : 'SimiCart PWA', // Le nom affiché sur le lanceur Android.
    themeColor: '#ED8A19', // La couleur utilisée pour la barre d'état.
    navigationColor : '#303F9F', // La couleur utilisée pour la barre de navigation.
    backgroundColor : '#bababa', // La couleur utilisée pour l'arrière-plan de l'écran de démarrage.
    enableNotifications : false, // Définir sur true pour activer la délégation de notification.
    // Ajoutez ici des raccourcis pour votre application. Chaque raccourci doit inclure les champs suivants :
    // - nom : chaîne qui apparaîtra dans le raccourci.
    // - nom_abrégé : chaîne plus courte utilisée si |nom| est trop long.
    // - url : Chemin absolu de l'URL avec laquelle lancer l'application (par exemple '/create').
    // - icon : Nom de la ressource dans le dossier drawable à utiliser comme icône.
    raccourcis : [
        nom : 'Ouvrir SimiCart', 
        nom_abrégé : 'Ouvrir', 
        URL : '/ouvrir', 
        icone : 'éclaboussures'
    ]
,
    // La durée de l'animation de fondu en millisecondes à jouer lors de la suppression de l'écran de démarrage.
    splashScreenFadeOutDurée : 300
]

Étape 2 : Créez un magasin de clés et vérifiez l'APK

Les magasins de clés ou les clés de téléchargement sont nécessaires pour la vérification de votre APK. Pour créer un magasin de clés, lancez Android Studio et accédez à Build → Generate Signed Bundle/APK et remplissez les champs obligatoires.

Une fois que vous avez créé un Key Store, vous devrez en extraire l'empreinte SHA256 à l'aide des commandes suivantes :

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Type d'entrée : PrivateKeyEntry
...
Empreintes du certificat :
         SHA1 : ...
         SHA256 : 2A:9B:A8:64:32:0A:69:99... : ? copier cette ligne

Étape 3 : Configurer le Digital Asset Link

Un lien d'actif numérique est nécessaire pour la vérification de la propriété de votre contenu Web, qui peut ensuite être utilisé pour créer un lien vers votre APK.

Générer un fichier de déclaration

Utilisez l'empreinte digitale SHA256 que vous avez extraite précédemment et générez un fichier d'instructions avec le générateur et testeur de liste d'instructions.

Une fois que vous avez généré un fichier de déclaration, l'étape suivante consiste à créer un fichier accessible au public contenant des informations provenant de l'outil d'actif numérique. Le fichier doit être placé chez votre hébergeur et à cet emplacement :

 .well-known/assetlinks.json

L'emplacement de ce fichier dépend du processus de génération de votre application Web, mais il devrait normalement se trouver dans les répertoires déployés, à savoir les répertoires "public" ou "dist".

Lorsque tout est terminé, la prochaine et dernière étape consiste à déployer votre application.

Étape 4 : Créez et publiez votre application sur Google Play

Avec votre console Google Play aux paramètres par défaut, accédez à Toutes les applications → Créer une application .

Créer un test interne

Accédez à Versions de l' application → Piste de test interne → Créer une version pour créer une piste de test interne de votre application.

Construire un APK signé

Dans Android Studio, accédez à Build → Generate Signed Bundle/APK et utilisez le magasin de clés SHA256 que nous avons extrait précédemment. Assurez-vous de cocher les deux cases de version de signature.

Télécharger l'APK

Vous êtes maintenant à la fin de ce processus. Pour télécharger votre apk, accédez simplement à Google Play Store, App Releases → Internal Test Track → Edit Release .

N'oubliez pas de compléter la fiche magasin

Tous les champs obligatoires doivent être remplis avant que votre application puisse être répertoriée pour le processus d'examen. Ces champs sont nécessaires pour des informations cruciales telles que les détails des prix, la liste des magasins, la classification du contenu, etc. Lorsque ce processus est terminé, vous devriez voir quatre coches vertes ️ indiquant que tous les champs obligatoires sont remplis.

Et c'est tout. Votre PWA est maintenant prête à être examinée et sera prête à être téléchargée publiquement dans quelques heures.

App Store d'Apple

De tous les principaux marchés d'applications, l'App Store d'Apple est peut-être celui qui est le moins accueillant ou même hostile aux PWA, ce qui est assez ironique étant donné que Steve Jobs a été le premier à envisager un avenir plein d'applications Web progressives.

Le moteur Safari complet se trouve à l'intérieur de l'iPhone. Et ainsi, vous pouvez écrire des applications Web 2.0 et Ajax étonnantes qui ressemblent exactement et se comportent exactement comme des applications sur l'iPhone. Et ces applications peuvent parfaitement s'intégrer aux services iPhone. Ils peuvent passer un appel, ils peuvent envoyer un e-mail, ils peuvent rechercher un emplacement sur Google Maps.

Steve Jobs, 2007

Dans iOS, les PWA sont sévèrement limitées en termes de fonctionnalités. Les notifications push ne sont pas prises en charge, le manifeste d'application Web n'est que partiellement pris en charge et les nouvelles fonctionnalités telles que New App Gallery ignorent souvent complètement les PWA. Et pour cette raison, il est logique que PWA ne soit pas la bienvenue dans l'App Store d'Apple, conformément aux directives d'examen de l'App Store d'Apple :

Votre application doit inclure des fonctionnalités, du contenu et une interface utilisateur qui la placent au-delà d'un site Web reconditionné . Si votre application n'est pas particulièrement utile, unique ou "ressemblant à une application", elle n'appartient pas à l'App Store.

Fonctionnalité minimale, directives d'examen de l'App Store

Étant donné qu'Apple fait de son mieux pour paralyser toutes les capacités de PWA, tout effort pour publier une PWA, même avec un wrapper d'application natif comme Cordova, est vain. Pour l'instant, nous ne pouvons qu'espérer que les futures versions d'iOS apporteront un meilleur support pour PWA, mais pour l'instant, la publication de PWA sur l'App Store d'Apple n'est pas possible , c'est pourquoi vous devriez plutôt envisager une approche d'application native si la plupart de votre public cible utilise des appareils basés sur iOS.

 Lire la suite : PWA sur iOS 14 Beta : Modifications subtiles

Boutique Microsoft

Comme indiqué dans notre article Windows 10 et PWA : l'avenir de la livraison de logiciels, Microsoft prépare depuis un certain temps les bases d'un magasin d'applications Web progressives et cela devient progressivement une réalité. Les PWA de marques plus populaires peuplent déjà tous les marchés d'applications et avec pas moins de résultats exemplaires pour les autres à suivre.

Comme Google, Microsoft accueille les PWA et en outre, ils prévoient même de populariser et de remplacer les applications UWP natives par des applications hybrides - une sorte d'applications Web progressives enveloppées dans des shells natifs.

En théorie, la publication de votre Progressive Web App sur le Microsoft Store ne devrait vous demander aucun effort, car il était initialement prévu qu'il s'agisse d'un processus automatique qui utilise Bing comme mécanisme d'exploration pour des PWA de qualité. Cependant, le tout est encore au stade expérimental et ne fonctionne pas aussi efficacement que prévu, c'est pourquoi vous devez soumettre manuellement votre PWA en tant que package d'application Windows (.appx). Mais ne vous inquiétez pas, le processus n'est pas aussi éprouvant pour les nerfs qu'un certain magasin d'applications.

Conditions

• Un compte Centre de développement Windows
• PWABuilderName
• Une application Web progressive fonctionnelle et dont la qualité est vérifiée et qui respecte les politiques du magasin

Étape 1 : Réservez un nom pour votre application

La première étape de la publication d'une application dans le Microsoft Store consiste à réserver un nom. Au cas où vous vous demanderiez ce qui se passerait si un garçon fou décidait de réserver tous les noms existants : ne vous inquiétez pas, la réservation de nom expirera après 3 mois.

Remplissez les champs obligatoires et notez-les quelque part car ces informations vous seront demandées plus tard.

Étape 2 : Générer un AppX à l'aide de PWABuilder

Comme mentionné ci-dessus, PWABuilder est un excellent moyen de générer un package fonctionnel publiable sur les principaux marchés d'applications. C'est l'un des premiers outils sur le marché qui a été développé par Microsoft uniquement dans le but de faire avancer l'adoption des PWA.

Générer un manifeste

Sur PWABuilder, entrez l'URL de votre PWA et cliquez sur Get started . Notez que cette étape est cruciale car elle identifie et/ou remplit automatiquement les informations manquantes dans votre manifest.json , ce qui est souvent nécessaire pour les PWA qui ne sont pas spécifiquement conçues pour Microsoft Store.

 Lecture recommandée : Manifeste PWA : Créer facilement le manifeste de votre application Web

La prochaine étape consiste à créer des service workers pour votre PWA, mais en supposant que la vôtre est une application Web progressive typique dans laquelle les service workers sont déjà intégrés, cette étape sera ignorée et nous passerons à l'étape finale : obtenir votre package .appx.

Générer AppX

En cliquant sur générer AppX, vous devriez voir quelque chose comme ceci :

C'est là que les informations antérieures peuvent être utiles. Remplissez les champs et une boîte de téléchargement contenant le package .appx s'affichera. Téléchargez-le et vous serez maintenant prêt à publier votre PWA sur Microsoft Store.

Si vous souhaitez tester votre PWA avant de la publier sur le store, il y a toujours la possibilité de la tester sous Windows en activant le mode développeur → Faites un clic droit sur test_install.ps1 → Exécuter avec PowerShell . Cela ajoutera automatiquement votre PWA à votre bureau et au menu Démarrer, à partir desquels il pourra être lancé et testé pour voir si tout fonctionne correctement.

Étape 3 : Soumettez votre package d'application au Microsoft Store

Pour publier votre PWA sur le Microsoft Store, vous devrez accéder au dossier du package dans le .zip que vous avez téléchargé précédemment. Dans ce dossier se trouve tout ce dont vous auriez besoin pour publier sur Microsoft Store. Pour plus de précisions, ce dossier ne contient aucun de vos codes car il sert uniquement de mécanisme de direction vers votre PWA sur le Web et d'autres métadonnées de magasin non liées.

Une fois que vous avez localisé le fichier windows.appx, rendez-vous sur la page de soumission de votre centre de développement et remplissez les informations requises :

Après avoir terminé toutes les étapes et rempli tous les champs obligatoires, le bouton " Soumettre au magasin " devrait s'allumer, indiquant que votre PWA est maintenant prête pour le processus de révision. Cela prendra une heure à plusieurs jours pour que ce processus soit terminé; une fois terminé, votre PWA sera certifié et disponible pour les téléchargements publics/privés (selon vos paramètres de disponibilité dans le centre de développement).

Conclusion

Après tout cela, vous vous demandez peut-être encore pourquoi devriez-vous même créer une application Web progressive, et encore moins passer par tous ces problèmes pour en publier une. Et vous avez raison de poser des questions aussi fondamentales.

Progressive Web App s'avère étape par étape être l'avenir de la livraison de logiciels et la prochaine étape naturelle dans l'évolution de la technologie Web. À l'heure actuelle, il est déjà largement utilisé partout dans le monde du commerce électronique, où une expérience unifiée et engageante sur tous les appareils est la clé de conversions élevées.

Étant une nouvelle technologie, il est déjà assez difficile de créer une application Web progressive telle quelle. Avec SimiCart, vous n'avez plus à vous soucier des phases de développement de votre PWA Magento car nous vous proposons une solution complète et la plus rentable du marché.