Публикация PWA в основных магазинах приложений: почему и как

Начиная с Google Play Store, один за другим рынок приложений присоединялся к побеждающей стороне, приветствуя прогрессивные веб-приложения (что такое прогрессивные веб-приложения?) в своем магазине, что сделало его новым подходом к доставке программного обеспечения. Учитывая все это, было бы напрасно не воспользоваться преимуществами этой новообретенной технологии для расширения охвата вашего приложения.

Чтобы дать вам более четкое представление обо всем движении прогрессивных веб-приложений, в частности о процессе публикации, сегодня мы рассмотрим текущее состояние PWA на основных рынках приложений, а также то, как опубликовать PWA в указанных магазинах.

Почему вы должны публиковать свое прогрессивное веб-приложение в крупных магазинах приложений?

Раньше прогрессивные веб-приложения были ограничены только веб-установками (Добавить на главный экран). Однако со временем торговые площадки приложений, такие как Google и Microsoft, начали осознавать потенциал PWA и выступили с инициативами по продвижению внедрения этой технологии в будущем.

Если у вас есть возможности и средства, наше профессиональное мнение таково, что вы должны пойти на это — сделать свою омни-платформу PWA. В конце концов, крупные бренды, такие как Twitter, Uber и Spotify, присоединились к победе и добились блестящих результатов, доказывая, что эта технология действительно не только маркетинг и заслуживает внимания. Сами Microsoft даже пошли еще дальше, планируя сделать прогрессивные веб-приложения основным интерфейсом в Windows.

 Рекомендуемая литература : 12 лучших примеров прогрессивных веб-приложений.

Как опубликовать PWA в крупных магазинах приложений

Google Play магазин

Будучи предшественником движения PWA, было бы неудивительно, если бы Google Play Store раскрыл объятия для прогрессивных веб-приложений. Благодаря внедрению TWA (Trusted Web Activity) вся последовательность публикации стала намного проще и должна быть завершена в кратчайшие сроки.

Требования

• Android-студия установлена
• Аккаунт разработчика Google
• Работающие и проверенные на качество прогрессивные веб-приложения.

Шаг 1 : Создайте клон приложения TWA Starter для Android и измените его.

• Клонируйте проект svgomg-twa с помощью следующей команды:

 клон git https://github.com/GoogleChromeLabs/svgomg-twa.git

• Импортируйте проект в Android Studio, используя File > New > Import Project .

В /app/build.gradle измените twaManifest по своему усмотрению. Подробности о том, что и как изменить, можно найти в файле build.gradle.

Примечание. Идентификатор applicationId должен соответствовать формату <com>.<your-brand>.<your-app>

После изменений ваш /app/build.gradle должен выглядеть примерно так:

 деф twaManifest = [
    идентификатор приложения: 'com.simicart.app',
    hostName: 'simicart.com', // Домен, открываемый в TWA.
    launchUrl: '/', // Начальный путь для TWA. Должен относиться к домену.
    name: 'SimiCart PWA', // Имя, отображаемое в программе запуска Android.
    themeColor: '#ED8A19', // Цвет, используемый для строки состояния.
    navigationColor: '#303F9F', // Цвет, используемый для панели навигации.
    backgroundColor: '#bababa', // Цвет, используемый для фона заставки.
    enableNotifications: false, // Установите значение true, чтобы включить делегирование уведомлений.
    // Добавьте сюда ярлыки для вашего приложения. Каждый ярлык должен содержать следующие поля:
    // - имя: Строка, которая будет отображаться в ярлыке.
    // - short_name: Используется более короткая строка, если |name| слишком долго.
    // - URL-адрес: Абсолютный путь URL-адреса для запуска приложения (например, '/create').
    // - значок: имя ресурса в папке с возможностью рисования для использования в качестве значка.
    ярлыки: [
        имя: 'Открыть SimiCart', 
        короткое_имя: 'Открыть', 
        адрес: '/открыть', 
        значок: «всплеск»
    ]
,
    // Продолжительность анимации затухания в миллисекундах, которая будет воспроизводиться при удалении заставки.
    заставкаScreenFadeOutDuration: 300
]

Шаг 2. Создайте хранилище ключей и проверьте APK

Хранилища ключей или ключи загрузки необходимы для проверки вашего APK. Чтобы создать хранилище ключей, запустите Android Studio , перейдите в раздел « Сборка» → «Создать подписанный пакет/APK » и заполните необходимые поля.

После того, как вы создали хранилище ключей, вам нужно будет извлечь из него отпечаток SHA256 , используя следующие команды:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Тип записи: ПриватКейэнтри
...
Отпечатки сертификатов:
         ША1: ...
         SHA256: 2А:9Б:А8:64:32:0А:69:99...: ? скопируйте эту строку

Шаг 3. Настройте ссылку на цифровой актив

Ссылка на цифровой актив необходима для подтверждения права собственности на ваш веб-контент, которую впоследствии можно использовать для ссылки на ваш APK.

Создать файл выписки

Используйте отпечаток SHA256 , который вы извлекли ранее, и создайте файл выписки с помощью генератора списка выписок и тестера.

После создания файла выписки следующим шагом будет создание общедоступного файла, содержащего информацию из инструмента цифровых активов. Файл должен быть размещен на вашем веб-хостинге и в этом месте:

 .well-known/assetlinks.json

Расположение этого файла зависит от процесса сборки вашего веб-приложения, но обычно он должен находиться в развернутых каталогах, а именно в каталогах «public» или «dist».

Когда все будет готово, следующим и последним шагом будет развертывание вашего приложения.

Шаг 4. Создайте и опубликуйте свое приложение в Google Play.

С настройками Google Play Console по умолчанию перейдите в раздел « Все приложения» → «Создать приложение ».

Создать внутренний тест

Перейдите к Релизы приложений → Внутренний тестовый трек → Создать выпуск , чтобы создать внутренний тестовый трек вашего приложения.

Создайте подписанный APK

В Android Studio перейдите к Build → Generate Signed Bundle/APK и используйте хранилище ключей SHA256 , которое мы извлекли ранее. Убедитесь, что вы отметили оба флажка версии подписи.

Загрузите APK-файл

Теперь вы находитесь в конце этого процесса. Чтобы загрузить свой apk, просто перейдите в Google Play Store, « Выпуски приложений» → «Внутреннее тестирование» → «Редактировать выпуск» .

Не забудьте заполнить список магазинов

Все обязательные поля должны быть заполнены, прежде чем ваше приложение может быть включено в список для процесса проверки. Эти поля необходимы для важной информации, такой как информация о ценах, список магазинов, рейтинг контента и т. д. Когда этот процесс будет завершен, вы должны увидеть четыре зеленые галочки ️, указывающие на то, что все обязательные поля заполнены.

Вот и все. Теперь ваше PWA готово к просмотру и через несколько часов будет готово для общедоступной загрузки.

Apple App Store

Из всех основных торговых площадок приложений Apple App Store, возможно, наименее приветствует или даже враждебно относится к PWA, что довольно иронично, учитывая, что Стив Джобс был первым, кто увидел будущее, полное прогрессивных веб-приложений.

Полный движок Safari находится внутри iPhone. Итак, вы можете писать удивительные приложения Web 2.0 и Ajax, которые выглядят и ведут себя точно так же, как приложения для iPhone. И эти приложения могут идеально интегрироваться со службами iPhone. Они могут позвонить, отправить электронное письмо, найти местоположение на Google Maps.

Стив Джобс, 2007 г.

В iOS PWA сильно ограничены с точки зрения возможностей. Нет поддержки push-уведомлений, манифест веб-приложения поддерживается лишь частично, а новые функции, такие как New App Gallery, часто вообще игнорируют PWA. И из-за этого имеет смысл только то, что PWA не приветствуются в Apple App Store, в соответствии с Руководством Apple по обзору App Store:

Ваше приложение должно включать в себя функции, контент и пользовательский интерфейс, которые выводят его за пределы переупакованного веб-сайта . Если ваше приложение не является особенно полезным, уникальным или «похожим на приложение», ему не место в App Store.

Минимальная функциональность, руководство по обзору App Store

Поскольку Apple делает все возможное, чтобы вывести из строя все возможности PWA, любые попытки опубликовать PWA — даже с нативной оболочкой приложения, такой как Cordova, — бесполезны. На данный момент мы можем только надеяться, что в будущих версиях iOS будет улучшена поддержка PWA, но на данный момент публикация PWA в Apple App Store невозможна , поэтому вместо этого вам следует рассмотреть подход с собственными приложениями, если большая часть вашей целевой аудитории использует устройства на базе iOS.

 Подробнее: PWA в бета-версии iOS 14: незначительные изменения

Магазин Майкрософт

Как сказано в нашей статье «Windows 10 и PWA: будущее доставки программного обеспечения», Microsoft уже давно закладывает основу для магазина прогрессивных веб-приложений, и это шаг за шагом становится реальностью. PWA от более популярных брендов уже заполонили все рынки приложений и дают не менее образцовые результаты, которым могут последовать другие.

Как и Google, Microsoft приветствует PWA и, более того, они даже планируют популяризировать и заменять собственные приложения UWP гибридными приложениями — своего рода прогрессивными веб-приложениями, заключенными в собственные оболочки.

Теоретически публикация вашего прогрессивного веб-приложения в Microsoft Store не потребует от вас никаких усилий, поскольку изначально планировалось, что это будет автоматический процесс, использующий Bing в качестве механизма сканирования качественных PWA. Однако все это все еще находится на экспериментальной стадии и работает не так эффективно, как планировалось, поэтому вам нужно будет вручную отправить PWA в виде пакета приложения Windows (.appx). Но не волнуйтесь, процесс не такой нервный, как определенный магазин приложений.

Требования

• Учетная запись Центра разработки для Windows
• PWABuilder
• Работающее и проверенное на качество прогрессивное веб-приложение, соответствующее политикам магазина.

Шаг 1. Зарезервируйте имя для своего приложения.

Первым шагом в публикации приложения в Microsoft Store является резервирование имени. Если вам интересно, что произойдет, если один сумасшедший парень решит зарезервировать все существующие имена: не волнуйтесь, резервирование имени истечет через 3 месяца.

Заполните необходимые поля и отметьте их где-нибудь, так как эта информация потребуется позже.

Шаг 2. Создайте AppX с помощью PWABuilder.

Как упоминалось выше, PWABuilder — отличный способ создать функциональный пакет, который можно опубликовать на основных торговых площадках приложений. Это один из первых инструментов на рынке, разработанный Microsoft исключительно с целью дальнейшего внедрения PWA.

Создать манифест

В PWABuilder введите URL-адрес вашего PWA и нажмите «Начать». Обратите внимание, что этот шаг имеет решающее значение, поскольку он автоматически идентифицирует и/или заполняет недостающую информацию в вашем manifest.json , что часто необходимо для PWA, которые не созданы специально для Microsoft Store.

 Рекомендуемая литература: Манифест PWA: простой способ создания манифеста веб-приложения

Следующим шагом является создание сервис-воркеров для вашего PWA, но если вы представляете собой типичное Progressive Web App, в которое сервис-воркеры уже интегрированы, этот шаг будет пропущен, и мы перейдем к последнему шагу — получению вашего пакета .appx.

Создать AppX

После нажатия кнопки «Создать AppX» вы должны увидеть что-то вроде этого всплывающего окна:

Здесь может пригодиться предыдущая информация. Заполните поля, и появится окно загрузки, содержащее пакет .appx. Загрузите его, и теперь вы будете готовы к публикации своего PWA в Microsoft Store.

Если вы хотите протестировать PWA перед публикацией в магазине, всегда есть возможность протестировать его в Windows, включив режим разработчика → щелкните правой кнопкой мыши test_install.ps1 → Запустите с помощью PowerShell . Это автоматически добавит ваше PWA на рабочий стол и в меню «Пуск», откуда его можно будет запустить и протестировать, чтобы убедиться, что все работает правильно.

Шаг 3. Отправьте пакет приложения в Microsoft Store.

Чтобы опубликовать PWA в Microsoft Store, вам нужно перейти к папке пакета внутри ZIP-файла, который вы скачали ранее. В этой папке находится все, что вам нужно для публикации в Microsoft Store. Для пояснения: эта папка не содержит вашего кода, поскольку она служит только в качестве направляющего механизма для вашего PWA в Интернете и других несвязанных метаданных Магазина.

Найдя файл windows.appx, перейдите на страницу отправки в Центре разработки и введите необходимую информацию:

После выполнения всех шагов и заполнения всех обязательных полей кнопка « Отправить в магазин » должна загореться, указывая на то, что ваше PWA теперь готово к процессу проверки. Для завершения этого процесса потребуется от часа до нескольких дней; как только это закончится, ваше PWA будет сертифицировано и доступно для общедоступной/частной загрузки (зависит от ваших настроек доступности в Dev Center).

Вывод

После всего этого, возможно, вы все еще задаетесь вопросом, зачем вообще создавать прогрессивное веб-приложение, не говоря уже о том, чтобы преодолевать все эти трудности, чтобы опубликовать его. И вы правы, задавая такие фундаментальные вопросы.

Progressive Web App шаг за шагом доказывает, что является будущим доставки программного обеспечения и следующим естественным шагом в эволюции веб-технологий. На данный момент он уже широко используется повсюду в мире электронной коммерции, где унифицированный и привлекательный опыт на всех устройствах является ключом к высокой конверсии.

Поскольку это новая технология, уже достаточно сложно создать одно прогрессивное веб-приложение как есть. С SimiCart вам больше не нужно беспокоиться об этапах разработки вашего Magento PWA , поскольку мы предоставляем полное и лучшее экономичное решение на рынке.