J'aime la musique métal de différentes directions. Pour suivre les nouveaux produits, j'ai fait un analyseur qui recherche de nouveaux albums et les met dans la base de données. Pendant l'existence de l'application, je n'ai presque pas touché l'analyseur, bien qu'il soit loin d'être idéal, mais le front-end a été refait plusieurs fois.
Under the cat est une histoire sur la façon dont j'ai copié l'application de react-native vers Svelte et l'ai publiée sur Google Play.
Création d'application
La première version de Metalz a été écrite dans react et mobx-state-tree . Ensuite, j'ai voulu mettre l'application sur Google Play et tout refaire sur react-native en utilisant le modèle d' expo . Lorsque Google, au risque de suppression, a exigé une version 64 bits, j'ai tout réécrit sur Svelte . À titre de comparaison, le build on react pesait ~ 300 Ko, le build sur Svelte ~ 90 Ko. Je n'ai effectué aucune optimisation d'assemblage, seulement des modèles standard.
Ad Ad
Dans l'application react-native, j'ai utilisé des publicités ad-mob, mais elle ne prend pas en charge la plate-forme Web. J'ai décidé de connecter AdSence, mais je n'ai pas réussi la modération. Le refus a indiqué qu'il n'y avait pas de contenu sur mon site et des recommandations ont été données pour la rédaction d'articles de qualité. Et moi, pour ainsi dire, je n'ai pas d'articles, donc l'appel a également échoué. J'ai dû changer de fournisseur de publicité. Le choix s'est porté sur le réseau publicitaire Yandex. J'ai fait le composant Svelte, dans le module dont le compteur de bloc d'annonces est sorti. C'est une pour toutes les instances du composant, vous pouvez donc utiliser cette option dans des rubans à défilement infini.
Ad.svelte<script context="module"> let id = 1; </script> <script> import { onMount } from "svelte"; const internalId = id; onMount(() => { id += 1; (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "RA--1", renderTo: `yandex_rtb_R-A--${internalId}`, async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(window, window.document, "yandexContextAsyncCallbacks"); }); </script> <div id={`yandex_rtb_R-A--${internalId}`} />
Ajout de fonctionnalités PWA
Après la rédaction de la demande, j'avais une question sur l'assemblée. Le svelte-template ne peut pas ajouter de hachage à un bundle. Je n'ai pas installé le collecteur, mais j'ai immédiatement pris Sapper . Hors de la boîte, j'ai obtenu un assemblage de bundle avec un hachage, SSR, PWA et routage. Vous pouvez en lire plus dans la documentation .
Build apk
La construction de l'application s'est avérée assez simple. J'ai utilisé cette instruction .
N'oubliez pas de remplacer les icônes par les vôtres, cela n'est pas mentionné dans le tutoriel.
La taille de l'apk avec PWA à l'intérieur s'est avérée ~ 1,3 Mo. Le paquet natif réactif pesait ~ 16,4 Mo. Je n'ai effectué aucune optimisation d'assemblage.
Publier sur Google Play
Après avoir envoyé la demande de vérification, ma publication a été refusée pour violation des conditions.
État de l'application MetalZ - Nouvelles versions de musique en métal (com.az67128.metalz): suspension de Google Play en raison d'une violation des règles
Lors de l'examen, nous avons constaté que votre application enfreignait les règles relatives aux Webviews et aux spams d'affiliation . Nous n'autorisons pas les applications dont le but principal est de générer du trafic d'affiliation vers un site Web ou de fournir une vue Web d'un site Web sans l'autorisation du propriétaire ou de l'administrateur du site Web.
Ensuite, j'ai déposé un appel, où j'ai indiqué que la procédure de confirmation TWA avait été effectuée, j'ai joint l'écran du Générateur et testeur de liste de relevés et un lien vers le fichier assetlinks.json.
L'application a été déverrouillée après quelques jours. Ce faisant, j'ai reçu des conseils du support:
À l'avenir, si vous avez la preuve de l'autorisation d'utiliser la propriété intellectuelle d'un tiers, vous pouvez la soumettre à l'avance à notre équipe en utilisant ce formulaire. Le lien se trouve également sur la page de votre fiche Play Store dans la section Description complète.
Par conséquent, si vous prévoyez de publier PWA et que vous souhaitez éviter les problèmes, envoyez à l'avance une preuve de propriété du domaine.
Si vous prévoyez de faire de la publicité dans votre application, la publication pourrait vous être refusée en l'absence d'une politique d'utilisation. Le générateur de politique de confidentialité de l'application m'a aidé.
Conclusion
La publication d'une application PWA sur Google Play a été plus facile que ce à quoi je m'attendais. Des pros, j'ai eu:
- Application légère;
- Une base de code;
- Mises à jour sans Google Play.
Le code source de l'application Svelte peut être consulté dans gitlab'e