В настоящее время вокруг Progressive Web Apps (PWA) много шума. О чем все это, почему и когда вы могли бы использовать PWA для вашего следующего проекта?
ЧТО ТАКОЕ ПРОГРЕССИВНЫЕ ВЕБ-ПРИЛОЖЕНИЯ?
На самом деле PWA – это сайты на стероидах. Они написаны на языках, основанных на современных веб-технологиях, таких как HTML и CSS, JavaScript, Angular, React и т. д. Вы можете искать их через Google и просматривать их на своем настольном или мобильном веб-браузере. Ничего нового, но главное отличие в том, что PWA могут предложить некоторые уникальные возможности и преимущества для собственных приложений.
Вы знали?
PWA не новы. Когда Стив Джобс выпустил iPhone в 2007 году, браузер Safari уже имел базовую поддержку для него, и они назывались «веб-приложениями». Тогда даже не было комплекта разработки программного обеспечения (SDK) для нативных приложений. (Неожиданный) успех собственных приложений сместил фокус рынка на магазин приложений, и это тоже показалось очень прибыльным для Apple.
УНИКАЛЬНЫЕ ВОЗМОЖНОСТИ PWA
1. НЕТ НЕОБХОДИМОСТИ В МАГАЗИНАХ ПРИЛОЖЕНИЙ
Когда вы переходите на PWA в браузере мобильного устройства, у вас будет возможность «установить» его на свой смартфон или настольный ПК, как родное приложение. Это означает, что вам не нужно искать в магазинах приложений, и нет необходимости загружать приложение. Это хорошая и плохая вещь для разработчиков приложений и пользователей приложений.
Создатели приложений испытывают меньше стресса, потому что процесс выпуска приложения теперь в их руках. Им больше не нужно испытывать трудности с отправкой приложений, ожиданием рассмотрения и возможным отклонением, поскольку приложение не соответствует правилам магазина приложений. Это также означает, что сервисы, которые ранее не были доступны в магазинах приложений (например, азартные игры), теперь могут достигать своей аудитории. О, и если вы продаете продукты или предлагаете подписки, вам не нужно платить Apple 30% от дохода.
Для конечных пользователей это здорово, что вам не нужно искать и устанавливать приложения, которые вам нужны только один раз. PWA не занимает драгоценного места на вашем смартфоне, он экономит объем данных вашего мобильного устройства и не требует постоянных обновлений. С другой стороны, отсутствие службы проверки открывает двери для менее проверенных функциональных возможностей, вредоносных программ и возможных угроз безопасности.
2. ТОТ ЖЕ ВНЕШНИЙ ВИД, ЧТО И У НАТИВНЫХ ПРИЛОЖЕНИЙ
Когда вы переходите на PWA в вашем браузере, вы можете установить его как автономное приложение. После установки приложение PWA выглядит почти так же, как и нативные приложения. Например, у него есть значок с заголовком и заставка при загрузке. Кроме того, PWA работает в режиме полного экрана, что означает, что вы не видите никаких элементов управления браузером. Эти данные определены в файле манифеста веб-приложения.
3. СЕРВИСНЫЕ РАБОТНИКИ
В дополнение к файлу манифеста, PWA могут также использовать сервисных работников. Они позволяют приложениям контролировать сетевые запросы, кэшировать эти запросы для повышения производительности и обеспечивать автономный доступ к кэшированному контенту.
Благодаря этому PWA могут предложить следующие функции:
Всегда последний контент
Когда PWA установлен, контент может обновляться в фоновом режиме с момента подключения к Интернету. Таким образом, каждый раз, когда вы запускаете его, у вас есть последняя версия контента. Состояние также сохраняется, то есть, когда вы покинете PWA в определенный момент, вы вернетесь к этому конкретному экрану.
Автономное использование
Вы можете запустить PWA в автономном режиме. Более того, в зависимости от операционной системы, они могут хранить определенное количество данных за определенный период на устройстве. Когда происходит сбой в сети, вы все равно можете получить доступ к содержимому.
Всплывающие напоминания
Благодаря работникам сервиса у вас есть возможность получать push-уведомления на смартфоны, а также на настольные ПК, если ваша ОС и браузер это поддерживают.
4. ЛУЧШИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ
PWA может предложить все функции HTML5, такие как доступ к камере, геолокацию, 3D-визуализацию, воспроизведение аудио и видео и т. д.. А также большинство мобильных жестов. Это создает у пользователя впечатление, что он или она использует собственное приложение, оптимизированное для его/ее устройств. Из-за кэширования и предварительной загрузки интерфейсы чувствуют себя намного быстрее во время прокрутки. В целом PWA лучше воспринимается пользователями, чем адаптивные настольные веб-сайты.
5. ЛУЧШЕ ДЛЯ SEO
Поскольку PWA полностью основаны на веб-технологиях и их можно легко найти в поисковых системах, больше не требуется оптимизация App Store (ASO). Трудоемкие усилия по созданию различных скриншотов и описаний во всех разрешениях и на разных языках лежат позади.
Также важно знать, что если вы выберете PWA, показатель скорости вашей страницы Google улучшится, что приведет к лучшему ранжированию в поисковом индексе Google.
С начала этого года вы также можете публиковать PWA в Google Play Store.
ЗВУЧИТ ЗДОРОВО, НО ЕСТЬ ЛИ МИНУСЫ В PWA?
Недостатком является отсутствие визуального присутствия PWA в магазине приложений. Некоторые бренды должны быть в магазине приложений, потому что их аудитория ожидает этого. Это, безусловно, относится к Apple App Store. К счастью, с начала этого года Google позволяет публиковать PWA в магазине Google Play с помощью функции TWA (Trusted Web Activity TWA).
PWA в основном продвигаются Google, и очевидно, что браузеры Chrome и устройства Android хорошо поддерживаются.
Apple не спешит поддерживать PWA в iOS. В 2018 году они выпустили iOS версии 11.3, которая расширила базовую поддержку PWA за счет лучшей поддержки манифеста веб-приложения и работников сервиса. В версии 12.2, выпущенной в марте 2019 года, Apple исправила некоторые критические проблемы, такие как сохранение состояний во время сеансов, просмотр приложений PWA при нажатии на гиперссылку, общий доступ к Интернету и т. д.
Но все еще есть много ошибок и некоторые основные функции, такие как возможность выполнять код в фоновом режиме и push-уведомления пока не поддерживаются на iOS.
Функции, требующие тесного взаимодействия с оборудованием, такие как NFC, Bluetooth (используется для платежей в приложениях), ARkit, Touch и FaceID, датчики движения, высотомер, webRTC для потока камеры и т. д., Все еще не включены в PWA в Safari.
С точки зрения удобства использования пользователи Android могут получить запрос на установку PWA в качестве автономного приложения, но пользователи iOS должны выполнить действие вручную, чтобы установить PWA в Safari.
Кроме того, в браузере Chrome для устройств iOS отсутствует поддержка PWA, поскольку сервисные работники не поддерживаются для веб-просмотров.
Итог: поддержка PWA в iOS/MAC OS ограничена, и неясно, когда Apple это сделает.
КОГДА НУЖНО ПЕРЕХОДИТЬ НА PWA?
PWA в основном интересны в следующих случаях:
- Сайты новостей и электронной коммерции, где контент регулярно обновляется
- Вы хотите предоставить контент/услугу, которые не разрешены Apple/Google T & C в их магазинах приложений
- Если у вас ограниченный бюджет на создание приложений
- Когда вам не нужна тесная интеграция с оборудованием мобильного устройства
- Если вы предоставляете свои приложения бесплатно
- Если вы не хотите отдавать Apple 30% своего дохода
- Когда вы хотите, чтобы пользовательский интерфейс был лучше, чем адаптивные веб-сайты, хотя нативные приложения по-прежнему обеспечивают наилучшее взаимодействие
- Если поиск вашего сервиса очень важен, и вы думаете, что ваши пользователи не приложат усилий для установки вашего приложения
- Если вы можете жить без push-уведомлений для пользователей iOS
Нативные приложения по-прежнему являются лучшим выбором для:
- Комфорт пользователей и скорость
- Пользовательский опыт
- AR и 3D рендеринг
- Различные модели монетизации, такие как подписки и покупки приложений
- Игры
- Очень безопасные приложения с биометрической аутентификацией
- Push-уведомления между устройствами
- Тесная аппаратная поддержка
- Если ваше присутствие в магазине приложений является обязательным
Вы должны подумать о том, какой будет наилучший технический подход для каждого из ваших проектов. Не только на основе текущих функциональных требований, но и относительно ваших будущих потребностей и дорожной карты.