How I posted PWA on Svelte on Google Play

I like metal music of different directions. To track new products, I made a parser that looks for fresh albums and puts them in the database. During the existence of the application, I almost did not touch the parser, although it is far from ideal, but the front-end was redone several times.

Under the cat is a story about how I copied the application from react-native to Svelte and published it on Google Play.

Application creation

The first version of Metalz was written in react and mobx-state-tree . Then I wanted to put the application on Google Play and remade everything on react-native using the expo template. When Google, at risk of deletion, demanded a 64-bit version, I rewrote everything on Svelte . For comparison, the build on react weighed ~ 300kb, the build on Svelte ~ 90kb. I did not perform any assembly optimizations, only standard templates.

Ad Ad

In the react-native application, I used ad-mob ads, but it does not support the web platform. I decided to connect AdSence, but did not pass moderation. The refusal indicated that there was no content on my site and recommendations were given for writing quality articles. And I, as it were, have no articles, so the appeal also failed. I had to change the advertising provider. The choice fell on the Yandex advertising network. I made the Svelte component, in the module of which the ad block counter is rendered. It is one for all instances of the component, so you can use this option in ribbons with infinite scroll.

<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}`} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Adding PWA Functionality

After the application was written, I had a question about the assembly. The svelte-template cannot add a hash to a bundle. I did not set up the collector, but immediately took Sapper . Out of the box, I got a bundle assembly with a hash, SSR, PWA, and routing. You can read more in the documentation .

Build apk

Building the application turned out to be quite simple. I used this instruction .

Do not forget to replace the icons with your own, this is not mentioned in the tutorial.

The apk size with PWA inside turned out ~ 1.3mb. The react-native bundle weighed ~ 16.4mb. I did not perform any assembly optimizations.

Publish to Google Play

After sending the application for verification, I was refused publication for violation of the conditions.

Status of app MetalZ - New metal music releases (com.az67128.metalz): Suspended from Google Play due to policy violation



During review, we found that your app violates the Webviews and Affiliate Spam policy. We don't allow apps whose primary purpose is to drive affiliate traffic to a website or provide a webview of a website without permission from the website owner or administrator.

Next, I filed an appeal, where I indicated that the TWA confirmation procedure had been carried out, attached the Statement List Generator and Tester screen and a link to the assetlinks.json file.

The application was unlocked after a couple of days. In doing so, I received advice from support:

In the future, if you have proof of permission to use a 3rd party's intellectual property, you can submit it to our team in advance using this form. The link can also be found on your Store Listing page in the Full description section.

Therefore, if you are planning to publish PWA and want to avoid problems, send proof of domain ownership in advance.

If you plan to advertise in your application, you may be denied publication in the absence of a usage policy. App privacy policy generator helped me.

Conclusion

Publishing a PWA application on Google Play was easier than I expected. From the pros, I got:

• Light weight application;
• One code base;
• Updates without Google Play.

Svelte application source code can be viewed in gitlab'e