Установка и быстрый старт

В этой главе вы установите приложение и пройдёте мастер настройки — пять коротких шагов, после которых PWA работает на выбранной витрине. На всё уйдёт около 15–30 минут.

Перед началом

Проверьте по списку. Если какой-то пункт не выполнен, сначала исправьте его.

Что нужно	Как проверить	Если не выполнено
Webasyst с приложением «Магазин» (Shop-Script)	Магазин открывается на сайте	Приложение работает и с другими приложениями Webasyst, но дальше в руководстве примеры даны для «Магазина»
PHP 8.2 или новее	Спросите у хостинга или посмотрите версию PHP в настройках хостинга	Версия 1.6.2 не установится на PHP 7.4–8.1: смените версию PHP у хостинга или оставайтесь на старой версии приложения
Webasyst Installer 2.7.0 или новее	Установщик предложит обновиться, если версия старая	Обновите Installer через его страницу
Витрина работает по HTTPS	В адресной строке на сайте значок замка	Подключите сертификат на хостинге; без HTTPS установка и push не заработают
Вы входите в бэкенд администратором с доступом к приложению PWA	Иконка PWA есть в верхней панели Webasyst	Попросите главного администратора выдать доступ
Резервная копия базы данных и файлов	Вы сделали копию у хостинга	Сделайте её, особенно перед обновлением (глава 8)

Установка приложения

Когда это нужно. Вы ставите PWA на сайт впервые.

Где открыть. Бэкенд Webasyst → приложение Installer (в русском интерфейсе — «Установщик») → магазин приложений Webasyst Store → приложение PWA.

Что нажать.

1. Найдите приложение PWA и откройте его страницу.
2. Выберите редакцию: «База» или «Премиум» (сравнение — в главе 9).
3. Оформите покупку или установку, как предлагает Store, и дождитесь окончания установки.

Что должно получиться. В верхней панели Webasyst появилась иконка PWA.

Если не получилось.

• Установщик пишет о несовместимости — вероятнее всего, старый PHP или Installer (нужны PHP 8.2–8.5 и Installer 2.7+).

Первое открытие

Где открыть. Нажмите иконку PWA в верхней панели Webasyst.

Если PWA на витрине ещё не активно и мастер не запускался, приложение само откроет «Мастер настройки»; в остальных случаях открывается «Информация о приложении». Вы увидите страницу с заголовком «Прогрессивное веб-приложение». Слева — меню:

• Мастер настройки, Диагностика, Информация о приложении;
• Установка → «Установка», «Шаблоны для установки PWA»;
• Кеширование → «Кеширование», «Предварительное кеширование», «Обновления кеша»;
• Push-уведомления → «Push-уведомления», «Сбор разрешений»;
• Разное → «Дополнительные настройки», «Резервный ответ», «Интерфейс приложения для пользователя».

Вверху страницы — информационная плашка. В ней видно:

• PWA статус — «Активирован» или «Не активирован»;
• Применение настроек к витрине — для какой витрины вы сейчас настраиваете;
• Счетчик установок PWA — сколько раз покупатели установили приложение;
• Предварительное кеширование — «Включено» или «Отключено»;
• Подписалось на push-уведомления и Push-ключи (VAPID) — относятся к «Премиум» (глава 6).

Над плашкой находится выбор «Витрина». Выберите здесь одну витрину, для которой вы настраиваете PWA. Мастер настройки работает с одной витриной за раз и не меняет все витрины сразу.

Мастер настройки (пять шагов)

Рис. 2.1. Мастер настройки на тестовом стенде. У редакции «База» шаг 4 «Push» недоступен — рядом метка «Premium».

Мастер сохраняет каждый шаг отдельно. Можно вернуться назад, пропустить шаг или позже пройти мастер ещё раз («Повторить мастер»). Мастер ничего не удаляет и меняет только поля на своих экранах.

Где открыть. Меню слева → Мастер настройки. Убедитесь, что в выборе «Витрина» стоит нужная витрина.

Внизу каждого шага — кнопки Назад, Пропустить, Сохранить и продолжить (на шаге 4 основная кнопка называется Продолжить; на последнем шаге — Завершить, кнопки «Пропустить» там нет).

Шаг 1. Основное

Когда это нужно. Задать имя приложения, цвет и иконку и включить PWA.

Что заполнить.

1. Имя приложения — полное название магазина, например «Уютный дом».
2. Короткое имя — то, что показывается под иконкой на экране телефона, когда мало места. Чем короче, тем лучше помещается.
3. Цвет темы — цвет вида #336699. Он окрашивает рамку окна приложения на телефоне.
4. Иконка — загрузите квадратный PNG 1024×1024 пикселей (не меньше 512×512). Файл загружается сразу после выбора, но начнёт использоваться после сохранения шага. Все размеры иконок создаются автоматически.
5. Поставьте галочку «Включить PWA на этой витрине».

Что должно получиться. После «Сохранить и продолжить» шаг отмечен «готово». Если иконка не загружена, мастер предупредит: без иконки браузер не предложит установку.

Если не получилось.

• «Здесь принимаются только изображения PNG» — на этом шаге нужен именно PNG; другие форматы можно загрузить позже на странице «Информация о приложении» (глава 3).
• «Изображение меньше 512×512 px» — возьмите картинку побольше.
• «Эта витрина берёт настройки у другой витрины» — поля только для чтения. Пройдите мастер для той витрины, откуда берутся настройки.

Мастер не трогает идентичность приложения (Start URL, область видимости, app_id). Если приложение уже установлено у покупателей, это защищает их установки.

Шаг 2. Кеширование

Когда это нужно. Задать безопасные стартовые правила кеширования.

Что нажать. Нажмите «Выбрать рекомендованные стратегии» и затем «Сохранить и продолжить». Шаг можно пропустить — тогда останутся прежние настройки.

Рекомендованные значения: страницы — «Сначала сеть» (покупатель видит свежие цены и остатки), изображения — Stale-while-revalidate (картинка из кеша показывается сразу и обновляется в фоне). Подробности — в главе 5.

Что должно получиться. Появляется надпись «Рекомендованные стратегии выбраны».

Если не получилось. Если у изображений уже стоит «Только кеш», мастер предупредит, что картинки могут не загружаться совсем: выберите Stale-while-revalidate.

Мастер никогда не включает предварительное кеширование (Precache): его включают осознанно на отдельной странице (глава 5).

Шаг 3. Установка

Когда это нужно. Чтобы покупатели видели приглашение установить магазин на устройство.

Шаг состоит из трёх частей.

Рис. 2.2. Шаг 3 мастера, часть 1.

Часть 1. Подключите PWA к сайту. Для темы Shop-Script (в большинстве случаев) файлы подключаются автоматически, и вы сразу переходите к части 2. Если позже приглашение не появится, добавьте два коротких фрагмента кода в шаблон темы:

1. Откройте файл index.html вашей темы: Магазин → Витрина → Шаблоны → index.html.
2. Перед закрывающим тегом </head> вставьте код из блока «head» (кнопка «Копировать»).
3. Перед закрывающим тегом </body> вставьте код из блока «footer».
4. Сохраните шаблон. Больше ничего в нём не меняйте.

Мастер не может изменить тему за вас. Если не уверены, покажите страницу тому, кто делал ваш сайт: это работа на пару минут.

Часть 2. Способ приглашения. Отметьте один или два способа (слишком много приглашений раздражает покупателей):

Способ	Как выглядит	Появляется
Баннер	Полоса вверху каждой страницы	Сама, после части 1
Снэк-бар	Небольшое сообщение внизу экрана	Само, после части 1
Поп-ап	Окно посередине экрана	Само, после части 1
Кнопка	Кнопка «Установить приложение»	Только там, куда вы поставите её сами (например, в шапку или подвал)

Тексты, цвета и условия показа настраиваются на странице «Шаблоны для установки PWA» (кнопка «Открыть шаблоны установки»). Все способы показываются только на устройствах, которые могут установить приложение, и только если в шаге 1 включено «Включить PWA на этой витрине».

Часть 3. Проверка на телефоне. Сначала нажмите «Сохранить и продолжить», затем отсканируйте QR-код телефоном: откроется витрина и покажет выбранное приглашение. Ссылки под QR-кодом ведут на справку по установке в Chrome, на iPhone и в Edge.

Что должно получиться. На телефоне открывается ваша витрина, и появляется выбранное приглашение.

Если не получилось. Убедитесь, что в шаге 1 включено «Включить PWA на этой витрине» и что код из части 1 есть в шаблоне. Дальше — глава 10: не появляется установка.

Шаг 4. Push-уведомления (только «Премиум»)

В редакции «База» шаг помечен «Premium» и недоступен. В «Премиум» вы видите готовность push-ключей, число подписчиков и можете перейти на страницу «Push-уведомления» для тестовой отправки. Мастер сам ничего не отправляет и не запрашивает разрешений. Подробности — в главе 6.

Шаг 5. Проверка

Мастер запускает те же девять проверок, что и страница «Диагностика». Проверяются только что сохранённые настройки. Пропущенные и недоступные проверки показываются честно и не считаются пройденными. Нажмите «Завершить».

Подробный разбор результатов — в главе 7.

Как понять, что всё получилось

1. В плашке вверху страницы: PWA статус: Активирован.
2. На странице «Диагностика» (меню слева) нет красных карточек «Не пройдено»; допустимы жёлтые «Предупреждение» с понятной причиной (разбор в главе 7).
3. Откройте витрину с телефона (или Chrome на компьютере): появляется выбранное приглашение или доступна установка из меню браузера (глава 4).

Рис. 2.3. Типичный результат на тестовом стенде. Предупреждение у Service Worker объясняется тем, что в браузере администратора витрина ещё не открывалась (подробнее — в главе 7).

Переход с версии 1.3.6

Когда это нужно. У вас уже работает PWA 1.3.6 , и вы переходите на 1.6.2.

Что нужно знать перед обновлением.

• Минимальный PHP теперь 8.2. На PHP 7.4–8.1 обновление не установится. Сначала смените версию PHP у хостинга и проверьте, что сайт работает.
• Установленные у покупателей приложения не теряют идентичность: Start URL и область видимости не меняются, подписки на push и ключи VAPID сохраняются.
• Появились мастер настройки, страница «Диагностика», локальная библиотека Workbox, новые способы приглашения и шаблоны установки. Страница «Free and Premium» в настройках убрана (с 1.6.1): сравнение редакций теперь в главе 9.
• Служебные файлы витрин (Manifest, Service Worker, офлайн-страница) при обновлении создаются заново автоматически; вручную сохранять настройки обычно не нужно.

Что сделать.

1. Сделайте резервную копию базы данных и папки wa-data/public/pwa (глава 8).
2. Обновите приложение и очистите кеш Webasyst (wa-cache).
3. Откройте любую страницу сайта: служебные скрипты обновления выполнятся при первом запросе.
4. Откройте страницу «Диагностика» для каждой витрины и убедитесь, что нет красных карточек.

Что дальше

• Подробные настройки приложения →
• Как покупатель устанавливает приложение →