Швидкий старт

За кілька хвилин зберемо ваш перший PWA - від порожнього списку до працюючого застосунку на власному домені. Кроки йдуть по порядку: кожен наступний спирається на попередній, тож просто рухайтеся згори вниз.

Що вже готово

Акаунти Cloudflare та фільтра трафіку підключені заздалегідь і під час створення PWA підставляються самі. Налаштовувати щось до старту не потрібно - одразу переходьте до кроків.

Крок 1. Відкрийте список PWA

У бічному меню ліворуч виберіть пункт PWA. Це ваша робоча вітрина всіх застосунків.

Звідси зручно керувати всім господарством:

• перемикачі All / Active / Inactive вгорі швидко відбирають потрібні застосунки, а поряд є пошук за назвою;
• у стовпці Status видно, що запущено (running), а що зупинено (stopped) - і просто тут застосунок можна ввімкнути або вимкнути, не заходячи всередину;
• колонка Stats згортає воронку застосунку в пʼять чисел (уніки, встановлення, реги, депи, повторні), а фільтр Archived у поповері показує відкладені застосунки.

Якщо ви ще нічого не створювали, список порожній і ви побачите «No PWAs found» - це нормально, зараз виправимо.

Крок 2. Створіть застосунок

Над таблицею праворуч натисніть + Add - відкриється форма нового PWA. На старті активна лише вкладка General: решта відкриються після першого збереження, тому починаємо саме з неї.

Крок 3. Заповніть вкладку «General»

Тут задається фундамент застосунку. Для запуску достатньо буквально кількох полів.

• Name - як застосунок підписаний у вас у панелі. Потрібне лише вам, користувачі його не бачать, тож називайте так, щоб легко знаходити у списку.
• iOS template та Android template - який вигляд має сторінка встановлення на кожній платформі: Native Store для iPhone, Native Store Green або Web Store для Android. Вибір можна змінити й пізніше.

Нижче, під роздільником, стоять службові акаунти Cloudflare (через нього працює домен) і Filter Account (відділяє живий трафік від перевірок). Обидва вже заповнені вашими основними акаунтами й вибираються з готового списку - зазвичай їх можна залишити як є.

Біла сторінка

Поле Landing page type вирішує, що показати замість вітрини, коли трафік розпізнано як перевірку, - так звану «білу сторінку». Від вибору залежить, чи з’явиться поряд додаткове поле:

• Landing page redirect URL - трафік іде на зовнішню адресу (потрібно вказати посилання в полі Landing page URL);
• Load Landing page - показується заздалегідь підготовлений лендінг зі списку;
• Off Landing page / Blank page - біла сторінка не використовується.

Якщо сумніваєтеся - залиште Blank page: на запуск це не впливає, а повернутися до налаштування можна будь-якої миті.

Крок 4. Збережіть застосунок

У шапці форми натисніть Create. Застосунок збережеться, ви потрапите в режим редагування, і відкривається все інше:

• кнопка в шапці змінюється на Save - тепер нею фіксуються будь-які правки;
• стають доступними решта вкладок: Domains, Offer links, Description, Comments, Similar, Metrics і Settings;
• з’являються кнопка Start і мобільний попередній перегляд (значок телефона в кутку).

Якщо збереження не проходить

Форма сама перемкнеться на вкладку з першою помилкою та підсвітить проблемне поле - найчастіше це щось на вкладці General. Виправте підсвічене й натисніть Create ще раз.

Крок 5. Додайте домен

Перейдіть на вкладку Domains - це адреси, за якими відкриватиметься застосунок. Натисніть Add new Domain.

Найпростіший шлях для першого запуску - залишити тип System та вибрати домен із спільного пулу. Якщо хочете власну адресу, перемкніться на My domain, а щоб зареєструвати новий домен прямо з панелі через Namecheap - на Buy new; за бажання можна вказати Subdomain. Натисніть Save - домен з’явиться в таблиці, а кнопкою переходу поряд із ним зручно тут же відкрити сайт і переконатися, що він відповідає.

Можна кілька доменів

Усі додані домени ведуть на той самий застосунок. Для першого запуску вистачить одного, а розширитеся пізніше.

Крок 6. Оформте вітрину

Вітрина - це те, що бачить користувач: назва, іконка, скриншоти, опис. Налаштовується на вкладці Description. Для першого запуску достатньо мінімуму:

• Title - як застосунок називається в магазині;
• Main icon - картинка іконки;
• Screenshots - пара зображень для каруселі.

Не забудьте зберегти картинки

Іконка та скриншоти спершу потрапляють у попередній перегляд і йдуть на сервер лише під час натискання Save. Завантажили зображення - одразу збережіть форму.

Тонке налаштування вітрини - категорії, кнопки, рейтинг, відгуки, блок схожих застосунків - можна залишити на потім; подробиці зібрані в розділі «Вітрина та контент».

Крок 7. Запустіть PWA

Коли домен додано й вітрину оформлено, у шапці форми натисніть Start.

Статус перемкнеться на running, а кнопка зміниться на Stop - так ви зможете вимкнути застосунок будь-якої миті. У списку розділу PWA у застосунку загориться зелений статус, і вмикати-вимикати його можна просто звідти.

Готово - перший PWA створено, і він приймає трафік за вашим доменом. Візити та встановлення почнуть з’являтися на Dashboard й у списку PWA.

Що далі

Коли застосунків стане кілька, розподілити між ними трафік допоможуть розділи Splits та Landing pages в бічному меню. А за детальним налаштуванням зовнішнього вигляду зазирніть у розділ «Вітрина та контент».