Хабрахабр

Как я опубликовал PWA на Svelte в Google Play

Для отслеживания новинок я сделал парсер, который ищет свежие альбомы и складывает их в базу. Мне нравится метал музыка разных направлений. За время существования приложения парсер я почти не трогал, хотя он и далек от идеала, а вот фронтенд был переделан несколько раз.

metalz.web.app

Под катом рассказ о том, как я переписал приложение с react-native на Svelte и опубликовал его в Google Play.

Создание приложения

Потом я захотел выложить приложение в Google Play и переделал все на react-native с использованием шаблона expo. Первая версия Metalz была написана на react и mobx-state-tree. Для сравнения билд на react весил ~300kb, сборка на Svelte ~90kb. Когда Google под угрозой удаления потребовал 64-битную версию, я переписал все на Svelte. Никаких оптимизаций сборки я не проводил, только стандартные шаблоны.

Добавление рекламы

Решил подключить AdSence, но не прошел модерацию. В приложении react-native я использовал рекламу ad-mob, но он не поддерживает веб платформу. А у меня как бы и нет статей, поэтому апелляция тоже провалилась. В отказе указывалось, что на моем сайте нет контента и давались рекомендации по написанию качественных статей. Выбор пал на рекламную сеть яндекса. Пришлось менять провайдера рекламы. Он один на все экземпляры компонента, поэтому можете использовать этот вариант в лентах с бесконечной прокруткой. Я сделал компонент Svelte, в модуль которого вынесен счетчик блоков рекламы.

Ad.svelte

<script context="module"> let id = 1;
</script> <script> import 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: "R-A-ХХХХХХ-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}`} />

Добавление функционала PWA

Шаблон svelte-template не умеет добавлять хеш к бандлу. После того, как приложение было написано, у меня встал вопрос о сборке. Из коробки я получил сборку бандлов с хешем, SSR, PWA и роутинг. Настраивать сборщик я не стал, а сразу взял Sapper. Подробней можно прочитать в документации.

Сборка apk

Я воспользовался этой инструкцией.
Не забудьте заменить иконки на свои, об этом не говорится в туториале.
Размер apk c PWA внутри получился ~1. Собрать приложение оказалось довольно просто. Бандл на react-native весил ~16. 3mb. Никаких оптимизаций сборки я не проводил. 4mb.

Публикация в Google Play

После отправки приложения на проверку, я получил отказ в публикации за нарушение условий.

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

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. During review, we found that your app violates the Webviews and Affiliate Spam policy.

При этом я получил совет от поддержки: Далее я подал аппеляцию, где указал, что была произведена процедура подтверждения TWA, приложил скрин Statement List Generator and Tester и ссылку на файл assetlinks.json.
Приложение разблокировали через пару дней.

The link can also be found on your Store Listing page in the Full description section. 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.

Поэтому если соберетесь публиковать PWA и хотите избежать проблем, заранее отправьте доказательства владения доменом.

Мне помог app privacy policy generator. Если вы планируете размещать рекламу в своем приложении, вам могут отказать в публикации при отсутствии политики использования.

Заключение

Из плюсов я получил: Опубликовать PWA приложение в Google Play оказалось проще, чем я ожидал.

  • Малый вес приложения;
  • Одна кодовая база;
  • Обновления без Google Play.

Исходный код приложения на Svelte можно посмотреть в gitlab'e

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть