Миграция из TMA в PWA: сервис Yuloo

У «Потрясных находок» было сообщество в Telegram на 12 тысяч человек и мини-приложение внутри мессенджера: лента находок, материалы, подборки товаров, подписка. Продукт жил целиком внутри Telegram.

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

Приложение к такому переезду было не готово вообще. Оно не просто использовало Telegram, оно на нём держалось.

Авторизация работала на подписи initData от мессенджера. Интерфейс опирался на телеграмный SDK: кнопка «назад», область просмотра, открытие ссылок. Композабл с телеграмными функциями был импортирован в тридцати файлах. Высота экрана считалась от переменной, выставляемой Telegram. Реферальные ссылки генерировались как диплинки в бот.

И главное: корневой файл приложения проверял наличие данных от Telegram и, не найдя их, уводил пользователя на заглушку «откройте в Telegram». Вне мессенджера приложение просто не запускалось.

Отдельно стояли подписки. Ими управляет Salebot: он же принимает оплату, он же источник истины по доступу. Приложение спрашивало у него статус по идентификатору в Telegram. Вне Telegram такого идентификатора нет.

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

1. Сняли блокировку запуска вне Telegram и отвязали интерфейс от телеграмного SDK.

2. Сделали несколько путей входа под разные источники трафика: код по телефону, вход через бота, VK ID, прежний Telegram initData.

3. Перевели проверку подписки с телеграмного идентификатора на связку через Salebot по телефону и по клиенту бота.

4. Поставили Redis-кэш статуса подписки с запасным путём через базу.

5. Собрали вторую воронку оплаты: экран «Доступ ограничен», выбор бота, оплата в нём, возврат с активной подпиской.

6. Сделали приложение устанавливаемым на домашний экран с уведомлением об обновлениях.

Отвязка от Telegram: тридцать файлов и одна заглушка

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

Дальше разбирали зависимости от телеграмного SDK. Кнопка «назад», область просмотра, открытие внешних ссылок работали через него, и всё это встречалось в тридцати файлах.

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

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

Вход: четыре двери вместо одной

Пользователи приходят из разных мест, поэтому и входов несколько.

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

Кто пришёл из ВКонтакте, видит кнопку VK ID: один тап, безопасный обмен без хранения секрета в браузере. Отдельно обработан случай, когда ВКонтакте перенаправляет браузер вместо вызова обработчика.

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

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

Вход через бота: ни одной цифры вводить не нужно

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

Поэтому рядом с вводом кода поставили вход через бота.

Работает так. Человек нажимает «Войти через бота». Приложение просит сервер открыть сессию входа и получает короткую метку, по ней собирается ссылка. Человек переходит в бота и нажимает единственную кнопку «Старт». Бот сообщает серверу, что владелец аккаунта подтвердил вход по этой метке. Вкладка всё это время опрашивает сервер и, получив подтверждение, пускает человека внутрь.

Вводить не нужно ничего. Две кнопки: одна в браузере, одна в мессенджере.

Для аудитории сообщества это решило задачу: все двенадцать тысяч уже подписаны на бота, ссылка открывается в один тап, кнопку «Старт» они нажимали хотя бы раз.

На стороне бота ни строчки кода мы не писали. Сценарий собран в конструкторе Salebot: условие ловит переход по ссылке, блок запроса дёргает наш обработчик подтверждения. Клиент правит сценарий сам.

Как нашлись прежние пользователи

Главная сложность переезда лежала не в интерфейсе, а в сопоставлении личности.

Раньше пользователь опознавался по идентификатору в Telegram, и по нему же запрашивался статус подписки в Salebot. Человек, зашедший в браузере по номеру телефона, приходит вообще без этого идентификатора.

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

Человек из сообщества вводит свой номер и попадает в тот же аккаунт, с той же подпиской, оплаченной когда-то в боте.

Подписка: Redis и запасной путь

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

Поставили кэш в Redis на сутки. Проверка доступа сначала смотрит в кэш и только потом идёт дальше. После оплаты в боте кэш сбрасывается, и следующий запрос получает свежий статус.

Отдельно предусмотрен запасной путь: если Redis недоступен, приложение продолжает работать через базу и Salebot, как раньше. Кэш ускоряет работу, но его отказ не роняет доступ к контенту.

Вторая воронка: оплата в боте, доступ в вебе

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

Из этого выросла отдельная воронка. Пользователь без подписки видит экран «Доступ ограничен» с выбором бота: Telegram, ВКонтакте, MAX. Выбирает удобный, переходит, оплачивает там. Возвращается в приложение кнопкой, и подписка уже активна, потому что кэш сброшен по факту оплаты.

Список ботов хранится в базе со своим шаблоном ссылки и порядком показа. Добавить площадку можно записью в таблице, без правок кода.

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

Сессия не рвётся на ровном месте

Простой вход стоит немного, если приложение выбрасывает человека при первом сбое сети.

Доступ живёт по короткому токену, обновление идёт по второму, он меняется при каждом обновлении. Интереснее обработка отказов.

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

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

Приложение без магазинов

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

Когда выходит новая версия, человек видит короткий тост «Доступно обновление» с кнопкой. Обновление не происходит молча и не требует ничего искать.

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

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

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