Ранее в этом году мы создали самую первую PWA для COVID-19, скромно названную Приложение для коронавируса (если у вас нет доступа к этой ссылке, отметьте это). Прогрессивные веб-приложения (или PWA) великолепны. Они предлагают лучшее из обоих миров: они выглядят и работают как собственные приложения, но на самом деле это веб-сайты, созданные с использованием стандартных HTML, CSS и Javascript.
В эти неспокойные времена тот факт, что приложение Coronavirus было PWA, не просто помогло - вероятно, это была одна из основных причин его успеха.
Восстановите контроль над своим приложением
Нам удалось очень быстро запустить наш PWA. Идея приложения возникла у нас 25 января. Затем мы запустили ее 28 января. Три дня от идеи до запуска - это тот поворотный момент, которого просто невозможно достичь с помощью нативных приложений. Для публикации приложения для Android или iOS необходимо загрузить его в соответствующие магазины приложений. Сам по себе процесс первоначальной проверки - проверка Apple / Google, что ваше приложение не содержит махинаций - обычно занимает больше времени.
Возможность быстрого запуска означала, что мы максимально изменили возможности освещения в прессе. Фактически, мы получили потрясающее освещение в Business Insider, Forbes, ABC News и многих других.
Приложение, которое вы видите сейчас, когда заходите в домен coronavirus.app, также выглядит принципиально иначе, чем когда мы его запустили. За 7 месяцев с момента запуска мы смогли сделать сотни небольших обновлений и как минимум 3 полных изменения дизайна. Мы смогли очень быстро обработать отзывы наших пользователей. Развертывание новой версии приложения происходит быстро - менее 2 минут с помощью инструмента Firebase CLI, который мы используем. И нет необходимости получать одобрение из магазинов приложений. Мы развертываем приложение, меняем номер версии, чтобы браузеры наших пользователей автоматически получали последние версии всех файлов, и все готово.
Спустя пару месяцев после запуска Google и Apple объявили о запрете приложений, связанных с коронавирусом, не одобренных национальным правительством или медицинским учреждением в их соответствующих магазинах приложений. Нам там очень повезло. Если бы мы решили запустить приложение в магазинах, через несколько месяцев оно было бы удалено.
С PWA это ваш домен, ваш клиентский код и ваш сервер. Вы все контролируете.
Вы сохраняете 100%
Если вы используете покупки в приложении, вам придется платить Apple и / или Google 30% своего дохода. И если вы не хотите использовать покупки в приложении, что ж ... вы вообще не сможете взимать плату с пользователей в своем приложении (по крайней мере, теоретически).
Магазины приложений обещали стать каналами распространения. Десять лет назад вы могли опубликовать приложение, и только это могло привлечь новых пользователей. Это было совершенно фантастично.
Будет ли это иметь смысл в 2020 году? В Google Play примерно 3 миллиона приложений. Попробуйте загрузить приложение, больше ничего не делайте. Скорее всего, у вас будет всего 2 загрузки: вы и ваш соучредитель.
Разработчикам кажется, что магазины приложений стали неизбежным злом, а не полезным инструментом. Они не делают того, что вы от них ожидаете, то есть являются каналом распространения, но они все равно берут с вас большие деньги. Все больше и больше компаний отходят от покупок в приложениях, но и это тоже не без препятствий.
С PWA нет магазина приложений и покупок в приложении. Вы можете внедрить любую платежную систему, которая вам нравится (если вы еще не использовали Stripe). И вы получите все те $$$, которые вы усердно заработали.
Меньше кода, лучше продукты
Одна из величайших особенностей PWA - это то, что нужно поддерживать только одну базу кода. Конечно, вы могли бы использовать React Native, но это определенно похоже на обходной путь, а не на реальное решение.
Создание вашего приложения как PWA делает его намного быстрее и проще (если вы не один из тех, кто ненавидит Javascript, и в этом случае, очень плохо, вам не повезло!).
Все наше приложение Coronavirus ужасно просто в обслуживании и обновлении, потому что это, по сути, 3 файла:
- Server.js (180Kb), работающий на Firebase Cloud Functions, который содержит весь код для нашего API вместе со всеми запланированными функциями, которые мы используем для очистки данных с правительственных сайтов. Он также содержит наш базовый HTML-шаблон, в который мы добавили Progressier script, чтобы дать приложению все функции PWA.
- Client.js (197 КБ), который содержит весь интерфейсный код, который ваш браузер будет выполнять при доступе к приложению.
- Style.css (125 КБ), содержащий все CSS.
(Кроме того, мы используем только три сторонние клиентские библиотеки: Leaflet для карты, Charts.js для диаграмм и Moment.js для всех интересных вещей, которые вы можете делать со временем).
PWA кажутся естественной эволюцией Интернета, благодаря чему разработчикам всегда быстрее и проще создавать масштабируемые объекты очень быстро. Черт возьми ... это облегчает задачу даже не разработчикам. В конце концов, приложение Coronavirus разработал маркетолог.
Когда Facebook запустился в 2004 году, им пришлось покупать / арендовать и обслуживать серверы. Теперь у нас есть AWS, GCP и Azure, поэтому нам не нужно беспокоиться о том, что происходит в базовой инфраструктуре. А поскольку на нем работают крупнейшие технологические компании на планете, вы можете быть чертовски уверены, что сама инфраструктура на высшем уровне.
23 марта был нашим лучшим днем в жизни. Только за эти 24 часа приложение Coronavirus получило 2182787 пользователей и 4822155 просмотров страниц. Вот что потребовалось, чтобы поставить приложение на колени. Мы достигли жесткого ограничения на количество вызовов GPU, разрешенных Google Cloud Platform, что привело к всего 2 часам простоя, которые у нас были с момента запуска. К счастью, служба поддержки Firebase очень быстро увеличила нашу квоту. Это было редкое событие. Большинство приложений вряд ли когда-нибудь достигнут этого предела.
На мой взгляд, Progressier выполняет аналогичную миссию с приложениями: создание базовой инфраструктуры современных приложений, которые будут жить непосредственно в сети, без ограничений собственных приложений, поэтому вам не нужно заботиться о том, что происходит. за кулисами.
Разрыв функций сокращается
Однако не все это черно-белое. У PWA тоже есть недостатки. Есть несоответствие между тем, что вы можете делать с нативным приложением. А с PWA можно обойтись. Но этот разрыв с каждым годом сокращается.
Поскольку ваш PWA работает в браузерах ваших пользователей, есть несколько неприятных моментов, на которые следует обратить внимание. Разные браузеры по-разному интерпретируют Javascript и CSS. Поэтому для каждой функции, которую мы создали, нам пришлось протестировать ее в Chrome, Safari, Firefox, Edge и на Mac, ПК, iPad, планшете Android, недавнем iPhone и более старом iPhone. Может быть сложно заставить определенную вещь работать идеально везде, поэтому вы прибегаете к некоторым уродливым хитростям.
Забавная история - поскольку я не являюсь пользователем Apple, я сидел на корточках в подвале красивого флагманского магазина Apple Store в Тайбэе. Я программировал, развертывал, а затем ходил по магазину, чтобы проверить свои изменения на каждом устройстве Apple, которое попадалось мне в руки. Это было до того, как я нашел этот замечательный продукт под названием BrowserStack.
Кроме того, если вам посчастливится купить домен, который выглядит чистым, как coronavirus.app, вам обязательно понравится связанное с ним повышение SEO. PWA делают приложения более доступными. Нечего скачивать. Ничего обязательного для установки. Никаких поисков. Вы вводите URL-адрес, бум, вот приложение.
Хорошим шагом в оптимизации онлайн-конверсий является сокращение количества шагов, необходимых для достижения конца процесса. PWA делают именно это. Меньше шагов, чтобы получить приложение, больше шансов, что люди действительно воспользуются вашим приложением.
Фактически, некоторые компании подчеркивают значительные улучшения в широком спектре ключевых показателей эффективности после внедрения PWA, таких как увеличение времени, затрачиваемого на страницу, конверсии или доход.
Очень интересная особенность PWA - это возможность установить ваше приложение на свой телефон (и на рабочий стол!). Возможность занимать место на главном экране ваших пользователей, очевидно, очень ценно - и отлично подходит для удержания.
PWA великолепны. И я не думаю, что приложение Coronavirus использовали бы более 10 миллионов человек, если бы мы не сделали его PWA.
Это также вдохновило Progressier, который скоро позволит любому бесплатно использовать нашу реализацию PWA на своих сайтах и в приложениях. И, кстати, наша обновленная реализация PWA будет в 7-10 раз лучше, чем то, что мы сделали в приложении Coronavirus.
В восторге от Progressier? Есть вопросы о приложении Coronavirus? Дайте нам знать в комментариях ниже.
