PWA-приложение: что это, как работает и когда подходит бизнесу

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

Такой формат стоит рассмотреть, когда клиенты регулярно возвращаются в сервис: повторяют заказ, проверяют его статус, записываются на услугу. PWA даёт им быстрый вход с экрана телефона, а бизнесу — возможность развивать веб-версию без обязательного размещения в магазине приложений. Чтобы понять, подходит ли это вашей задаче, нужно проверить путь пользователя и функции, от которых он зависит.

Разберём, как устроено PWA, чем оно отличается от мобильного сайта и приложения, как установить его на iPhone и Android и что заложить в разработку.

Что такое PWA простыми словами

PWA расшифровывается как Progressive Web App — прогрессивное веб-приложение. Оно использует веб-технологии, но может давать привычный опыт приложения: запуск с иконки, отдельное окно, доступ к сохранённому содержимому.

Разберём на условном примере. У поставщика продуктов есть сервис для небольших кафе. Управляющий открывает каталог по ссылке, входит в кабинет и оформляет поставку. Если сервис поддерживает установку PWA, управляющий добавляет его на телефон и в следующий раз начинает с иконки «Поставки». Внутри работает тот же веб-сервис с каталогом и заказами.

Для первого знакомства установка необязательна: клиент может пользоваться сервисом в браузере. Добавить его на экран имеет смысл, когда повторный вход действительно удобнее поиска ссылки.

Название «прогрессивное» описывает подход к возможностям. Разработчик проверяет поддержку функции и добавляет её там, где она доступна. Например, сервис может предложить уведомления в одном окружении и показать статус заказа внутри кабинета в другом. Основное действие пользователя желательно сохранять доступным в обоих случаях.

Как работает PWA-приложение

У PWA есть обычная веб-часть — страницы, интерфейс и обмен данными с сервером. Дополнительные механизмы отвечают за установку, сохранение ресурсов и обработку событий. Их полезно различать: каждый решает свою задачу.

Манифест отвечает за установку и вид приложения

Web App Manifest — файл с настройками приложения для браузера: названием, иконками, стартовым адресом и режимом отображения. По этим настройкам браузер понимает, как представить установленный сервис пользователю.

В примере с поставками манифест задаёт иконку «Поставки» и стартовую страницу кабинета. Режим standalone позволяет открывать сервис в отдельном окне без привычной адресной строки. Для рабочего публичного PWA требуется HTTPS — защищённое соединение; локальная разработка имеет отдельные исключения.

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

Service worker помогает работать без интернета

Service worker — скрипт, который браузер запускает отдельно от страницы. Он может обрабатывать запросы и возвращать заранее сохранённые ресурсы из кэша — локального хранилища. Разработчик определяет, какие данные сохранять и когда обращаться за новой версией к серверу.

Для работы PWA без интернета нужно настроить сохранение данных и поведение при потере связи. Service worker используют для офлайн-сценариев и обработки push-сообщений. Для самой возможности установки PWA он не обязателен.

Вернёмся к кафе. Управляющий заранее открыл каталог, а затем потерял связь. Если каталог сохранён, сервис может показать товары и позволить подготовить черновик заказа. Актуальные остатки, цены и принятие заказа поставщиком проверяют по ответу сервера при наличии связи.

В интерфейсе это стоит обозначить прямо: «Каталог сохранён ранее. Заказ пока не отправлен». Когда связь появится, сервис должен сверить данные и отправить заказ по предусмотренному сценарию. Автоматическая отправка в фоне требует отдельной реализации и поддержки браузером; запасной вариант — предложить пользователю повторить отправку.

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

PWA остаётся веб-приложением даже после установки. Нативное приложение создают для конкретной платформы и запускают средствами операционной системы. Мобильный сайт прежде всего решает задачу доступа через браузер; PWA добавляет к этому сценарию возможности приложения.

Граница между сайтом и PWA постепенная. Обычный сайт тоже может использовать кэш и отдельные веб-функции. Поэтому при выборе полезнее сравнивать нужное поведение, чем наличие ярлыка.

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

Кроссплатформенная разработка мобильных приложений — ещё один подход: значительную часть кода используют для нескольких платформ, а доступ к системным функциям получают через соответствующие инструменты. Это отдельный выбор архитектуры. Подробнее о нём — в статье о нативных и кроссплатформенных приложениях.

Преимущества PWA для бизнеса

Главная польза PWA — удобный повторный доступ к веб-сервису. Остальные преимущества нужно соотносить с состоянием сайта и задачей продукта.

Клиент может начать по ссылке. Для первого заказа или знакомства с каталогом ему не обязательно искать приложение в магазине. Установку можно предложить позже, когда понятна её польза: например, после успешной поставки предложить быстрый доступ к повторному заказу.

Можно использовать существующую веб-основу. Если каталог, кабинет и серверный обмен уже работают, часть продукта не придётся создавать заново. Экономия зависит от того, насколько готов мобильный интерфейс и какие функции нужно добавить. Для тяжёлого или неудобного сайта работа может начаться с его переработки.

Сохранённые ресурсы помогают при повторной загрузке и слабой связи. Например, интерфейс и ранее открытый каталог могут оставаться доступными при обрыве соединения. Скорость первого входа, объём скачиваемых файлов и отзывчивость всё равно зависят от реализации.

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

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

Ограничения PWA на iPhone и Android

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

Push-уведомления требуют поддержки и разрешения

На iPhone и iPad поддержка Web Push появилась с iOS и iPadOS 16.4 для веб-приложений, добавленных на домашний экран. Приложение должно реализовать уведомления, а запрос разрешения — следовать за действием пользователя, например нажатием кнопки «Сообщать о статусе заказа». Пользователь может отказать или позже отключить уведомления.

В поддерживаемых браузерах Android веб-уведомления также требуют реализации и разрешения. В задании на push-уведомления укажите событие, адресата и действие после нажатия: например, «после подтверждения поставки уведомление открывает нужный заказ».

Статус при этом должен оставаться доступным в кабинете. Клиент сможет увидеть его даже без согласия на уведомления.

Доступ к устройству и работа в фоне различаются

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

Если сервис должен постоянно отслеживать маршрут при выключенном экране, обмениваться данными с датчиком или выполнять длительную обработку в фоне, начните с проверки именно этой функции. Браузер запускает service worker для обработки предусмотренных событий и управляет временем его выполнения.

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

Локальные данные и обновления нужно контролировать

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

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

Также проверьте выход из аккаунта и вход другого пользователя на том же устройстве. Персональные сведения предыдущего клиента не должны оставаться доступны через старую страницу или локально сохранённый ответ.

Как установить PWA на телефон и компьютер

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

На iPhone

1. Откройте сайт сервиса в Safari.
2. Откройте меню «Поделиться». В некоторых версиях оно находится внутри меню страницы.
3. Выберите «На экран Домой». Если пункта нет в списке действий, проверьте возможность добавить его через редактирование действий.
4. Если показан переключатель «Открывать как веб-приложение», включите его. Проверьте название и нажмите «Добавить».
5. Запустите сервис с новой иконки и проверьте вход в кабинет и основное действие.

После установки проверьте внутри сервиса доступ к сохранённым данным без сети и настройку уведомлений.

На Android

1. Откройте сайт в браузере с поддержкой установки PWA, например Chrome.
2. Найдите предложение установки на странице или пункт в меню браузера. Он может называться «Установить приложение» либо «Добавить на главный экран».
3. Подтвердите действие и запустите сервис с появившейся иконки.
4. Проверьте, открывается ли ожидаемый экран и выполняется ли основной сценарий.

Уточните по инструкции сервиса, добавлен ли ярлык со ссылкой или установлено PWA. Если кнопки установки нет, откройте ссылку в обычном браузере вместо встроенного окна мессенджера и проверьте, поддерживает ли сервис установку на вашем устройстве.

На компьютере

В Chrome или Edge на поддерживаемой системе откройте сайт и проверьте значок установки в адресной строке или соответствующий пункт меню. Подтвердите установку и запустите приложение. Способ удаления зависит от платформы: на телефоне начните с меню иконки, на компьютере — с меню приложения или списка установленных приложений.

Для владельца продукта проверка включает три действия: запустить PWA, войти в кабинет и выполнить основной сценарий.

Когда бизнесу стоит выбрать PWA

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

Для поставщика продуктов следующий шаг — небольшой прототип повторного заказа на целевых телефонах. Для сервиса записи — проверка кабинета и уведомлений. В задаче с оборудованием сначала нужен технический эксперимент с подключением. Он поможет проверить совместимость до проектирования экранов.

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

Как сделать PWA из сайта и оценить объём разработки

Создание PWA из готового сайта начинается с проверки основного сценария на телефоне. Добавление манифеста — только часть работ. Ниже — последовательность для обсуждения проекта с разработчиком.

1. Опишите действие, ради которого пользователь возвращается. Для поставщика это «открыть прошлый заказ, изменить количества, проверить условия и отправить». Отделите необходимое для первого запуска от дополнительных функций.
2. Проверьте веб-основу. Насколько удобен интерфейс на телефоне? Работают ли кабинет, авторизация и обмен с сервером? Есть ли HTTPS? Недостающие функции входят в проект независимо от установки PWA.
3. Проверьте критичные возможности на целевых платформах. Если нужны уведомления, камера или оборудование, подготовьте прототип соответствующего действия. Зафиксируйте поддерживаемые ОС и браузеры.
4. Настройте установку. Подготовьте манифест, иконки, стартовую страницу и подсказку для пользователя. Проверьте путь от ссылки до запуска с экрана устройства.
5. Спроектируйте сохранение и обновление данных. Определите офлайн-сценарии, допустимую давность сведений, правила кэша, поведение после выхода из аккаунта и выпуска новой версии.
6. Проведите приёмку и настройте измерение результата. Проверьте основной путь при нормальной и слабой связи. Разделите использование в браузере, интерес к установке и целевое действие — например, успешно принятый заказ.

На чём писать PWA, выбирают с учётом существующего проекта: основа веб-интерфейса — HTML, CSS и JavaScript, а библиотеки и фреймворки — наборы готовых инструментов — помогают его организовать. React или Vue могут быть частью реализации. Установку, кэш и офлайн-сценарий проверяют на целевых устройствах независимо от выбранного инструмента.

Бюджет нужно сравнивать по одинаковому составу результата. Попросите отдельно оценить доработку мобильного интерфейса, установку, сохранение данных, уведомления, интеграции, проверку платформ и поддержку. Выделите отдельно установку с иконкой и создание кабинета с заказами: это разный объём работ. Выгоду PWA можно оценить, когда сравниваются одинаковые функции.

Полезно получить две оценки одного сценария: веб-версия с нужными возможностями PWA и мобильное приложение. Тогда станет видно, какие работы общие, какие зависят от платформы и где возникает экономия. Итоговая стоимость и возможная экономия зависят от состава работ и готовности веб-основы.

Что проверить перед запуском PWA

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

Укажите рядом с заданием устройства, версии ОС и браузеров, на которых проверяется результат. Если функция недоступна на одной обязательной платформе, заранее согласуйте замену или пересмотрите технологию.

Начните с короткого описания главного действия клиента и функции, без которой сервис теряет смысл. Для повторных поставок это отправка подтверждённого заказа; для работы с оборудованием — надёжное подключение к нему. Такое описание поможет предметно обсудить разработку приложения и сравнить подходы по одному результату.