Что такое PWA?
PWA (англ. Progressive Web App) – прогрессивное веб-приложение, а точнее технология, которая трансформирует обычную веб-страницу в веб-приложение, не отличающееся по визуальной и функциональной составляющей от нативного приложения. Если говорить простым языком, пользователь скачивает все содержимое сайта себе на мобильный телефон или компьютер.
Отличия нативного мобильного приложения от PWA
Разработка мобильных приложений – отдельный раздел в программировании. Для того, чтобы создать мобильное приложение на IOS, потребуются соответствующие знания в области языков программирования таких, как Swift или Objective C, Java – для Android.
По сути, при разработке вашего продукта для мобильных устройств вам придется создать два отдельных мобильных приложения, и выйдет это достаточно дорого. Причем “стоимость” внесения правок будет умножена на два.
PWA в свою очередь предоставляет кроссплатформенное решение: сайт, мобильное приложение на IOS и Android будут иметь одну кодовую базу, что значительно увеличит скорость разработки, снизит стоимость внедрения и упростит поддержку проекта, так как одно приложение поддерживать проще, нежели три.
Но у PWA все же меньше возможностей, чем у нативного или кроссплатформенного подхода (ionic, cordova), к разработке мобильных приложений.
Основные ограничения PWA
- Не все устройства и не все операционные системы поддерживают полный функционал PWA (подробнее)
- Нет доступа к некоторым функциям таким, как Bluetooth, последовательный порт, маяки, сенсорный идентификатор, идентификатор лица, ARKit, датчик высотомера, информация о батарее
- Нет возможности к исполнению кода в фоновом режиме
- Отсутствует доступ к частной информации (контакты, background location), а также нет доступа к нативным социальным приложениям
- Недоступен In App Payments (встроенные платежи)
- 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
- Сеть Starbucks разработала PWA для сбора заказов в дополнение к обычному мобильному приложению. При почти одинаковом интерфейсе вес PWA оказался меньше на 99,84 %. В результате количество заказов через мобильный Интернет удвоилось и почти сравнялось с количеством заказов через десктоп.
- PWA интернет-магазина La Nature уже в первые месяцы показало рост конверсии с мобильных устройств на 65 %. Пользователи стали просматривать на 30 % больше товаров, а время загрузки страниц сократилось до 0,1 сек.
- Кейс по внедрению PWA стал успешным и для AliExpress. Показатель конверсии для новых пользователей повысился на 104 %. Функциональность PWA также помогла им генерировать вдвое больше посещений страниц за сеанс. Время сеанса увеличилось в среднем на 74 % во всех браузерах (по данным developers.google.com).
- PWA также пользуются такие известные компании, как Twitter, Nikkei, Lancôme, Forbes и др.
Как создать свое первое прогрессивное веб-приложение?
Google предоставляет четкие критерии по идентификации вашего сайта как PWA. Рассмотрим их:
- Быстрое и надежное (Fast and Reliable). Ваше приложение должно быстро загружаться. Любая страница должна открываться, даже если нет подключения к интернету (обеспечивается за счет кэширования страниц с помощью service-worker).
- Устанавливаемое (Installable).
— Приложение должно обеспечивать защищенное соединение (HTTPS)
— Должен быть зарегистрирован service worker (подробнее)
— Приложение должно иметь start_url – url, с которого начинается ваше приложение
— Должен быть создан manifest.json. Манифест веб-приложения предоставляет информацию о приложении в текстовом файле JSON, который необходим для того, чтобы веб-приложение было загружено и отображалось пользователю аналогично нативному приложению (например, для установки на домашний экран устройства, предоставляющий пользователям более быстрый доступ и больше возможностей). - Оптимизировано под PWA.
— Должны происходить редиректы с http на https
— Должен быть сконфигурирован, так называемый, загрузочный экран (splash screen)
— Должен быть тэг <meta name=”viewport” />
— Приложение должно отображать контент, даже если javascript отключен пользователем
После выполнения всех этих шагов на вашем сайте отобразится иконка
![Главная страница лк Superlance](http://stage.idpowers.com/wp-content/uploads/pasted-image-0.png)
Вашим помощником при создании PWA будет сервис PWA Builder. Он укажет на явные ошибки при проектировании.
Результаты PWA приложения сервиса Superlance.pro:
![Результат PWA приложения для Superlance](https://idpowers.com/wp-content/uploads/pasted-image-0-1.png)
Работают ли 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) способом.