PWA чи нативний: що обрати для першого застосунку з Claude Code

Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, вів дизайн восьми мобільних банків. Свій застосунок для домашньої бухгалтерії я зібрав на SwiftUI з Claude Code, а наша команда випустила в App Store Heroco. Після цього дизайнери найчастіше питають одне: «а мені на чому починати?». Як збирати застосунок крок за кроком, я вже писав у статті застосунок з Claude Code без команди. Тут тільки про вибір.

Які є чотири шляхи?

• PWA. Сайт з manifest і service worker: відкривається в браузері, ставиться на головний екран і вміє працювати офлайн.
• Capacitor. Твій вебзастосунок усередині нативної оболонки. Інтерфейс лишається HTML і CSS у вебв'ю, камеру і пуші дають плагіни, а зібраний застосунок можна публікувати в сторах.
• Expo. Фреймворк на React Native. Пишеш на JavaScript або TypeScript, а на екрані справжні нативні компоненти iOS і Android з одного коду.
• SwiftUI. Рідний фреймворк Apple. Тільки пристрої Apple, зате все поводиться як системні застосунки.

Що обрати: PWA, Capacitor, Expo чи SwiftUI?

Ось таблиця, з якою я пояснюю вибір. Дивись на рядки, критичні саме для твого продукту, решту можна ігнорувати.

Про Mac для Expo окремо. Поки вистачає Expo Go, застосунок можна дивитись на своєму iPhone і без Mac, а iOS-збірку Expo вміє робити на своїх хмарних серверах (EAS Build). Але Xcode і симулятор iPhone є тільки на macOS. І щойно в проєкті з'являється нативна бібліотека, якої нема в Expo Go, кожна перевірка на iPhone - це хмарна збірка і очікування. Тому на курсі відповідь та сама, що в його FAQ: для iOS потрібен Mac, а PWA і SaaS робиш на будь-якому комп'ютері.

Коли PWA вистачає?

Частіше, ніж здається. Якщо продукт складається з форм, списків, даних і контенту, PWA закриває перші місяці життя без жодного рев'ю.

• Старт на будь-якому комп'ютері. Windows, старий ноутбук, неважливо. Потрібні браузер і Claude Code.
• Деплой за вечір. Claude Code робить manifest, service worker та іконки, а Cloudflare Pages безкоштовно дає живе посилання. Покроково в статті деплой на Cloudflare Pages з Claude Code.
• Встановлення з браузера. На iPhone через меню поширення в Safari і пункт додавання на Початковий екран. На Android Chrome сам пропонує встановити.
• Оновлення без черги. Задеплоїв, і всі вже на новій версії. Без рев'ю і без «оновіть застосунок».

Перші двадцять користувачів не спитають, на чому це зроблено. Вони спитають, чому не зберіглась чернетка. У PWA ти виправляєш це сьогодні і сьогодні ж викочуєш усім.

Коли без нативного не обійтись?

• Bluetooth. На iPhone з браузера до пристрою не достукатись. Годинник, ваги, машина, будь-яке залізо - це нативний застосунок.
• Камера як серце продукту. Кнопку «додати фото» PWA витягне. Якщо ж продукт живе в камері, нативний доступ дає більше контролю і менше сюрпризів.
• Підписки в сторі. Хочеш продавати підписку з тріалом усередині застосунку з App Store чи Google Play - це нативна історія.
• Відчуття системи. Свайп назад, нативні шторки, тактильний відгук, віджети на головному екрані. Користувач iPhone відчуває різницю пальцями, навіть якщо не назве її словами.

Чому SwiftUI зручний дизайнеру?

Бо код на SwiftUI читається як опис шару у Figma. Приблизно так виглядає блок підсумку в застосунку на кшталт мого:

VStack(alignment: .leading, spacing: 8) {
    Text("Витрати за жовтень")
        .font(.headline)
    Text(total, format: .currency(code: "UAH"))
        .font(.largeTitle.bold())
        .foregroundStyle(.red)
}
.padding(16)

VStack - це вертикальний Auto Layout, spacing - відступ між елементами, padding - внутрішні відступи. Дизайнер розуміє це без словника, а значить може перевірити, що зробив агент. У кейсі з домашньою бухгалтерією робоча версія з'явилась за пару годин: Claude Code писав екрани, я дивився в симулятор і давав правки, як розробнику. Кольори брали системні, тому темна тема запрацювала майже без зусиль. Повний шлях від брифу до рев'ю App Store описаний у статті мій кейс з iOS.

Мінус один, але великий: це тільки Apple. Захочеш Android - починаєш другий проєкт з нуля.

Expo чи Capacitor: що це означає для дизайну?

Головна різниця в тому, що малює екран. У Capacitor це вебв'ю, тобто браузер без адресного рядка. В Expo справжні нативні компоненти.

• Capacitor. Верстаєш як сайт: твій CSS, токени і шрифти працюють як є. Але скрол, жести і переходи між екранами треба доводити, інакше застосунок відчувається як сайт. Прості CSS-анімації працюють нормально, складні жести вимагають окремої роботи.
• Expo. Списки, перемикачі і навігація поводяться як рідні з коробки. Стилі пишуться об'єктами в JavaScript, без каскаду CSS, а розкладка на flexbox. Плавні жести і складні анімації робляться через окремі бібліотеки на кшталт Reanimated, тож дивись, що агент додав у проєкт і навіщо.

Моє правило просте. Є готовий вебпродукт і треба в стори - Capacitor. Мобільний продукт з нуля на iOS і Android - Expo. І тримай у голові правила рев'ю App Store: пункт 4.2 вимагає, щоб застосунок давав більше, ніж перепакований сайт. Обгортка без пушів, офлайну чи нормальної навігації ризикує отримати відмову. Як тримати одну дизайн-систему під дві платформи, я розбирав у статті одна дизайн-система для iOS і Android.

Що записати в CLAUDE.md під кожен стек?

CLAUDE.md - файл у корені проєкту, який Claude Code читає на початку кожної сесії. Для мобільного проєкту в ньому мінімум три речі: стек, заборона тягнути сторонні бібліотеки без питання і перевірка збірки після кожної зміни.

# Стек
Один стек на весь проєкт. Не пропонуй переписати на інший.

# Правила
- Сторонні бібліотеки тільки після мого "так"
- Після кожної зміни перевір збірку і скажи, що саме перевірив
- Пояснюй зміни простими словами, я дизайнер

# PWA
HTML, CSS, vanilla JS. manifest.json і service worker обов'язкові.
Перевіряй, що застосунок відкривається без інтернету.

# Capacitor
Весь інтерфейс у вебчастині. Папки ios/ і android/ руками не чіпай,
тільки через npx cap sync.

# Expo
TypeScript. Пакети став тільки через npx expo install.
Після кожної зміни перевіряй типи.

# SwiftUI
Мінімальна версія iOS: 17. Без сторонніх пакетів.
Після кожної зміни збирай проєкт через xcodebuild
і виправляй помилки до того, як показати мені.

У реальному файлі лишаєш тільки свій блок, а версію iOS ставиш свою. Чотири стеки тут для порівняння, не для одного проєкту.

Як попросити Claude Code допомогти з вибором стеку?

Агент обере стек за тебе, якщо дозволити. І зробить це дуже впевнено. Тому спершу проси розклад компромісів, а рішення лишай собі:

Ось мій продукт: [для кого, головний сценарій, 3-5 екранів, які дані].
Мені важливо: [iPhone, Android чи обидва], [чи потрібні стори],
[камера, Bluetooth, пуші, офлайн], [чи є в мене Mac].

Порівняй PWA, Capacitor, Expo і SwiftUI саме для цього продукту.
Для кожного: що я отримаю, що втрачу і що мені як дизайнеру
буде важко перевірити.
Не обирай за мене. Дай таблицю і одне питання,
відповідь на яке допоможе вирішити. Код не пиши.

Останній рядок важливий. Без нього Claude Code радо почне ставити пакети ще до того, як ти дочитав таблицю.

Які помилки найчастіші?

1. Починати з нативного до перевірки ідеї. Тиждень на збірки, підписи і скріншоти для стору, а потім виявляється, що сценарій нікому не потрібен.
2. Змішувати стеки в одному проєкті. Половина екранів у вебв'ю, половина нативні, два способи стилів. Плутаєшся ти, плутається агент.
3. Не назвати стек на старті. На «зроби мені застосунок» агент сам обере фреймворк, який ти бачиш уперше. Рев'юїти такий код ти не зможеш.
4. Вважати обгортку готовим застосунком. Сайт у Capacitor без нічого нативного ризикує не пройти рев'ю Apple. Що робити, якщо відмовили, є в статті про публікацію в App Store без програміста.
5. Забути про тестерів Google Play. Нові особисті акаунти розробника перед публікацією проходять закрите тестування: щонайменше 12 тестерів 14 днів поспіль. Заклади це в план одразу, деталі в статті про 12 тестерів і 14 днів.

Де розібрати вибір стеку на практиці?

На курсі «Застосунки з AI» цьому присвячена окрема лекція «Що будувати: PWA, SaaS чи нативний»: архітектура під задачу, PRD і user flow з Claude. Далі PWA з нуля з офлайном, пушами і деплоєм на Cloudflare, SaaS з базою і логіном, оплати, iOS на Capacitor або Expo з TestFlight і рев'ю App Store, а на лекції про Android ми переносимо Heroco в Google Play. Як і всі курси UX Hero, це воркбук: кожен крок, промпт і перевірка записані. Продаж відкриваємо 26 жовтня.

Хочеш спершу подивитись наживо - 12 листопада о 19:00 буде безкоштовний ефір «Свій застосунок з Claude Code: від ідеї до деплою за ефір». Реєстрація в боті UX Hero, розклад інших ефірів на сторінці ефірів.

Часті питання

Що обрати для першого застосунку: PWA чи нативний?

Якщо ідея ще не перевірена, обирай PWA. Вона робиться на будь-якому комп'ютері, безкоштовно деплоїться на Cloudflare Pages і ставиться на телефон прямо з браузера, а оновлення доходять до всіх одразу без рев'ю. Нативний застосунок потрібен, коли продукту необхідні Bluetooth, підписки в App Store чи Google Play або відчуття системних компонентів iOS.

Чи можна потім перенести PWA в App Store чи Google Play?

Так. Найкоротший шлях: загорнути вебзастосунок у Capacitor і зібрати версії для iOS і Android. У Google Play PWA можна опублікувати і через обгортку Trusted Web Activity. Для App Store додай щось нативне, наприклад пуші, офлайн чи камеру, бо правила рев'ю Apple вимагають, щоб застосунок давав більше, ніж перепакований сайт.

Чи потрібен Mac, щоб зробити застосунок з Claude Code?

Для PWA і SaaS ні, вистачить будь-якого комп'ютера. Для iOS так: Xcode і симулятор iPhone працюють тільки на macOS. Expo вміє збирати iOS-версію у своїй хмарі, а простий застосунок можна дивитись на iPhone через Expo Go, але з нативними бібліотеками кожна перевірка перетворюється на очікування хмарної збірки. Тому для iOS ми радимо Mac.

Що простіше дизайнеру без досвіду в коді: PWA, Expo чи SwiftUI?

PWA, бо це HTML і CSS, які найлегше прочитати і перевірити. Якщо потрібен лише iPhone, SwiftUI теж читається легко: код описує інтерфейс майже як шари у Figma. В Expo і Capacitor більше рухомих частин: React у випадку Expo, нативні проєкти iOS і Android у випадку Capacitor.

Чим Expo відрізняється від Capacitor?

Capacitor показує вебзастосунок у вебв'ю всередині нативної оболонки, тому працюють твої HTML, CSS і токени. Expo побудований на React Native і малює справжні нативні компоненти iOS і Android. Capacitor зручний, коли вебверсія вже є. Expo кращий, коли мобільний продукт стартує з нуля і має відчуватись нативним.

---

Стек обирають під те, що треба перевірити першим. Ідею перевіряє PWA за вечір. Залізо чи стор перевіряють Expo або SwiftUI. Сумніваєшся - дай Claude Code промпт вище і вирішуй сам.