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

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


    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.


    Заключение


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


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

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

    Поддержать автора
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 19

      +2
      билд на react весил ~300kb, сборка на Svelte ~90kb.

      Размер apk c PWA внутри получился ~1.3mb. Бандл на react-native весил ~16.4mb.

      Отличные кейсы, спасибо что поделились!
        –2

        Если не использовать Expo, билд на react будет значительно меньше

        +1
        Где эта граница где js уже не будет не торт для приложения под Andoid/iOS?
          0
          Потестил metalz.web.app на iphone.
          Скролл работает глючно. Кнопка "<" которая находится в левом верхнем углу и должна переводить на предыдущий месяц почему-то выглядит и действует как ">".
          Короче, к моему сожалению, не получится писать PWA «не глядя» и не тестируя.
            0

            К сожалению, не владею айфоном, поэтому протестировать нормально не получилось. Но мне кажется, что доработка под safari не очень трудозатратна для такого проекта.

          +1
          Этот код поможет сэкономить время. Нужно заменить данные и собрать приложение в Android Studio.

            +2

            Спасибо за пример! Отлично мотивирует

              +1
              Я слушаю метал иногда, но больше люблю альтернативу, спасибо за приложение.
              А, есть возможность добавить выбор категории музыки для мониторинга?
                +1

                вы можете выбрать фильтрацию по жанрам


                скриншоты

                imageimage

                  +1
                  Хабр не для реквестов, но если завезете туда djent, то у вас плюс один активный пользователь, а то после закрытия gotdjent и рекомендаций apple music стало грустно
                0
                Расскажите, пожалуйста, как и из каких источников вы собираете информацию о новых релизах?
                0
                Если в Chrome зайти и посмотреть настройки сайтов, то можно увидеть сколько приложение ест памяти. Первая установка и 1.5 минуты использования около 300 МБ, вторая установка с 30 секундами 208 МБ.
                Что тут хорошего?
                  0
                  Мне кажется, вы смотрите полное потребление памяти сайта вместе с контентом?
                    0
                    Естественно. Сразу после установки 100 Мб, немного полистал список — 400 Мб. Поэкспериментируйте сами и убедитесь.
                  0
                  Парень, из-за твоей статьи не спал всю ночь! Вот это реклама!
                  До утра читал и экпериментировал со Svelte.
                    0

                    Поставил себе на телефон — не запускается, говорит что нужен хром. Жаль без него не работает.

                      0

                      Да, к сожалению, так устроен twa. Но вы всегда можете открыть сайт https://metalz.web.app и даже установить как pwa, если ваш браузер поддерживает

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое