Главная

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

2019-08-22 в 5:50, admin, рубрики: Google Play, javascript, pwa, sapper, svelte, SvelteJs, TWA, Разработка веб-сайтов

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

metalz.web.app

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

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

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

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

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

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: "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 не умеет добавлять хеш к бандлу. Настраивать сборщик я не стал, а сразу взял Sapper. Из коробки я получил сборку бандлов с хешем, SSR, PWA и роутинг. Подробней можно прочитать в документации.

Сборка apk

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

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

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

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.

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

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.

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

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