Я создал прогрессивное веб-приложение и опубликовал его в 3 магазинах программ. Вот что я вызнал.

1656630390 ya sozdal progressivnoe veb prilozhenie i opublikoval ego v 3 magazinah

от JudahGabriel Himango

Месяц работы, несколько сотен долларов и куча волокиты.

Недавно я опубликовал Chavah Messianic Radio, музыкальный плеер, похожий на Pandora, как прогрессивное веб-приложение и отправил его в 3 магазина приложений (Google Play, iOS App Store, Windows Store).

62wLkOAc65vJn5o0GBCuKCBtEQhVZZZKb-8n
gUOEhRj9hddNR96-lkQ-h1b6Cdzyi59x3V1c
e16fvva-1318NaMEUXmI-785IT9AT7krylho

Процесс был и болезненным, и поучительным. Вот что я вызнал.

Почему?

Во-первых, вы можете спросить: Зачем вообще размещать свою программу в магазинах программ? Просто живи в открытой сети!»

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

Для моей веб-программы было 2 важные причины попасть в магазин программ:

  1. Спрос пользователей
  2. Ограничение веб-приложений враждебными мобильными платформами Apple

Спрос пользователей: мои пользователи многие годы спрашивали меня: Есть ли программа для Chavah? Я не вижу этого в магазине.

Они спрашивают это, потому что мы научили пользователей искать программы в фирменных магазинах программ.

Мой ответ до сих пор был следующим:

«Ого, вам не нужно приложение – просто перейдите на сайт на своем телефоне! Это работает!»

Но я как-то соврал.

Настоящие веб-приложения только вроде бы работают на мобильных устройствах. Это подводит меня ко второй причине: ограничение веб-приложений враждебными мобильными платформами Apple.

Поставщики мобильных платформ, как Apple, есть абсолютно круто с приложениями, которые используют ваш телефон по полной. Получайте доступ к своему местоположению, воспроизводите фоновое аудио, получайте свои GPS-координаты, воспроизводите несколько вещей одновременно и т.д.

Apple совершенно спокойно относится к этому.

Но только если вы платите Apple 99 долларов в год за эту привилегию.

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

Для моего приложения музыкального плеера, похожего на Pandora, эта ужасная поломка оказалась многими способами.

От незначительных вещей типа «iOS Safari не позволяет воспроизводить аудио без предварительного взаимодействия со страницей» до серьезных вещей, останавливающих шоу, таких как «iOS Safari не позволяет воспроизводить следующую песню, если ваша программа работает в фоновом режиме или если ваш экран выключен ».

О, плюс странные визуальные аномалии, например ввод текста в текстовое поле и свидание текста в другом месте экрана.

Итак, чтобы сделать мое музыкальное приложение HTML5 действительно функциональным и работать на мобильных устройствах людей, нужно было превратить мое PWA в приложение в магазине программ.

Барьеры для входа

В идеальном мире публикация вашей веб-программы в магазинах приложений выглядела бы так:

  • Ваш веб-облачный хост или поставщик непрерывной интеграции
  • Вы опубликовали прогрессивную веб-приложение. Опубликовать в магазинах программ?

☑ iOS App Store

☑ Google Play

☑ Магазин Windows

(Иначе, как Microsoft экспериментирует, ваш PWA просто автоматически появится в магазине приложений, когда Bing его сканирует.)

Но, к сожалению, мы живем не в идеальном мире. Вместо этого мы имеем дело со всеми видами проприетарных родных BS, чтобы получить наши веб-программы в магазинах.

Каждый магазин приложений имеет барьер для входа: насколько трудно взять существующую веб-программу и поместить ее в магазин приложений.

Ниже я перечисляю некоторые из препятствий.

Стоимость

  • яблоко: 99 долларов США в год, чтобы ваше приложение было размещено в магазине приложений для iOS.
  • Google: Одноразовая комиссия в размере 25 долларов США за размещение вашего приложения в магазине Google Play.
  • Microsoft: Бесплатно!

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

Раньше Apple это понимала. Когда он впервые представил iPhone, Стив Джобс был категоричен, что за HTML5 будущее и что приложения будут просто веб-приложениями. Не было родного iPhone SDK для сторонних разработчиков. С тех пор Apple отказалась от этого видения.

Google попросил одноразовую комиссию в размере 25 долларов США. Вероятно, чтобы избежать распространения спама и уменьшить доступ действительно мусорных программ в магазин.

Microsoft, кажется, намерена просто увеличить общее количество приложений в своем магазине приложений, независимо от качества.

Победитель: Microsoft. Трудно победить бесплатно.

Добавление нативных возможностей

В идеальном мире мне не пришлось бы писать ни одной дополнительной строки кода для моей веб-приложения для интеграции в ОС. Или, как сказал Стив Джобс еще в 2007 году,

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

– Стив Джобс, 2007

Для меня это означает, что моя веб-приложение воспроизводит фоновый звук с помощью стандартного аудио HTML5; это отлично работает на всех ОС.

Моя веб-приложение объявляет, какой аудио воспроизводится, и операционные системы улавливают это, показывая информацию о текущей песне на экране блокировки.

Мое приложение контролирует звук с помощью стандартного API аудио HTML5; ОС подхватывает это и предоставляет элементы управления воспроизведением/паузой/следующим/громкостью/панелью трека на экране блокировки.

Но, к сожалению, мы живем не в идеальном мире. Все вышеперечисленные вещи на самом деле не работают из коробки на всех 3 платформах.

Моя веб-приложение требует воспроизведения аудио в фоновом режиме. И загружать URL-адреса из моего CDN. Звучит разумно, верно? И бонус, как насчет отображения информации о песне, которая сейчас воспроизводится, на экране блокировки? А управление аудио (воспроизведение/пауза/следующий и т.д.) с экрана блокировки? Насколько это тяжело?

Здесь используются три очень разных подхода:

  • яблоко: мы не предоставляем веб-приложениям возможность декларировать такие возможности; вам нужно будет написать родную оболочку (например, из Cordova) для взаимодействия с операционной системой.
  • Google: Web FTW! Давайте создадим новый веб-стандарт, показывающий аудио и элементы управления с экрана блокировки. Фоновый звук? Конечно, вперед!
  • Microsoft: Мы введем наш собственный API, window.Windows.*, в ваше глобальное пространство имен JavaScript, и вы сможете использовать его, чтобы делать то, что хотите.

Подробнее о каждом магазине здесь:

Для магазина приложений iOS нужно ли вашей веб-программе воспроизводить фоновый звук? Используйте плагин Cordova. Нужно показать песню, которая сейчас воспроизводится, на экране блокировки? Используйте плагин Cordova. Нужно управлять воспроизводящейся песней с экрана блокировки? Используйте плагин Cordova. Вы поняли идею. В сущности, Cordova заставляет Apple думать, что вы родная программа. И поскольку вы не плохое веб-приложение, Apple позволяет вам делать все то, что могут делать собственные приложения. Вам просто нужны собственные трюки – плагины Cordova – чтобы вы могли это сделать.

Для Google Play хорошо, что я могу просто написать код JS, чтобы это работало; плагины Cordova здесь не нужны. Конечно, этот JS не будет работать нигде, кроме Chrome на Android… но, возможно, однажды (в идеальном мире!) все мобильные браузеры введут эти веб-API… и мир будет жить как одно целое. Я уже почти готов придумать несколько утопических мелодий Джона Леннона о хиппи.

Для Windows Store вы хотите воспроизвести фоновый звук? Простите! То есть, если вы не заявите о своих намерениях в нашем собственном файле манифеста возможностей (легко) И вы реализуете этот собственный медиаинтерфейс с помощью window.Windows.SystemMediaTransportControls (не так просто). В противном случае мы выключим ваш звук при переходе в фоновый режим.

Победитель: Google. Я хочу иметь возможность просто писать JavaScript и разрешить ОС получать подсказки из моей программы.

Второе место: окна. Я все еще могу писать обычный старый JavaScript, но мне нужно общаться с собственным API Windows JS, который был введен в мой процесс при работе в Windows. Не страшно.

Неудачник: Apple. Им безразличны веб-приложения. На самом деле, это еще хуже. Такое ощущение, что они на самом деле враждебный к веб-приложениям. iOS Safari – это новый Internet Explorer 6. Он отстал почти во всех веб-стандартах, особенно в отношении прогрессивных веб-приложений. Вероятно, это связано с бизнесом: веб-приложения подрывают их рейтинг 99 долларов США в год + 33% покупок в программе. Итак, чтобы заставить мое веб-приложение работать на их платформе, я должен делать вид, что я родное приложение.

Регистрация в App Store

Отправка PWA в магазин приложений требует регистрации, проверки бизнеса и дополнительной бюрократии. Вот как прошли 3 магазина приложений:

  • яблоко: вы должны подтвердить, что вы являетесь легальным зарегистрированным предприятием. Эту проверку выполняем не мы, а третья сторона, которая может знать или не знать о вашем бизнесе.
  • Google: Вы хотите, чтобы ваше приложение было в нашем магазине? Круто от нас.
  • Microsoft: Вы хотите, чтобы ваше приложение было в нашем магазине? Круто от нас.

Самой большой болью для меня было то, что Apple подтвердила легальный бизнес.

Сначала я зашел на сайт и зарегистрировался в приложении для разработчиков Apple. Я указал свое имя и информацию о компании. (Отдельно: я думаю, что Apple не позволит вам предоставить приложение, если у вас нет зарегистрированной легальной компании?)

Я нажимаю дальше.

«Введенная вами информация не соответствует вашему профилю D&B».

Мой… что?

Немного погугнув показали, что «профиль D&B» – это Dun and Bradstreet. Я никогда раньше не слышал об этой группе, но я узнал, что Apple использует их для проверки вашей юридической информации о корпорации.

И, по-видимому, мой профиль D&B не совпадал с тем, что я указал в своей регистрации Apple Dev.

Я еще чуть-чуть посмотрел и обнаружил, что форумы разработчиков Apple усеяны подобными сообщениями. Ни у кого не было хорошего ответа.

Я обращаюсь в службу поддержки Apple Dev. Через 24 часа мне послали электронное письмо с сообщением, что я должен связаться с D&B.

t16Xm1QZET5YPeKUbdJEma2DHqYalp61elEv

Я решил связаться с ними… но Apple говорит, что им понадобится несколько дней ответить.

Сейчас я думаю отказаться от этой идеи.

Ожидая связи со службой поддержки D&B, я решил зайти на сайт D&B, подтвердить свое лицо и обновить информацию о своей компании, которую, я предполагаю, они взяли из государственных регистрационных записей.

Я вспоминал, как это плохо? Я просто хочу разместить существующую веб-программу в магазине. Пожалуйста, помогите.

Я иду в D&B, чтобы обновить профиль своей компании. Сюрприз! У них есть ошибка JavaScript в логике проверки, по которой я не могу обновить свой профиль.

К счастью, я опытный разработчик. Я нажимаю установить точку остановлю в их JavaScript, нажимаю «Отправить», изменю флажок isValid на «true» и вуаля! Я обновил свой профиль D&B.

Вернуться к Apple Dev –> давайте попробуем еще раз. Зарегистрировать мою компанию…

«Ошибка: вводимая вами информация не соответствует вашему профилю D&B».

Ты журчашь меня.

Снова поговорите с Apple. «О, может понадобиться 24–48 часов, чтобы обновленная информация D&B попала в нашу систему».

Вы знаете, потому что цифровая информация может занять 2 дня для перехода от сервера A к серверу B. Вздохните.

Через два дня я пытаюсь зарегистрироваться… наконец-то это работает! Теперь я в программе Apple Developer и могу посылать программы на проверку.

Победитель: Google и Microsoft; обоим потребовалось 5 минут, чтобы зарегистрироваться.

Неудачник: Регистрация Apple Developer была медленной и болезненной. На реальную регистрацию в их программе для разработчиков ушло около недели. Мне нужно было связаться со службой поддержки от 2 разных компаний. И это требовало от меня выполнение настройки кода JavaScript на веб-сайте третьей стороны только для того, чтобы я мог пройти проверку на стороне клиента с ошибками, чтобы моя информация поступала Apple, чтобы я мог отправить свое приложение в магазин. Вау, просто… вау.

Если для Apple есть какое-то спасение, так это то, что у них есть некоммерческая программа 501c3, по которой некоммерческие организации могут отказаться от годовой платы в размере 99 долларов США. Я воспользовался этим. И, может быть, этот дополнительный шаг осложнил дело.

Упаковка программы, создание, отправка

Когда у вас есть веб-приложение, вы должны применить с ним магию, чтобы превратить его в то, что вы можете подать на рассмотрение App Store.

  • яблоко: сначала купите Mac; Вы не можете создать приложение для iOS без Mac. Установите XCode и эти инструменты для создания и фреймворки, приобретите сертификат в нашем приложении разработчиков, создайте профиль на отдельном веб-сайте под названием iTunes Connect, свяжите его с сертификатом, созданным в центре разработчиков Apple, а затем отправьте с помощью XCode . Легко, как раз, два, три… тридцать семь…
  • Google: загрузите Android Studio, сгенерируйте через него сертификат безопасности, а затем упаковайте его с помощью Studio. Загрузите пакет на веб-сайт разработчика Android.
  • Microsoft: Создайте пакет .appx с помощью этих бесплатных инструментов командной строки или Visual Studio. Загрузите веб-сайт корпорации Майкрософт.

Хорошая новость, есть бесплатный инструмент, который превращает вашу веб-приложение в пакет программ. Этот отличный бесплатный инструмент называется PWABuilder. Он анализирует URL-адрес, сообщает вам, что вам нужно сделать (например, добавить несколько значков главного экрана к веб-манифесту PWA). А с помощью 3-этапного мастера он позволяет скачивать пакеты, содержащие всю магию:

  • Для Windows он практически генерирует пакет .appx. Вы можете буквально взять это и подать на Windows Dev Center.
  • Для Google он генерирует приложение Java-оболочка, содержащее вашу веб-программу PWA. С Android Studio вы создаете этот проект, генерирующий пакет Android, который можно загрузить на сайт Android Dev Center.
  • Для Apple он создает проект XCode, который можно создать с помощью XCode. Для чего требуется Mac.

Вновь Apple оказалась самой болезненной из всех этих. У меня нет Mac. Но вы не можете создать проект XCode для PWA без Mac.

Я не хочу платить несколько тысяч долларов за публикацию моего бесплатного приложения в магазине приложений Apple. Я не хочу платить за привилегию обогащать платформу iOS от Apple.

К счастью, MacInCloud стоит около 25 долларов в месяц, и они дают вам машину Mac с уже установленным XCode. Вы можете удаленно подключиться к нему с помощью удаленного рабочего стола Windows или даже через веб-интерфейс.

Недостаточно было просто создать проект XCode и представить его. Мне пришлось создать сертификат безопасности на сайте Apple Developer, а затем создать новый профиль приложения на отдельном сайте iTunes Connect, куда вы фактически отправляете пакет.

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

Для этого потребовалось не менее недели, чтобы привести мою программу в рабочее состояние, прежде чем я мог отправить ее в магазин программ.

Победитель: Microsoft. Представьте себе: вы можете перейти на веб-сайт, создающий пакет приложения для вашей веб-приложения. А если это не ваше дело, вы можете скачать инструменты командной строки, которые проделают эту работу. лицо GUI? Бесплатная Visual Studio будет работать.

Второе место: Google. Нужна Android Studio, но она бесплатна, запускает все и достаточно проста.

Неудачник: Apple. Мне не нужно было покупать фирменный компьютер — Mac за несколько тысяч долларов — чтобы создавать свою программу. Путение Apple Dev Center –> iTunes Connect похоже на попытку отсутствующего менеджера подтолкнуть iTunes к разработчикам. Он должен быть частью сайта Apple Developer Center.

Тестирование программы

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

  • яблоко: Для тестирования ваши тестировщики должны установить Test Flight на своих устройствах iOS. Затем вы добавляете электронный адрес тестировщика в iTunes Connect. Тестер получит уведомление и сможет протестировать ваше приложение, прежде чем оно станет доступным в магазине приложений.
  • Google: в Android Dev Center вы добавляете электронные адреса тестировщиков. После добавления они смогут увидеть вашу альфа/бета-версию в App Store.
  • Microsoft: Я на самом деле этим не пользовался, поэтому не буду это комментировать

Победитель: Подбрасывать. Приложение Apple Test Flight простое и оптимизированное. Вы можете контролировать срок действия альфа-/бета-версии прямо на стороне администратора. Google не отставал; это было довольно безболезненно, даже не требовало отдельного приложения.

Обзор программы

Когда ваше приложение будет готово к показу, вы присылаете его на рассмотрение. Проверка выполняется как с помощью программного контрольного списка (например, есть ли у вас значок запуска?), так и реальными людьми («ваше приложение является клоном X, мы его отклоняем»).

  • яблоко: перед отправкой XCode предупреждает вас о возможных проблемах при сборке. Проверка программы людьми занимает около 24–48 часов.
  • Google: Кто дома? Android Studio не сообщила мне ни о каких потенциальных проблемах, и моя программа была одобрена через несколько минут после отправки. Я не думаю, что настоящий человек смотрел мое приложение.
  • Microsoft: после отправки быстрая программная проверка обнаружила проблему, связанную с неправильными форматами значков. После прохождения человек проверил мое приложение в течение 4 дней.

Победитель: Apple.

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

Apple имела самое быстрое время для проверки людьми. Обновления также проходили проверку в течение 24 часов.

Корпорация Майкрософт попала под удар. Начальный обзор продолжался 3-4 дня. Позднее обновление заняло 24 часа. Потом еще одно обновление, где я прибавил платформу XBox, заняло еще 3-4 дня.

Вывод

Это болезненно и стоит денег, чтобы получить существующий PWA и сделать его функциональным на мобильных платформах и App Store.

Победитель: Google. Они сделали самым простым попасть в магазин приложений. Он сделал простейшую интеграцию в родную платформу, попытавшись стандартизировать веб-API, какие платформы ОС могут подобрать (привет, отличный navigator.mediaSession)

Второе место: Microsoft. Они сделали это самым простым, чтобы посыпать вашу веб-программу магией, превратив ее в пакет, который можно отправить в их магазин. (Это можно сделать бесплатно на сайте PWABuilder!) Интеграция с их платформой означает использование пространства имен JavaScript с автоматическим использованием window.Windows.*. Неплохо.

Неудачник: Apple. Не требуйте от меня покупки Mac для создания приложения для iOS. Не заставляйте меня использовать родную оболочку для интеграции с вашей платформой. Не требуйте от меня возиться с сертификатами безопасности; пусть ваши инструменты сборки создадут их для меня и автоматически сохраняют в моем аккаунте Dev Center. Не заставляйте меня использовать 2 разных сайта: Apple Dev Center и iTunes Connect.

Последние мнения: Интернет всегда побеждает. Это победило Flash. Это убило Silverlight. Он уничтожил родные программы на рабочем столе. Браузер является функциональной клиентской платформой. ОС – это просто программа запуска браузера и аппаратный коммуникатор.

Интернет также выигрывает на мобильных устройствах. Разработчики не хотят создавать 3 отдельных приложения для основных платформ. Компании не хотят платить за разработку 3 приложений.

Ответом на все это Интернет. Мы можем создавать многофункциональные веб-приложения – прогрессивные веб-приложения – и упаковывать их для всех магазинов приложений.

Apple, в частности, искажен стимул остановить развитие Интернета. Это тот самый стимул, который имела Microsoft в конце 90-х и начале 2000-х: она хочет быть в платформа для хороших приложений. PWA взрывают это; они бегают повсюду.

Моя программная мудрость такова: PWA наконец победят и вытеснят родные мобильные программы. Через 5–10 лет родные программы для iOS будут такими же распространенными, как и программы Win32 C. Apple будет кричать, держать iOS Safari сзади, блокируя прогресс PWA там, где это возможно. (Даже их недавняя поддержка PWA в iOS Safari 11.1 фактически разрушает PWA.)

Мое предложение для платформ мобильных приложений состоит в том, чтобы принять неизбежно и либо автоматически добавлять качественные PWA в свой магазин приложений, либо разрешить разработчикам легко (например, бесплатно и с 3 щелчками или меньше) посылать PWA в ваш магазин.

Читатели, я надеюсь, что это был полезный взгляд на PWA в App Store в 2018 году.

Отправляли ли вы PWA в магазин программ? Я хотел бы услышать ваш опыт в разделе комментариев. И вы можете прочитать больше моих публикаций в моем блоге.

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

Ваш адрес email не будет опубликован.