PWA - створення (вкладка General)

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

Спочатку - збереження

У нового застосунку доступна лише вкладка General. Решта вкладок (Domains, Offer links, Description, Comments, Similar, Metrics, Settings), кнопки Start / Stop та мобільний передперегляд з'являються після першого збереження. Тож перший крок завжди один - заповнити General та натиснути Create.

Живий передперегляд вітрини

Після збереження вгорі праворуч з'являється іконка 📱 (Toggle Mobile Preview). Натисніть її - поряд із формою відкриється телефон з вашою вітриною, і він оновлюється на льоту, поки ви змінюєте поля. Зручно одразу бачити, як застосунок виглядає для відвідувача (див. знімок вище та на вкладці Description).

Що задається на вкладці General

Тут лише кілька полів, але кожне відповідає за окреме рішення. Розберемо їх за змістом, а не за порядком.

Ім'я

Назва, під якою PWA живе у вашій панелі: за нею застосунок видно у списку та в передперегляді. На вітрину, яку бачить користувач, це ім'я не потрапляє - оформлення самої вітрини налаштовується згодом, на вкладці Description. Якщо ваша роль не Customer, поряд з'явиться поле Team - оберіть, за якою з них закріпити застосунок.

Шаблони - як виглядає вітрина

Вітрина налаштовується окремо для кожної платформи: iOS template відповідає за те, що побачить власник iPhone, Android template - власник Android-пристрою. Застосунок сам визначає платформу відвідувача та показує потрібний варіант, тож один PWA обслуговує обидві аудиторії.

• Для iOS доступний Native Store - вітрина у стилі App Store.
• Для Android - Native Store Green (зелене оформлення у стилі Google Play) та Web Store (синій варіант). Різниця лише в кольоровій схемі.

Як виглядає кожен шаблон, зручно перевірити в мобільному передперегляді одразу після збереження: кнопки над телефоном перемикають тему та платформу.

Групи - кому ще показати застосунок

Поле Groups кладе застосунок в одну або кілька груп доступу - так його побачать користувачі, яким ці групи відкрито, навіть з іншої команди. Підійдуть лише групи типу PWA з тієї ж команди, що й застосунок. Докладніше - у розділі «Групи доступу».

Cloudflare - через який акаунт працюють домени

Cloudflare - це акаунт, через який проксуються домени застосунку (DNS і захист). Список уже заповнено підготовленими акаунтами - вам потрібно лише обрати потрібний. Під час створення нового PWA основний акаунт підставляється автоматично, тож у більшості випадків поле можна не чіпати.

Фільтр акаунт і потік - хто побачить вітрину, а хто ні

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

Поруч - поле Stream (у TrafficArmor і FraudFilter - Campaign): правила всередині сервісу, за якими фільтр судить саме про цей застосунок. Якщо в акаунта Adspect або TrafficArmor вказано API Key, список підтягується із сервісу (почніть друкувати назву), а кнопка + створює новий потік чи кампанію, уже налаштовані під PWA, не залишаючи форму. Без API Key, а у FraudFilter завжди, ID вписується вручну. Докладніше - у розділі «Акаунти фільтрації».

Namecheap Account - з якого рахунку купувати домени

Namecheap Account - гаманець, з якого оплачуватимуться домени, куплені для цього застосунку на вкладці Domains (режим Buy new). Якщо поле порожнє, використовується основний акаунт Namecheap.

Акаунти вже підготовлено

Списки Cloudflare, Filter Account та Namecheap Account заповнено заздалегідь - зазвичай достатньо залишити підставлені за замовчуванням. Змінювати їх варто, лише якщо для конкретного PWA вам потрібні інший акаунт або інший потік.

Тип білої сторінки - що показати «зайвим»

Коли фільтр вирішує, що відвідувач небажаний, замість вітрини йому віддається біла сторінка. Поле Landing page type визначає, що саме він побачить: перенаправлення на зовнішній URL, ваш завантажений лендінг, вимкнути білу сторінку або віддати пусту сторінку. Для варіанта з URL чи завантаженим лендінгом поряд з'являється додаткове поле (адреса або вибір лендінга зі списку). Докладно про самі типи та підготовку сторінок - у розділі «Лендінги».

Зміна типу скидає значення

Якщо ви зміните тип, раніше обраний URL або лендінг очиститься - задайте його заново під новий варіант.

Збереження та перевірка

Кнопка в шапці форми має назву Create, поки застосунок новий. Після першого збереження ви потрапляєте на сторінку редагування, кнопка змінюється на Save, а поряд з'являються Start / Stop (увімкнути або вимкнути застосунок) та іконка телефона для мобільного передперегляду.

Зміни застосовуються лише після «Save»

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

Форма підкаже, де помилка

Якщо якесь поле заповнено неправильно, під час збереження форма сама перемкнеться на потрібну вкладку і підсвітить проблему. Помилка в імені, шаблонах, Cloudflare, фільтр-акаунті чи типі білої сторінки поверне вас на General - виправте підсвічене поле і збережіть ще раз.

Вкладка Settings

На вкладці Settings збереженого застосунку два блоки.

Push notifications. Перемикач Collect subscriptions дозволяє застосунку збирати підписки на сповіщення, а Ask in-app first - спочатку показувати власний екран із пропозицією увімкнути їх і лише потім викликати системний запит браузера. Це відправна точка для розсилок: доки збір вимкнено, база підписників не зростає й надсилати нема кому. Докладно про самі розсилки - у розділі «Пуш-сповіщення».

White. Перемикач Send page view to white вирішує, чи писати page_view, коли унікальний відвідувач потрапив не на вітрину, а на білу сторінку. Живий трафік таку подію пише завжди, тож перемикач впливає лише на відсіяних фільтром. Увімкніть, якщо хочете бачити в статистиці повний обсяг заходів на домен; залиште вимкненим, якщо в цифрах мають лишатися тільки ті, хто дійшов до вітрини.

Мобільний передперегляд

Іконка телефона в шапці відкриває панель передперегляду праворуч від форми. Вона показує, як застосунок виглядає на пристрої, і оновлюється на льоту в міру правок - зручно, щоб одразу оцінити обраний шаблон і оформлення. Панель доступна лише для збереженого PWA, а її стан (відкрита чи прихована) запам'ятовується між візитами.