📱 Ілюзія браузера: Чому Telegram Mini Apps ламають звичну QA-логікуПривіт, екіпаж! Оскільки зараз кожен другий стартап (від AI-тренажерів до магазинів) робиться у форматі Telegram Mini App, час поговорити про новий клас багів. ☕️Здавалося б, TMA — це звичайний фронтенд (Angular, React) усередині iframe. Що може піти не так? Ви відкриваєте його в Chrome, ганяєте тести, все ідеально. Але коли код потрапляє в реальний клієнт Telegram, починається магія, через яку юзери втрачають дані, а додатки крашаться.Telegram Mini App — це не браузер. Це агресивне середовище з власними правилами гри.Ось 3 специфічні "TMA-баги", які ви зобов'язані тестувати:🕳 Смерть від свайпу (State Amnesia)Ви заповнюєте довгу форму реєстрації або проходите тест. Раптом вам приходить повідомлення в інший чат. Ви свайпаєте Mini App донизу (ховаєте його), відповідаєте на повідомлення і розгортаєте додаток знову.Що відбувається: На Android та iOS поведінка різна. Іноді Telegram просто "вбиває" Webview для економії пам'яті. Якщо ваш фронтенд не зберігав стан кожного кроку в sessionStorage або спеціальному CloudStorage телеграму — юзер побачить чистий екран і піде писати гнівний відгук. Тестуйте згортання додатка на кожному екрані! 🎨 Пастка "Зашитого" Дизайну (Theme Desync)В епоху TMA дизайн диктує не ваш дизайнер, а клієнт Telegram. Юзер може мати темну тему, світлу, рожеву з котиками або висококонтрастну.Що робить лінивий розробник: Хардкодить кольори (#ffffff для фону, #000000 для тексту).Що має перевірити QA: У Telegram є об'єкт tg.themeParams. Ви маєте перемкнути тему самого месенджера на найтемнішу і найсвітлішу. Якщо ваш додаток залишається білим, коли весь Telegram чорний — це архітектурний фейл. В ідеалі весь UI має бути побудований на CSS-змінних, які віддає сам Telegram (наприклад, var(--tg-theme-bg-color)). ☁️ Зрада Local Storage (CloudStorage API)Раніше ми зберігали токени та налаштування в звичайному window.localStorage. У TMA це бомба уповільненої дії. Юзер відкрив ваш додаток на телефоні, зберіг налаштування, а потім відкрив Telegram Desktop на ноуті. localStorage порожній.Як тестувати: Правильні TMA 2026 року використовують Telegram.WebApp.CloudStorage. Він синхронізує дані між усіма пристроями юзера. Заведіть за правило: змінили налаштування на мобільному — миттєво перевірте, чи підтягнулися вони в десктопній версії Telegram. Висновок: Якщо ви тестуєте Telegram Mini App тільки у вкладці Chrome браузера — ви не тестуєте його взагалі. Завжди підключайте реальний пристрій, бавтеся зі згортанням, темами та хмарною синхронізацією.А ви вже тестували або розробляли додатки всередині Telegram? 👇🔥 — Так, CloudStorage і ThemeParams — це наша база!👀 — Ганяю тільки в Chrome, сподіваюсь, воно там якось само працює...🤯 — Я взагалі не розумію, як дебажити цей iframe в телефоні!