Я створив прогресивний веб-додаток і опублікував його в 3 магазинах додатків. Ось що я дізнався.

Місяць роботи, кілька сотень доларів і багато тяганини.

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

Процес був і болісним, і просвітницьким. Ось що я дізнався.

Чому?

По-перше, ви можете задатися питанням: «Навіщо взагалі розміщувати свій додаток у магазинах додатків? Просто живіть у відкритій мережі! »

Відповідь, у двох словах, полягає в тому, що саме там знаходяться користувачі . Ми навчили покоління користувачів знаходити програми у власних магазинах додатків, а не у вільній та відкритій мережі.

Для мого веб-додатку було 2 великі причини потрапити в магазин додатків:

  1. Попит користувачів
  2. Обмеження веб-додатків від ворожих мобільних платформ Apple

Попит користувачів: Мої користувачі роками запитують мене: “Чи є програма для Chavah? Я не бачу цього в магазині ”.

Вони просять цього, тому що ми навчили користувачів шукати програми у власних магазинах додатків.

Дотепер моя відповідь моїм користувачам була,

“Ой, вам не потрібен додаток - просто перейдіть на веб-сайт у своєму телефоні! Це працює!"

Але я якось брехав.

Справжні веб-програми працюють лише на мобільному пристрої. Що підводить мене до другої причини: обмеження веб-додатків ворожими мобільними платформами Apple.

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

Apple абсолютно крута з цим.

Але тільки якщо ви платите Apple $ 99 / рік за привілей.

Якщо ви хочете зробити щось із цього у звичайному старому веб-додатку, ну, Goshdarnit, Apple не просто відмовить вам у цих речах, це заважає вам навіть запитати дозволу .

Для мого музичного програвача, схожого на Пандору, ця жахлива розбитість проявилася по-різному.

Від незначних речей, таких як «iOS Safari не дозволяє відтворювати аудіо без попередньої взаємодії зі сторінкою», до основних, що зупиняють такі речі, як «iOS Safari не дозволяє відтворювати наступну пісню, якщо ваша програма знаходиться у фоновому режимі якщо ваш екран вимкнено. "

О, плюс дивні візуальні аномалії, такі як друк у текстовому полі та побачення тексту, який з’являється деінде на екрані.

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

Бар'єри для в'їзду

У ідеальному світі публікація веб-програми в магазинах додатків буде виглядати так:

  • Ваш веб-хостинг або постачальник послуг безперервної інтеграції
  • Ви опублікували Прогресивний веб-додаток. Опублікувати в магазинах додатків?

Store iOS App Store

☑ Google Play

Store Магазин Windows

(Або по черзі, коли Microsoft експериментує, ваш PWA просто автоматично з’явиться в магазині програм, коли Bing сканує його.)

Але на жаль, ми живемо не в цьому ідеальному світі. Натомість нам доводиться мати справу з усіма власними власними BS, щоб розміщувати наші веб-програми в магазинах.

Кожен із магазинів додатків має бар’єр для входу: наскільки складно взяти існуючу веб-програму та її в магазині додатків.

Я перелічую деякі перешкоди нижче.

Вартість

  • Apple : 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. Звучить розумно, правда? І бонус, як щодо того, щоб показати інформацію про відтворювану пісню на екрані блокування? А керування звуком (відтворення / пауза / наступне тощо) з екрана блокування? Наскільки це важко?

Тут використовуються три дуже різних підходи:

  • Apple : Ми не надаємо веб-програмам можливість заявити про такі можливості; вам потрібно буде написати рідну обгортку (наприклад, з Cordova) для взаємодії з ОС.
  • Google : Веб-трансляція! Давайте створимо новий веб-стандарт, який відображає звук та елементи керування з екрана блокування. Фонове аудіо? Звичайно, вперед!
  • Microsoft: Ми введемо наш власний API, window.Windows. *, У ваш глобальний простір імен JavaScript, і ви зможете використовувати це, щоб робити те, що ви хочете зробити.

Докладніше тут про кожен магазин:

Для магазину додатків для iOS ваша веб-програма повинна відтворювати фонове звучання? Використовуйте плагін Cordova. Потрібно показати відтворювану пісню на екрані блокування? Використовуйте плагін Cordova. Потрібно контролювати відтворювану пісню з екрана блокування? Використовуйте плагін Cordova. Ви зрозуміли ідею. В основному, Кордова обманює Apple, думаючи, що ви рідний додаток. Оскільки ви не вередуючий веб-додаток, Apple дозволяє робити все, що можуть робити рідні програми. Вам просто потрібні власні трюки - плагіни Cordova - щоб ви могли це зробити.

Для Google Play приємно, що я можу просто написати код JS, щоб це працювало; тут не потрібні плагіни Cordova. Звичайно, ця JS не працюватиме ніде, крім Chrome на Android ... але привіт, можливо, одного дня (в ідеальному світі!) Всі мобільні браузери впровадять ці веб-API ... і світ житиме як єдине ціле. Я майже готовий розірвати деякі мелодії з утопією Джона Леннона.

У магазині Windows ви хочете відтворити фонове аудіо? Вибачте! Тобто, якщо ви не заявите про свої наміри у нашому файлі маніфесту власних можливостей (легко) І ви впровадите цей власний медіа-інтерфейс за допомогою window.Windows.SystemMediaTransportControls (не так просто). В іншому випадку ми вимкнемо звук, коли програма перейде у фоновий режим.

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

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

Невдаха : Apple. Їм байдужі веб-програми. Насправді, це гірше, ніж це. Здається, вони насправді вороже ставляться до веб-додатків. iOS Safari - це новий Internet Explorer 6. Він відставав майже у всіх веб-стандартах, особливо в галузі Прогресивних веб-програм. Можливо, це пов’язано з комерційними причинами: веб-програми порушують $ 99 / рік + 33% в магазині. Тому, щоб змусити мою веб-програму працювати на їхній платформі, я в основному повинен робити вигляд, що я рідна програма.

Реєстрація App Store

Подання вашої PWA в магазин додатків вимагає реєстрації, перевірки бізнесу та більшої тяганини. Ось як пройшли 3 магазини додатків:

  • Apple : Ви повинні довести, що ви легальний зареєстрований бізнес. Цю перевірку робимо не ми, а третя сторона, яка може знати або не знати про ваш бізнес.
  • Google : Ви хочете, щоб ваш додаток був у нашому магазині? Круто нами.
  • Microsoft : Ви хочете, щоб ваш додаток був у нашому магазині? Круто нами.

Найбільшим болем для мене було те, що Apple отримала підтвердження як юридичний бізнес.

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

Я натискаю далі.

"Введена вами інформація не відповідає вашому профілю D&B."

Мій ... що?

Трохи гуглів показав, що “профіль D&B” - це Дан і Бредстріт. Я ніколи раніше не чув про цю групу, але я довідався, що Apple використовує їх для перевірки інформації про вашу юридичну корпорацію.

І очевидно, мій профіль D&B не збігався з тим, що я вказав у своїй реєстрації в Apple Dev.

Я ще трохи погуглив і знайшов форуми розробників Apple, завалені подібними публікаціями. Ніхто не мав хорошої відповіді.

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

Я вирішив зв’язатися з ними… але Apple каже, що на їх відповідь знадобиться кілька днів.

На даний момент я думаю відмовитись від усієї ідеї.

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

Я вже згадував, наскільки це гарно? Я просто хочу перерахувати свою існуючу веб-програму в магазині. Plz допомога.

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

На щастя, я досвідчений розробник. Я натискаю кладу точку зупинки в їх JavaScript, натискаю "Надіслати", змінюю прапорець isValid на true і вуаля! Я оновив свій профіль D&B.

Повернімось до Apple Dev -> спробуємо ще раз. Зареєструйте мою компанію ...

"Помилка: Введена інформація не відповідає вашому профілю D&B."

AREYOUFREAKINKIDDINGME.

Поговоріть з Apple ще раз. "О, може знадобитися 24–48 годин, поки оновлена ​​інформація про D&B потрапить у нашу систему".

Ви знаєте, оскільки на передачу цифрової інформації від сервера А до сервера Б може знадобитися 2 дні. Зітхніть.

Через два дні я намагаюся зареєструватися ... нарешті це працює! Зараз я в програмі Apple Developer і можу подавати програми на перевірку.

Переможець : Google та Microsoft; обом знадобилося 5 хвилин, щоб зареєструватися.

Невдаха : Реєстрація розробника Apple була повільною та болісною. Потрібно було приблизно тиждень, щоб насправді зареєструватися у програмі для розробників. Це вимагало від мене зв’язку з підтримкою двох різних шалених компаній. І це вимагало від мене налагодження коду JavaScript на сторонніх веб-сайтах лише для того, щоб я міг пройти їх перевірку на базі клієнта, щоб моя інформація надходила до Apple, щоб я міг надіслати свій додаток до магазину. Вау, просто ... вау.

Якщо тут є якась заощаджуюча милість для Apple, це те, що у них є некомерційна програма 501c3, де за некомерційні організації може бути відмовлено в розмірі щорічної плати в розмірі 99 доларів США. Я цим скористався. І, можливо, цей додатковий крок ускладнив справи.

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

Коли у вас є веб-програма, вам доведеться запустити на ній магію, щоб перетворити її на те, що ви можете подати на огляд App Store.

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

Хороша новина полягає в тому, що є безкоштовний інструмент для здійснення магії перетворення веб-програми в пакети програм . Цей приголомшливий безкоштовний інструмент називається 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. Я не хочу платити за привілей збагачувати платформу Apple від iOS.

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

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

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

Це зайняло принаймні тиждень доробки, щоб привести мою програму в робочий стан, перш ніж я міг подати її в магазин додатків.

Переможець : Microsoft. Уявіть собі це: ви можете перейти на веб-сайт, який генерує пакет програм для вашого веб-додатка. І якщо це не ваша справа, ви можете завантажити інструменти командного рядка, які допоможуть вам виконати цю роботу. Графічний інтерфейс користувача? Працюватиме безкоштовна Visual Studio.

Друге місце : Google. Потрібна Android Studio, але це безкоштовно, працює для всіх і було досить просто.

Невдаха : Apple. Мені не потрібно купувати власний комп'ютер - Mac на кілька тисяч доларів, щоб створити свій додаток. Apple Dev Center -> заплутування iTunes Connect здається спробою менеджера поза дотиком натиснути iTunes на розробників. Це просто частина веб-сайту Apple Developer Center.

Тестування додатків

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

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

Переможець : Підкиньте. Додаток Apple Test Flight є простим та впорядкованим. Ви можете контролювати термін дії альфа / бета-версії просто на стороні адміністратора. Google не відставав; це було досить безболісно, ​​навіть не вимагаючи окремого додатка.

Огляд програми

Коли ваш додаток готовий до прайм-тайму, ви подаєте його на розгляд. Огляд проводиться як за допомогою програмного контрольного списку (наприклад, чи є у вас піктограма запуску?), Так і реальних людей (“ваш додаток є клоном X, ми відхиляємо його”)

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

Переможець : Apple.

Звичайно, мені як розробникові подобається той факт, що мій додаток миттєво потрапив до магазину Google Play. Але це лише тому, що, я підозрюю, насправді його не переглядала людина.

Apple мала найшвидший час для фактичного огляду людей. Оновлення також пройшли перевірку протягом 24 годин.

Майкрософт потрапив сюди чи не вдалося. Первинний огляд зайняв 3 або 4 дні. Пізніше оновлення зайняло 24 години. Потім чергове оновлення, де я додав платформу XBox, зайняло ще 3-4 дні.

Висновок

Болісно, ​​і коштує грошей, взяти існуючу PWA і надати їм функціональність на мобільних платформах і перерахувати в App Store.

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

Друге місце : Microsoft. Вони спростили обробку вашої веб-програми магією, перетворивши її на пакет, який можна надіслати до їх магазину. (Це можна зробити безкоштовно за допомогою сайту PWABuilder!) Інтеграція з їхньою платформою означає використання автоматично введеного вікна.Windows. * Простір імен JavaScript. Непогано.

Невдаха : Apple. Не вимагайте від мене придбання Mac для створення додатка для iOS. Не змушуйте мене використовувати рідні обгортки для інтеграції з вашою платформою. Не вимагайте, щоб я викручував сертифікати безпеки; дозвольте вашим інструментам побудови зробити їх для мене та автоматично зберігати їх у моєму обліковому записі Dev Center. Не змушуйте мене користуватися двома різними сайтами: 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 в магазин додатків? Я хотів би почути ваш досвід у розділі коментарів. І ви можете прочитати більше моїх публікацій у блозі на моєму щоденнику.