Приложение, PWA или сайт: что выбрать магазину

PWA (progressive web app) — это веб-сайт, который можно установить на телефон как приложение и который умеет работать при плохой связи. Нативное приложение — отдельная программа из App Store или Google Play. Адаптивный сайт — обычный сайт в браузере, подстраивающийся под экран.

Простыми словами

Три варианта отличаются тем, насколько глубоко они встроены в телефон и сколько усилий требуют:

Определение MDN: PWA — это приложение на веб-технологиях с опытом, подобным платформенному; работает на разных устройствах из одного кода, устанавливается, может работать офлайн и в фоне (MDN). После установки у PWA есть иконка, она открывается в отдельном окне без интерфейса браузера (web.dev).

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

web.dev прямо их называет (web.dev): - Safari и Firefox на компьютере не поддерживают установку PWA. - Установку PWA невозможно выполнить из встроенных браузеров многих приложений (Facebook, Instagram, Gmail). Для магазина это важно: часть трафика из соцсетей открывается именно там. - В реализации Apple нет многих возможностей браузеров на Chromium. На iOS установку сложнее показать, поэтому в интерфейсе часто нужна подсказка «Как установить». - Нужно тестировать на каждой платформе и иметь запасные варианты.

Push на iOS работает с версии 16.4 и только для сайтов, добавленных на главный экран; разрешение пользователь даёт после действия на странице, например нажатия кнопки подписки (WebKit).

Примеры роста конверсии и удержания (Rakuten 24, Goibibo, JD.ID) на web.dev поданы как кейсы компаний, а не проверенные исследования (web.dev); поэтому перенос этих цифр на другой магазин был бы предположением.

Как решить

Сначала вопрос, а не технология.

1. Достаточно ли быстрого мобильного сайта? Для большинства магазинов да. Основной путь покупателя «поиск, реклама, карточка, оформление» требует быстрого сайта и удобного чекаута: см. мобильный UX и Core Web Vitals.
2. Есть ли причина для установки? Регулярные повторные покупки (еда, косметика, зоотовары), программа лояльности, быстрый повторный заказ, уведомления о статусе. Тогда PWA или приложение имеют смысл.
3. Есть ли ресурсы? Приложение — это отдельный продукт: разработка двух платформ, релизы, проверка магазинами, поддержка. Данные о том, «сколько это стоит», зависят от проекта; открытых надёжных нормативов нет.
4. Нужны ли возможности устройства? Глубокие функции (сканирование, сложная работа с камерой, фоновый режим) чаще требуют нативного кода; у PWA их набор ограничен браузером. Проверяйте поддержку конкретных API на MDN перед решением.
5. Кто уже ваши покупатели? Если большинство приходит из поиска и рекламы один раз, приложение им не нужно. Если есть ядро постоянных клиентов, приложение или PWA можно предлагать им после второй-третьей покупки, а не всем сразу.

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

Типичные ошибки

• Делать приложение, потому что «так делают большие». У Rozetka или Prom другая база покупателей.
• Копировать сайт в приложение без новых сценариев. Новых причин им пользоваться нет.
• Не вести отдельную аналитику сайта, PWA и приложения.
• Закладывать push как канал на всех. Разрешение просят после действия пользователя, а не сразу при входе (WebKit).
• Забыть об обновлениях: приложению нужна постоянная поддержка новыми версиями ОС.

FAQ

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

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

Работает ли PWA на iPhone? Да, с ограничениями: установка сложнее, набор функций меньше, push только для добавленных на главный экран сайтов с iOS 16.4 (web.dev, WebKit).

PWA или нативное приложение дешевле? У PWA одна кодовая база с общими технологиями сайта (MDN); конкретные расходы зависят от проекта.

Связанные термины

• Мобильная версия магазина
• Core Web Vitals: LCP, INP, CLS
• Headless-коммерция
• Омниканальность
• Доля повторных покупок (repeat purchase rate)

Источники

• MDN, Progressive web apps — developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• web.dev, Learn PWA: Progressive web apps — web.dev/learn/pwa/progressive-web-apps
• web.dev, Progressive web apps (collection) — web.dev/explore/progressive-web-apps
• WebKit, Web Push for Web Apps on iOS and iPadOS — webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados