Руководство по прогрессивным веб-приложениям

(Приглашенный писатель: Виталий Купренко)

У каждой компании есть веб-сайт или собственное мобильное приложение, а то и то и другое. Однако веб-сайты ограничены в функциональности, а разработка собственных приложений требует значительных инвестиций. Итак, где же золотая середина? Ответ – прогрессивные веб-приложения (PWA). Они стоят меньше, чем собственные приложения, но поддерживают такие функции, как push-уведомления, автономный режим и другие.

В этом посте будет объяснено, что представляют собой веб-сайты PWA, их основные преимущества и какие технологии использовать, чтобы превратить обычный веб-сайт в прогрессивное веб-приложение.

Значение прогрессивных веб-приложений (PWA)

Прогрессивные веб-приложения – это один из типов архитектуры веб-приложений, который разработчики используют для реализации клиентской и серверной сторон продукта. Они подставка для сайтов доставляющие неотличимые от нативных приложений возможности.

Их можно устанавливать как собственные мобильные приложения, работать без подключения, взаимодействовать с камерой устройства или получать push-уведомления. Более того, PWA предлагают гораздо лучшее распространение, чем магазины приложений, и не отнимают у вас немалую долю дохода.

Когда прогрессивные веб-приложения впервые появились в 2015 году, они были доступны для Android. Позже, в 2018 году к ним обратились пользователи iOS.

Алекс Рассел, разработчик программного обеспечения Google, который ввел термин PWA, говорит: PWA – это просто веб-сайты, которые принимают все необходимые витамины.

Прогрессивные веб-приложения написаны для работы в разных браузерах, поэтому программисты используют HTML, CSS и JavaScript для создания PWA. Если пользователи откроют PWA в настольном браузере, он будет выглядеть как традиционный веб-сайт. Но в мобильном браузере они будут использовать собственные функции приложения.

Как работает PWA?

Когда пользователи находятся на веб-сайте PWA, они сталкиваются с всплывающим окном с просьбой установить приложение на свой смартфон. После того, как пользователь установит PWA, значок приложения появится на главном экране. Когда пользователь открывает прогрессивное веб-приложение, браузер открывает новое окно вместо новой вкладки.

После установки PWA создают кеш веб-сайта. Это способствует повышению скорости и доступности в автономном режиме.

При использовании PWA на Android пользователи могут использовать практически все встроенные функции приложений, включая оплату, NFC, аутентификацию по отпечатку пальца, распознавание речи и многое другое.

Однако для того, чтобы функции устройства были доступны в PWA, требуются дополнительные API (например, NFC API, Bluetooth API, API геолокации и т. Д.). Более того, если вы решите разместить PWA в Google Play, вам понадобится PWABuilder.

Однако для пользователей iOS ситуация немного отличается. Apple больше фокусируется на разработке собственных приложений, чем на разработке прогрессивных приложений. Это не означает, что PWA не работают на iOS; есть только некоторые ограничения. Например, Safari (браузер Apple) не поддерживает push-уведомления PWA.

Основные преимущества PWA:

• Их можно добавить на главный экран без магазинов приложений.
• Быстрый, работа в автономном режиме, поддержка push-уведомлений.
• Доступность фоновой синхронизации при взаимодействии пользователя с приложением.
• Они не используют URL-адреса для полноэкранного просмотра.
• Обслуживается через HTTPS, чтобы гарантировать безопасность личных данных.

Как компании могут извлечь выгоду из PWA

Одно из основных преимуществ PWA – их цена. Таким образом, даже если у вас уже есть веб-сайт, вы все равно потратите меньше времени и денег на то, чтобы превратить его в прогрессивное веб-приложение.

Давайте обсудим другие преимущества PWA:

• Его можно установить без Google Play или App Store. Прогрессивные веб-приложения не нужно публиковать на торговых площадках. Таким образом, вам не нужно ждать их одобрения, чтобы продвигать ваш продукт среди клиентов или выпускать новую версию. Кроме того, вам не нужно платить 30% комиссии торговым площадкам.
• Быстро развиваться. Нет необходимости создавать приложения для разных платформ или настраивать собственный код (если вы хотите создать приложение на основе Flutter). PWA работают на iOS и Android, взаимодействуют с различными устройствами, и многие функции собственных мобильных приложений могут быть реализованы на Android.
• Всплывающие уведомления. Например, с помощью Google Duo PWA, приложения для видеозвонков, пользователи могут получать сообщение, подтверждающее вызов, когда их друзья звонят им в Duo. Push-уведомления работают в Windows, macOS (кроме Safari), Linux и ChromeOS.
• Легче выпускать обновления. Пользователям не нужно обновлять приложение каждый раз при выпуске новой версии. Всегда есть актуальные решения. PWA позволяют компаниям бороться с фрагментацией программного обеспечения, когда одни пользователи используют старую версию продукта, а другие – новую. Раньше разработчикам программного обеспечения приходилось поддерживать старую версию приложений, чтобы не потерять большую часть клиентов, пока они не выпустят обновление.

Такие компании, как Starbucks, Uber, Tinder, Forbes, Pinterest уже имели получил из реализации PWA. Например, Starbucks увеличила количество активных пользователей в день в 2 раза. Заказы на десктопах практически такие же, как и в мобильных приложениях. Pinterest отмечает увеличение времени нахождения на сайте на 40%. Tinder сокращает время загрузки с 11 до 4,69 секунды.

Инструменты, необходимые для создания прогрессивного веб-приложения

Прогрессивные веб-приложения не требуют определенных фреймворков или каких-либо других инструментов разработки. PWA – это технология, которую можно внедрить после выполнения некоторых требований проекта.

Чтобы преобразовать традиционный веб-сайт в прогрессивное веб-приложение, вам нужно добавить файл manifest.json и сервис-воркер.

Сервисный работник

В Сервисный работник – это метод PWA, который используется для кэширования ресурсов и push-уведомлений. Это программируемый посредник между вашим веб-приложением и реальным миром, который дает вам контроль над сетевыми запросами.

Например, вы можете управлять кэшированием запросов, обрабатывать push-уведомления, включать автономный режим и фоновую синхронизацию.

Push-сообщения

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

Автономный режим

Рабочий сервер содержит ресурсы для приложения, что позволяет получать данные, когда пользователи находятся в автономном режиме. Сервер обновляет динамический контент (изображения, видео, историю платежей и т. Д.) При возобновлении подключения к Интернету. Действия пользователей на странице задерживаются до установления стабильного соединения.

Допустим, пользователь хочет отправить сообщение через мессенджер PWA. Веб-сайт все еще работает; доступна история сообщений. Но им нужен Wi-Fi для завершения действия Ã ¢ Â ?? Â ?? отправить и получить сообщение.

Фоновая синхронизация

Когда у пользователей есть веб-сайт и подключение к Интернету, они могут выполнять различные действия, например отправлять сообщения или совершать транзакции. Что вы уже знаете.

Проблема в том, что у пользователей нет подключения к Интернету. В этом случае у них по-прежнему есть доступ к приложению, но они не могут продолжать работу с приложением. Сервисный работник хранит информацию, пока клиенты не в сети.

Вот картина того, как прогрессивные веб-приложения взаимодействуют с работниками сервера.

Файл манифеста

Манифест подразумевает файл JSON, который определяет основные параметры PWA.

Используя манифест, инженеры-программисты могут контролировать следующее:

• Как запускаются прогрессивные веб-приложения
• Способ демонстрации приложения пользователям (дизайн приложения)
• Можно ли добавить приложение на главный экран мобильного телефона?

На рисунке ниже показано, что PWA могут делать с файлом манифеста.

Подведение итогов

Как видите, прогрессивные веб-приложения приносят значительные преимущества всем предприятиям, основанным на услугах, благодаря простоте использования и стоимости. Их легко спроектировать, а значит, они экономичны. Несмотря на то, что такие программные решения имеют некоторые ограничения функций, особенно для пользователей iOS, они по-прежнему являются хорошим вариантом для начала или расширения вашего текущего веб-сайта.

(Этот гостевой пост написал Виталий Купренко для Hongkiat.com. Виталий – технический писатель в Cleveroad (cleveroad.com), украинская компания по разработке веб-приложений и мобильных приложений. Ему нравится писать о технологических инновациях и цифровых способах развития бизнеса.)