Рассказываем об опыте внедрения PWA-приложения

Что такое PWA?

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

Отличия нативного мобильного приложения от PWA

Разработка мобильных приложений – отдельный раздел в программировании. Для того, чтобы создать мобильное приложение на IOS, потребуются соответствующие знания в области языков программирования таких, как Swift или Objective C, Java – для Android.

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

PWA в свою очередь предоставляет кроссплатформенное решение: сайт, мобильное приложение на IOS и Android будут иметь одну кодовую базу, что значительно увеличит скорость разработки, снизит стоимость внедрения и упростит поддержку проекта, так как одно приложение поддерживать проще, нежели три.

Но у PWA все же меньше возможностей, чем у нативного или кроссплатформенного подхода (ionic, cordova), к разработке мобильных приложений.

Основные ограничения PWA

1. Не все устройства и не все операционные системы поддерживают полный функционал PWA (подробнее)
2. Нет доступа к некоторым функциям таким, как Bluetooth, последовательный порт, маяки, сенсорный идентификатор, идентификатор лица, ARKit, датчик высотомера, информация о батарее
3. Нет возможности к исполнению кода в фоновом режиме
4. Отсутствует доступ к частной информации (контакты, background location), а также нет доступа к нативным социальным приложениям
5. Недоступен In App Payments (встроенные платежи)
6. iOS не поддерживает push-уведомления и бейджи

Могу ли я загрузить PWA в Google Play или App Store?

Да, загрузить PWA в Google Play можно, для этого вам потребуется Android Studio и специально разработанный для этого механизм, называемый TWA – trusted web activity. Данная функция была реализована в Chrome v72 для Android. Это означает, что теперь мы можем распространять PWA через каталог Google Play и запускать Chrome без UI в автономном режиме для нативных пакетов (подробнее).

C App Store придется немного повозиться. Магазин приложений IOS не имеет поддержки прогрессивных приложений, поэтому вам нужно будет использовать Cordova для обертки вашего PWA в WebView.

Кейсы использования PWA

1. Сеть Starbucks разработала PWA для сбора заказов в дополнение к обычному мобильному приложению. При почти одинаковом интерфейсе вес PWA оказался меньше на 99,84 %. В результате количество заказов через мобильный Интернет удвоилось и почти сравнялось с количеством заказов через десктоп.
2. PWA интернет-магазина La Nature уже в первые месяцы показало рост конверсии с мобильных устройств на 65 %. Пользователи стали просматривать на 30 % больше товаров, а время загрузки страниц сократилось до 0,1 сек.
3. Кейс по внедрению PWA стал успешным и для AliExpress. Показатель конверсии для новых пользователей повысился на 104 %. Функциональность PWA также помогла им генерировать вдвое больше посещений страниц за сеанс. Время сеанса увеличилось в среднем на 74 % во всех браузерах (по данным developers.google.com).
4. PWA также пользуются такие известные компании, как Twitter, Nikkei, Lancôme, Forbes и др.

Как создать свое первое прогрессивное веб-приложение?

Google предоставляет четкие критерии по идентификации вашего сайта как PWA. Рассмотрим их:

1. Быстрое и надежное (Fast and Reliable). Ваше приложение должно быстро загружаться. Любая страница должна открываться, даже если нет подключения к интернету (обеспечивается за счет кэширования страниц с помощью service-worker).
2. Устанавливаемое (Installable). — Приложение должно обеспечивать защищенное соединение (HTTPS) — Должен быть зарегистрирован service worker (подробнее) — Приложение должно иметь start_url – url, с которого начинается ваше приложение — Должен быть создан manifest.json. Манифест веб-приложения предоставляет информацию о приложении в текстовом файле JSON, который необходим для того, чтобы веб-приложение было загружено и отображалось пользователю аналогично нативному приложению (например, для установки на домашний экран устройства, предоставляющий пользователям более быстрый доступ и больше возможностей).
3. Оптимизировано под PWA. — Должны происходить редиректы с http на https — Должен быть сконфигурирован, так называемый, загрузочный экран (splash screen) — Должен быть тэг <meta name=”viewport” /> — Приложение должно отображать контент, даже если javascript отключен пользователем

После выполнения всех этих шагов на вашем сайте отобразится иконка

Вашим помощником при создании PWA будет сервис PWA Builder. Он укажет на явные ошибки при проектировании.

Результаты PWA приложения сервиса Superlance.pro:

Работают ли PUSH уведомления в PWA?

Да, работают, но не на всех устройствах (в данный момент push-уведомления не поддерживаются на iOS). Подробнее о том, как подключить push-уведомления на сайт и PWA, мы расскажем в следующей статье.

С какими проблемами мы столкнулись в процессе разработки PWA для superlance.pro

Основной проблемой была корректная конфигурация service worker.

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

Бывают ситуации, когда соблюдены все критерии создания PWA, но иконка установки не отображается. Это частая история у многих разработчиков. Причин может быть множество, но не многие знают, что можно проверить корректность работы service worker и manifest.json в консоли разработчика в разделе Application. Там вы увидите все предупреждения об их работе.

Нетривиальной задачей было сделать кастомную кнопку для установки нашего прогрессивного приложения. Отслеживать это событие мы можем с помощью ивента BeforeInstallPromptEvent, который триггерится только тогда, когда приложение доступно для установки. Событие **appinstalled **указывает нам на то, что пользователь установил приложение.

Что мы получили в итоге?

Мы получили сайт, приложение на компьютер (для windows, mac и linux), кроссплатформенное быстрое мобильное приложение (для android и ios), которое обычному пользователю отличить от нативного будет достаточно сложно. Для просмотра рабочего проекта на PWA перейдите по ссылке superlance.pro и авторизуйтесь в личном кабинете.

Стоимость разработки PWA оказалась значительно ниже, чем если бы мы стали отдельно разрабатывать нативные (или даже кроссплатформенные) мобильные приложения и приложения для компьютеров. Появилась возможность проводить быстрое тестирование гипотез без изменения под отдельную платформу.

Но все же каждый инструмент – под конкретную задачу. Прогрессивное веб-приложение решает множество задач, однако, если нужно использовать какие-либо аппаратные возможности устройства (например, Bluetooth, Face ID и т.д.), лучше разрабатывать нативным или кроссплатформенным (ionic, cordova) способом.