Быстрый старт

За несколько минут соберём ваше первое 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 в боковом меню. А за детальной настройкой внешнего вида загляните в раздел «Витрина и контент».