Лендинги

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 «Лендинги».