PWA для интернет-магазина: приложение без App Store и второй разработки
Магазин на домашнем экране покупателя: каталог открывается из памяти телефона, корзина переживает лифт и метро, статус заказа приходит уведомлением. Каталог никуда не переносится, второй кодовой базы не появляется, в магазины приложений ничего не публикуется — это ваш же магазин, к которому добавили три служебные вещи.
- Каталог и корзина под рукой, а не в поиске среди чужих вкладок
- «Заказ собран», «передан в доставку» — сообщением на телефон
- Правка в магазине сразу у всех: ни модерации, ни ожидания обновления
Это страница про магазин. Что такое PWA вообще, чем оно отличается от мобильного приложения и подойдёт ли ваш сайт — на странице направления: PWA-приложения
Три способа дать покупателю приложение
Решение «нам нужно мобильное приложение» у магазина обычно уже принято — и принято до того, как кто-то посчитал два других варианта. Таблица сравнивает их по тому, что важно именно магазину: каталог, остатки, корзина и статус заказа.
| Что сравниваем | Нативное приложение | PWA | Telegram Mini App |
|---|---|---|---|
| Где живёт | В App Store и Google Play | На вашем домене | Внутри мессенджера |
| Как попадает на телефон | Покупатель ищет вас в магазине приложений и скачивает | Ставится с вашего же сайта после покупки | Открывается по кнопке в чате или по QR |
| Каталог и остатки | Пишется заново и связывается с вашей системой | Те же, что на сайте: переносить нечего | Витрина собирается отдельно под мессенджер |
| Корзина при плохой связи | Живёт в телефоне полноценно | Не теряется: копия в телефоне, оригинал на сервере | Требует связи |
| Статус заказа | Уведомлением | Уведомлением, на iPhone — установившим приложение | Сообщением от бота в тот же чат |
| Оплата | По правилам магазина приложений | Те же способы, что на сайте, эквайринг ваш | Внутри мессенджера, эквайринг ваш |
| Кто может снять с публикации | Площадка, по своим правилам | Никто: публикации нет | Мессенджер |
| Стоимость входа | от 150 000 ₽ | от 40 000 ₽ | от 50 000 ₽ |
| Когда выбирать магазину | Нужен сканер, работа в фоне или своя логистика в телефоне курьера | Есть работающий магазин и покупатели, которые возвращаются | Покупатели приходят из канала и переписки |
PWA и Mini App не конкурируют — у них разные точки входа. Приложение на домашнем экране ловит тех, кто уже покупал у вас на сайте; приложение внутри мессенджера — тех, кто пришёл из канала. Магазину, у которого есть и то и другое, разумно сделать оба: сервер, каталог и оплата при этом пишутся один раз. Telegram Mini Apps
Нативное приложение мы тоже делаем и посчитаем его честно, если ваш сценарий требует камеры, датчиков или работы в фоне. Просто у магазина такой сценарий встречается реже, чем решение его заказать. Мобильные приложения
Что появляется у магазина
Шесть вещей, и все они про покупателя, который у вас уже покупал. Про иконку, запуск без браузера и отсутствие модерации написано на странице направления — здесь только то, что относится к торговле.
Карточки, которые покупатель уже смотрел, показываются до того, как пришёл ответ сервера. Разница видна там, где связь плохая: в метро, в лифте, в торговом центре — то есть ровно там, где люди и листают магазины.
Собранная корзина остаётся при пропаже сети и при перезапуске приложения. Оригинал при этом лежит на сервере, а телефон держит копию — наоборот делать нельзя, и почему, разобрано ниже отдельным блоком.
«Принят», «собран», «передан в доставку», «ждёт в пункте выдачи» — сообщением на телефон, без магазинов приложений и их правил. Это единственный тип уведомления, которого покупатель ждёт и на который не раздражается.
История покупок и «купить снова» на первом экране: расходники, корм, косметика, запчасти — всё, что берут по второму кругу, перестаёт требовать поиска по каталогу. Именно на этом магазин и зарабатывает приложением.
Эквайринг остаётся вашим, комиссии магазина приложений не появляется, чек уходит по тем же правилам. Ничего не переносится и не оформляется заново: приложение платит теми же руками, что и сайт.
Установка — это метрика, а не событие: сколько людей поставили приложение, сколько вернулись и чем их средний чек отличается от остальных. Без этих чисел нельзя решить, нужны ли вам уведомления с сегментами.
Путь покупателя: от первой покупки до третьей
Пять шагов глазами покупателя, а не глазами разработчика. Под каждым — что в это время делает система. Приложение магазина и есть эта связка, а не набор экранов: если убрать любой шаг, следующий не случится.
-
Приходит из рекламы или поиска
Обычный первый визит: человек вас не знает, приложение ему пока не нужно и предлагать его бессмысленно.
В системе: ничего особенного — это тот же магазин, что и был
первый визит -
Делает первый заказ
Оформляет и платит так же, как раньше. Ничего нового в этот момент не происходит — и это важно: обвязка не трогает оформление заказа.
В системе: заказ уходит туда же, куда уходил всегда
как обычно -
Видит предложение поставить приложение
Не при входе, а после оплаты — когда человек уже доверился магазину и понимает, зачем ему за ним следить. Предлагать незнакомцу — верный способ получить отказ, после которого браузер больше не спросит.
В системе: на iPhone вместо кнопки рисуется подсказка, там установка ручная
10 секунд -
Получает уведомление о статусе
«Заказ собран», «передан в доставку», «ждёт в пункте выдачи». Повод открыть приложение появляется сам, и это не рассылка — это то, чего человек ждал.
В системе: статус берётся из вашей системы заказов, а не проставляется руками
по событию -
Возвращается за второй покупкой
Не через поиск, не через выдачу и не через чужие вкладки, а нажатием на иконку. История и «купить снова» сокращают повторный заказ до пары касаний.
В системе: каталог открывается из памяти телефона, цена и наличие запрашиваются с сервера
меньше минуты
Всё, ради чего это делается, происходит на пятом шаге. Первые четыре — обычный магазин, который у вас и так есть: обвязка их не меняет. Приложение начинает отрабатывать себя там, где человек возвращается, не заходя в поиск и не выбирая из выдачи. Поэтому окупаемость здесь считают по доле повторных покупок, а не по числу установок: установка без второго заказа не стоит ничего.
Три ошибки, из-за которых магазин в приложении врёт покупателю
Без имён: так сделано большинство приложений-обвязок, которые попадаются нам на разборе. Ни одна из трёх ошибок не видна на ноутбуке разработчика — все три вылезают у покупателя через неделю после запуска.
-
Цена и наличие показаны из памяти телефона
Самая частая и самая дорогая. Обвязку настраивают «чтобы всё летало», и в память телефона попадает вся карточка товара целиком — вместе с ценой и остатком. Покупатель видит вчерашнюю цену, приходит с ней к вам и оказывается прав: он видел её только что, своими глазами, в вашем приложении.
Как надо: оформление, шрифты и картинки — из памяти телефона, они меняются редко. Цена, остаток и срок доставки — всегда с сервера, а из памяти показываются только когда сети нет, и тогда рядом стоит явная пометка, что данные могут быть неактуальны. -
Корзина живёт только в телефоне
Выглядит удобно: корзина собирается офлайн и никуда не уходит. Проблема в том, что систему никто не спрашивает — если приложением долго не пользуются, телефон вправе очистить его память ради места. Вместе с памятью исчезает собранная корзина, а вместе с ней и заказ, до которого оставался один шаг.
Как надо: оригинал корзины на сервере, в телефоне — копия. Тогда корзина переживает и обрыв связи, и смену устройства, и чистку памяти. В офлайн-память кладут то, что не жалко потерять, и никогда — единственный экземпляр. -
Уведомления шлют обо всём подряд
Приложение поставили ради статуса заказа, а через месяц оно присылает акцию на товар, который человек уже купил. Дальше происходит единственное, что может произойти: приложение удаляют. Обратно его не ставят — второй раз предлагать установку уже некому и нечем.
Как надо: уведомления о заказе приходят всегда, потому что их ждут. Маркетинговые — отдельно, по согласию, по сегменту и с отпиской в один шаг. Разделение делается на старте: разнести их потом, когда база уже собрана, гораздо дороже.
Что кэшируется, а что нет — главное решение проекта у магазина, и принимается оно до первой строки кода. Мы записываем его в виде списка: вот это берётся из памяти телефона, вот это всегда с сервера, вот здесь показываем пометку. Список согласуется с вами, а не остаётся в голове разработчика.
Семь проверок перед тем, как заказывать приложение
Каждая делается за минуту и без нас: открыть свой магазин с телефона, заглянуть в отчёты, спросить у разработчика. Вердикт считается от непройденного — семь совпадений не повод хвалить магазин, зато любое несовпадение стоит разговора до денег. Ничего никуда не отправляется, проверка считается прямо в браузере.
Вердикт появится, как только отметите первый пункт. Считается он от числа несовпадений: семь проверок из многих — не повод заказывать приложение, зато любое несовпадение показывает, что чинить раньше иконки.
Сходится 0 из 7
Разобрать магазинПочему проверка ручная: заглянуть в чужой магазин снаружи и узнать, откуда там берутся остатки, нельзя — эти вещи видны только изнутри, из админки и из ответов сервера. Поэтому семь пунктов написаны так, чтобы каждый можно было пройти самому за минуту, а не чтобы собрать ваш адрес в обмен на «результат проверки».
Разбор магазина до сметы
Чек-лист выше смотрит на семь признаков, разбор — на сам магазин. Полчаса, бесплатно, ведёт основатель. Три вещи, ради которых он и нужен, снаружи не видны ни одному чек-листу.
Что смотрим на разбореОткуда магазин берёт цены и остатки и как часто они обновляются. Есть ли у вас повод для уведомления, кроме акций, — и откуда брать статусы заказа. Что тормозит каталог на реальном телефоне, а не на ноутбуке.
Разбор — это разговор, а не документ. Письменный отчёт с находками и приоритетом правок называется аудитом, это отдельная платная работа. И честный исход, о котором договариваемся заранее: разбор регулярно заканчивается словами «приложение вашему магазину сейчас не нужно» — тогда мы говорим, во что те же деньги вложить вместо него.
От чего зависит цена у магазина
Своей сметы у этого формата нет: цена берётся из смет направления, и общие факторы — состояние сайта, набор возможностей, число устройств — разобраны там. Здесь четыре фактора, которые бывают только у магазина и которых на странице направления нет.
-
Откуда магазин берёт цены и остатки
Главный фактор, и он технический. Если цена и наличие лежат в базе сайта и меняются там же — правила кэширования пишутся за пару часов. Если они приезжают обменом из 1С или со склада, добавляется работа: понять, насколько свежие данные приходят, что показывать в промежутке между обменами и как пометить карточку, когда сети нет. Магазин, у которого остатки обновляются раз в сутки, и магазин с живыми остатками — это разные проекты при одинаковом каталоге.
-
Размер каталога и как по нему ходят
Дело не в числе товаров само по себе, а в том, что нужно держать под рукой. Каталог из пары сотен позиций помещается в память телефона почти целиком; каталог из десятков тысяч — никогда, и тогда решается, что именно сохранять: последние просмотренные, избранное, товары из истории заказов. Отдельно считаются фильтры и поиск: если они живут на сервере, при плохой связи они не работают, и это надо честно показать пользователю.
-
Нужны ли уведомления о статусе и кто их отправляет
Отправить сообщение на телефон — половина работы. Вторая половина в том, откуда берётся событие: статус должен приезжать из вашей системы заказов сам, а не проставляться менеджером в третьем месте. Сюда же сегменты, согласие и отписка, разное поведение на Android и iPhone. Мы считаем уведомления отдельным модулем, а не галочкой, именно поэтому.
-
Повторный заказ и личный кабинет
«Купить снова» в два касания требует, чтобы приложение знало, кто его открыл, и видело историю заказов. Если кабинет на сайте уже есть — это настройка. Если входа нет вовсе, появляется отдельная работа: вход без пароля, своё содержимое у каждого, история и документы. Это тот случай, когда формат уезжает со второй ступени сметы на третью.
Вход в направление — от 40 000 ₽, и в эту сумму магазин попадает, когда нужна только базовая обвязка: иконка, запуск без браузера, каталог из памяти телефона. Магазину почти всегда нужна вторая сборка — от 130 000 ₽, 3–5 недель: без уведомлений о статусе заказа приложение теряет главный повод открыть его во второй раз. Состав всех трёх сборок открыт на странице направления: Три сборки PWA
Как идёт работа над магазином
Четыре шага. Обратите внимание на первый: он не про иконки и не про дизайн, а про список того, что запрещено класть в память телефона. У магазина этот список и есть проект — всё остальное делается поверх него.
-
Шаг 1
Договариваемся, что никогда не кэшируется
полдня, до договора
Проходим каталог и выписываем: оформление, шрифты и картинки берём из памяти телефона; цену, остаток и срок доставки — всегда с сервера; вот здесь при отсутствии сети показываем пометку «данные могут быть неактуальны». Список согласуется с вами письменно и дальше не меняется по ходу.
-
Шаг 2
Обвязка и правила кэширования
основная часть работы
Кладём служебные файлы, рисуем иконки под все размеры и экран запуска с вашим логотипом, настраиваем посредника по согласованному списку. Корзина связывается с сервером: в телефоне копия, оригинал у вас. Сам магазин при этом не переписывается.
-
Шаг 3
Статусы заказа и уведомления
вторая сборка направления
Подключаем события из вашей системы заказов: принят, собран, передан в доставку, ждёт в пункте выдачи. Отдельно разносим уведомления о заказе и маркетинговые — с согласием, сегментом и отпиской в один шаг. База подписчиков копится в вашей системе, а не у нас.
-
Шаг 4
Приёмка на живых телефонах и запуск
от вас — полчаса со своего телефона
Ставим приложение на разные устройства: свежий Android, старый Android, iPhone. Проверяем установку, обрыв связи посреди оформления заказа и обновление до новой версии. После приёмки включаем подсказку об установке — она появляется после оплаты, а не при входе.
Сроки для готового магазина названы в сметах направления, и они считаются от состояния сайта, а не от размера каталога. Если магазин нужно готовить — мобильная версия, скорость, доступ к коду, — подготовка идёт до первого шага, и её часы называются до счёта отдельной строкой.
Три возражения, которые говорят вслух
Все три справедливые, и первое — справедливее остальных. Отвечаем здесь, а не на созвоне, чтобы вы могли подумать без нас и без давления.
Из магазина приложений — действительно почти никто: ради одного заказа скачивать сто мегабайт никто не станет. Здесь скачивания нет вовсе, установка занимает секунду и предлагается после оплаты — тому, кто у вас уже купил. Это другая аудитория и другой момент. Но доля всё равно будет не стопроцентной, и планировать надо от того числа повторных покупателей, которое у вас есть сейчас.
И это хорошо: без неё обвязку ставить бессмысленно, приложение упаковывает магазин, а не чинит его. Мобильная версия работает на первый визит — человек пришёл из рекламы, купил, ушёл. Приложение работает на второй и третий: между «вспомнил» и «открыл» исчезают поиск, выдача и чужие вкладки. Если повторных покупок у вас нет, мобильной версии действительно достаточно.
Делают — и у них другой масштаб задач: своя логистика в телефоне курьера, сканер в торговом зале, миллионы установок, на фоне которых разработка двух приложений окупается. Если ваш сценарий описывается словами «наш магазин, но чтобы открывался с иконки и работал в метро», нативная разработка даст то же самое, но это от 150 000 ₽ против от 40 000 ₽. Если в сценарии есть камера или фон, мы посчитаем нативное честно.
Эта страница — часть направления PWA
Обвязка одна и та же, а смысл у неё разный: у магазина она про вторую покупку, у сотрудников — про работу без связи. Общее — что такое PWA, чего оно не умеет, тест пригодности сайта и три сборки со сроками — живёт на странице направления. Здесь этого намеренно нет, чтобы не пересказывать одно и то же дважды.
Что идёт рядом
Четыре соседние страницы, и в двух случаях из четырёх начинать разумнее не отсюда. У каждой метка, зачем она здесь.
Заявки и заказы из разных каналов удобнее считать в одном месте — иначе непонятно, что дало приложение, а что реклама. Это сквозная аналитика, и она нужна ровно тогда, когда каналов становится больше одного.
Когда магазину это не нужно
Четыре ситуации, в которых мы отговариваем. Обвязка магазина — лёгкая продажа: дёшево по сравнению с приложением, быстро, звучит современно. Именно поэтому её чаще всего покупают зря.
-
Если у вас покупают раз в несколько лет
Мебель на заказ, окна, отделочные материалы под один ремонт, крупная техника. Приложение живёт повторными заходами, а если второго захода не будет, иконка на экране не понадобится никому — её просто удалят при следующей чистке телефона. Те же деньги в скорость каталога и в рекламу дадут больше, и на разборе мы предложим именно это.
-
Если весь трафик разовый и приходит из поиска
Бывает у магазинов, которые продают редкие позиции: человек ищет конкретную деталь, находит, покупает и больше не возвращается, потому что деталь ему больше не нужна. Это нормальная модель, в ней нет ничего плохого — просто в ней приложение не окупается, а мобильной версии достаточно.
-
Если остатки наружу не отдаются и меняются каждый час
Самый неприятный случай и самый частый повод отказаться. Если сайт не умеет показывать живое наличие, приложение унаследует эту слепоту и усилит её: из памяти телефона человек увидит вчерашнее наличие и приедет за товаром, которого нет. Чинится это не обвязкой, а обменом с вашей учётной системой — и начинать надо с него.
-
Если продажи идут на маркетплейсах, а сайт — витрина
Покупатель живёт в чужом приложении, корзина и оплата тоже там, и возвращаться ему к вам незачем. Иконка вашего магазина на его экране окажется третьей после двух маркетплейсов, и открывать её он не станет. Здесь работает не приложение, а карточка товара на самой площадке — и это другая работа.
Есть отдельная страница о том, когда наши услуги не нужныОна написана не для красоты: разбор довольно часто заканчивается словами «вам это пока не нужно, сделайте вот это сами» — и мы показываем как.
Когда вам это не нужноPWA для интернет-магазина: что стоит знать до заказа
Зачем интернет-магазину PWA
PWA нужно магазину ради второй покупки, а не первой. Первый заказ человек делает там, куда его привела реклама или поиск: приложение в этот момент не играет никакой роли, и предлагать его бессмысленно. Разница начинается потом — когда покупателю снова что-то понадобилось. Без приложения он вспоминает название, ищет, выбирает из выдачи и нередко уходит к тому, кто оказался выше. С приложением он нажимает иконку, стоящую там же, где мессенджеры и банк.
Второе, что даёт обвязка магазину, — работа при плохой связи. Карточки, которые покупатель уже смотрел, открываются из памяти телефона, пока сеть только ищется. Это важнее, чем кажется: телефон листают в метро, в лифте, в очереди и в торговом центре, и обычный магазин там просто не открывается. Важная оговорка: из памяти показывается оформление и содержимое карточки, но не цена и не остаток — их приложение всегда запрашивает с сервера.
Третье — повод вернуться. Уведомление о статусе заказа: принят, собран, передан в доставку, ждёт в пункте выдачи. Это единственный тип сообщения, которого покупатель ждёт сам и на который не раздражается, — в отличие от рассылки со скидками, которая чаще приводит к удалению приложения, чем к заказу.
PWA или мобильное приложение для магазина
Нативное приложение — отдельная программа под iOS и отдельная под Android, которые пишут, публикуют в магазинах приложений, проводят через модерацию и обновляют параллельно с сайтом. У магазина к этому добавляется каталог: его логика, фильтры, корзина и оплата собираются заново и связываются с вашей системой. Вход в такую разработку начинается от 150 000 ₽, и это не считая содержания двух продуктов вместо одного.
Обвязка стоит от 40 000 ₽ и делает из вашего же магазина приложение, не создавая второго кода. Каталог не переносится, оформление заказа не переписывается, эквайринг остаётся вашим, комиссии магазина приложений не появляется. Практическое правило простое: если задача описывается словами «наш магазин, но чтобы открывался с иконки и работал при плохой связи» — нужна обвязка. Если в задаче есть сканер штрихкодов, работа курьера в фоне или интеграция с оборудованием — нужна нативная разработка, и мы посчитаем её честно.
Третий вариант, о котором часто забывают, — приложение внутри мессенджера. Оно ловит не тех же людей: не покупателей вашего сайта, а подписчиков канала и тех, кто пишет вам в переписке. PWA и Mini App не конкурируют — у них разные точки входа, и магазину с обоими каналами разумно сделать оба: сервер, каталог и оплата при этом пишутся один раз.
Что нельзя кэшировать в интернет-магазине
Главное техническое решение проекта у магазина — список того, что запрещено класть в память телефона. Туда никогда не попадают цена, остаток и срок доставки. Покупатель, увидевший вчерашнюю цену в вашем приложении, приходит с ней к вам и оказывается прав: он видел её только что и своими глазами. Из памяти эти данные показываются в одном случае — когда сети нет, и тогда рядом стоит явная пометка, что они могут быть неактуальны.
Корзина устроена наоборот тому, как её делают по привычке: оригинал живёт на сервере, а телефон держит копию. Причина в том, что систему никто не спрашивает — если приложением долго не пользуются, телефон вправе очистить его память ради места. Корзина, живущая только в телефоне, исчезает вместе с этой памятью, и вместе с ней исчезает заказ, до которого оставался один шаг.
Из памяти телефона правильно отдавать то, что меняется редко: оформление, шрифты, иконки, картинки товаров, структуру каталога. Именно это и даёт ощущение мгновенного открытия, ради которого приложение ставят. Список составляется до первой строки кода и согласуется письменно — иначе он остаётся в голове разработчика и через полгода восстановить его нельзя.
Вопросы про приложение магазина
Шесть вопросов, которые задают владельцы магазинов. Общие вопросы про PWA — чем оно отличается от закладки, работает ли на iPhone, кому принадлежит приложение — собраны на странице направления: ответы должны жить в одном месте, иначе со временем разойдутся.
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутТем, что не появляется второго магазина. Нативное приложение — отдельная программа под iOS и отдельная под Android, в которых каталог, корзина и оплата собираются заново; вход в такую разработку начинается от 150 000 ₽. Обвязка делает приложение из вашего же магазина, и это от 40 000 ₽: каталог не переносится, оформление заказа не переписывается, эквайринг остаётся вашим. Подробное сравнение — в таблице выше
Да: собранная корзина не теряется при обрыве связи и при перезапуске приложения. Устроено это так, что оригинал лежит на сервере, а в телефоне хранится копия, — иначе корзина исчезала бы вместе с памятью приложения, которую система вправе очистить. Оформить и оплатить заказ без сети нельзя: платёж требует связи с банком.
Событие приезжает из вашей системы заказов: сменился статус — ушло сообщение. Руками менеджер ничего не проставляет, иначе уведомления быстро перестанут совпадать с реальностью. Уведомления о заказе и маркетинговые разносятся с самого начала: первые приходят всегда, вторые — по согласию, по сегменту и с отпиской в один шаг. На iPhone уведомления получают только те, кто поставил приложение на домашний экран, — это ограничение платформы, и мы его не обходим.
Нет. Приложение — это ваш же магазин, к которому добавили служебные файлы: тот же каталог, те же адреса страниц, та же админка, та же выгрузка в поиск. Переносить, выгружать и заводить товары заново не нужно ни разу. Меняется только то, как магазин открывают и что показывается при плохой связи.
Своей цены у этого формата нет, она берётся из смет направления. Вход — от 40 000 ₽: иконка, запуск без браузера, каталог из памяти телефона. Магазину обычно нужна вторая сборка, от 130 000 ₽ и 3–5 недель, потому что без уведомлений о статусе заказа приложение теряет главный повод открыть его повторно. Что двигает цену внутри этих границ — разобрано выше, состав всех трёх сборок открыт на странице направления
Тогда всё написанное здесь остаётся в силе, но добавляется платформенная часть: куда ложатся служебные файлы, почему ядро остаётся нетронутым и как развести композитный кеш с кешем приложения. Про это есть отдельная страница — она техническая и написана для того, кто отвечает за сайт.
Пришлите адрес магазина — скажем, что даст приложение и во что обойдётся
- Разбор 30 минут: смотрим магазин и говорим, готов ли он к обвязке
- Сразу называем, что нельзя будет кэшировать и откуда брать статусы заказа
- Если повторных покупок у вас нет — скажем это и предложим, куда вложить деньги вместо
Заявка принята
Посмотрим магазин и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут