Лендінги

Landing page (або «біла» сторінка, white page) - це нейтральна сторінка-заглушка, яку PWA показує замість основного контенту, коли це потрібно. Ви готуєте таку сторінку заздалегідь, пакуєте у ZIP і завантажуєте сюди один раз, а далі підключаєте її до будь-яких своїх застосунків.

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

У таблиці - імʼя лендінгу, команда, групи доступу, хто його створив і дата створення. Нагорі - лендінги, які оновлювали останніми: змінили лендінг - запис піднявся. Згори пошук і кнопка Add, за кнопкою з лійкою - фільтри за командою, групами та перемикач Archived, поруч - налаштування колонок (див. розділ «Інтерфейс»).

Як це заощаджує час

Одну й ту саму «білу» сторінку можна повторно використовувати одразу в кількох PWA. Готуєте архів, додаєте його в цей розділ - і обираєте будь-де. Змінити сторінку в одному місці простіше, ніж перезаливати її в кожен застосунок.

Додати лендінг

Натисніть Add - відкриється сторінка New Landing page. Потрібно лише три кроки:

1. Впишіть зрозуміле імʼя (Name) - за ним ви шукатимете сторінку в списку й обиратимете її в налаштуваннях PWA.
2. Оберіть команду (Team), якій належить лендінг, і за бажання групи доступу (Groups), щоб сторінку бачили користувачі інших команд.
3. Перетягніть ZIP archive у поле ZIP archive або натисніть на нього й оберіть файл. Під полем зʼявляться імʼя та розмір архіву, кнопка з кошиком (Delete) прибирає його. Натисніть Create.

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

Що можна завантажувати

Завантажувати потрібно один ZIP archive із файлами сторінки. Окрім .php, .html, .htm, .css і .js, у нього можна класти зображення (.png, .jpg, .jpeg, .gif, .webp, .svg), шрифти (.woff, .woff2, .ttf, .eot), а також .json, .xml, .txt, .map, .mp3, .mp4 і .pdf; файли інших типів система відхилить. Максимальний розмір архіву - 20 МБ: більший архів панель не прийме ще до завантаження.

У корені архіву обовʼязково має лежати файл index.php або index.html - саме він відкривається як сторінка. Якщо запакувати файли у вкладену папку, перевірка архіву не пройде і лендінг не збережеться.

Шляхи всередині архіву

Стилі, скрипти й картинки підключайте відносними шляхами - css/style.css, img/logo.png. Так вони відкриються і в попередньому перегляді, і на «білій» сторінці PWA.

Переглянути, відредагувати, заархівувати

У кожного рядка є меню дій (значок із трьома крапками в стовпці Actions). Клік по самому рядку нічого не відкриває - лише пункти меню:

• Open - відкриває завантажену сторінку в новій вкладці. У кожного лендінгу постійна адреса, тож посилання можна зберегти й перевіряти сторінку ще до того, як підключати її до бойового PWA.
• Edit - відкриває сторінку лендінгу: змінити імʼя, команду, групи або залити новий архів замість поточного. Якщо поле архіву залишити порожнім, залишиться попередній архів. Так ви оновлюєте сторінку, не створюючи нового запису, - усі PWA, де її обрано, підхоплять свіжу версію.
• Archive - прибрати лендінг зі списку. Дія попросить підтвердження перед виконанням.

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

Якщо піти зі сторінки з незбереженими змінами, панель запитає, чи точно їх відкинути.

Архівування видаляє лендінг безповоротно

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

Над таблицею є пошук (фільтрує список за імʼям під час введення) і кнопка перезавантаження списку. Якщо нічого не знайдено, таблиця покаже No Landing pages found - отже, відповідної сторінки ще немає або запит у пошуку надто вузький.

Підключити лендінг до PWA

Сам по собі завантажений лендінг нічого не показує - його потрібно обрати в налаштуваннях застосунку. Робиться це у формі PWA, на вкладці General, у полі Landing page type.

Це поле вирішує, що саме PWA віддасть як «білу» сторінку:

• Load Landing page - показати одну з ваших завантажених сторінок. Зʼявиться поле Landing page, де ви обираєте конкретний запис із цього розділу. Кнопка зі стрілкою поруч (Open) відкриває обраний лендинг у новій вкладці - зручно перевірити сторінку до збереження PWA.
• Landing page redirect URL - замість сторінки перенаправляти на зовнішню адресу (зʼявиться поле Landing page URL для посилання).
• Off Landing page - «білу» сторінку не показувати взагалі.
• Blank page - віддавати порожню сторінку.

Короткий сценарій

1. Тут, у розділі Landing pages, натисніть Add і завантажте ZIP зі сторінкою.
2. У попередньому перегляді на телефоні або через Open перевірте, що вона відображається правильно.
3. Відкрийте потрібний PWA → вкладка General → Landing page type → Load Landing page і оберіть її в полі Landing page.

Поки сторінку не завантажено в цей розділ, обрати її в налаштуваннях PWA не вийде - тож завжди починайте звідси.

Список лендінгів доступний і скриптам - див. розділ API «Лендінги».