1. aspro.ru
  2. Аспро: Премьер
  3. Для веб-разработчиков
  4. Поддержка PWA

Поддержка PWA


Прогрессивное веб-приложение (PWA) — технология веб-разработки для управления сайтом через приложение на мобильных устройствах:

  • Устанавливается на смартфоны и планшеты.
  • Доставляет push-уведомления.

Для того, чтобы добавить сайт как веб-приложение, пользователь должен открыть сайт в браузере на мобильном устройстве. Затем перейти в настройки для страницы.

879e0181-7b5b-11f1-8fe4-fa163e2ff576

Затем нужно кликнуть поле «Добавить на главный экран».

774bae13-7b63-11f1-8fe4-fa163e2ff576

Затем пользователь может изменить название приложения и добавить на главный экран.

681d2133-7b5e-11f1-8fe4-fa163e2ff576

Приложение на главном экране. 

f68b7788-7b5d-11f1-8fe4-fa163e2ff576

Для реализации PWA сайт должен соответствовать требованиям:

  • Доступ по протоколу https.
  • Адаптивность.
  • Отдельный URL для каждой страницы.

Чтобы перейти в настройки приложения, в административной части сайта перейдите в Аспро (1) → Аспро: Премьер (2) → Веб-приложение (3).

bc2de155-7b62-11f1-8fe4-fa163e2ff576

  • Активируйте технологию (1);
  • По умолчанию создается файл с названием «manifest.json». Если такой файл у вас уже где-то используется, измените название в этом поле (2);
  • Название предлагается по умолчанию при добавлении на рабочий стол (3);
  • Сокращенное название — короткое удобочитаемое имя приложения. Предназначено для использования там, где недостаточно места для отображения полного имени приложения (4);
  • Укажите начальную страницу приложения, по умолчанию задана главная страница сайта. При запуске приложения будет открываться указанная страница, а не та страница, которую добавляли на рабочий стол (5);
  • Выберите режим отображения приложения (6)

    browser — приложение открывается в обычной вкладке браузера или новом окне в зависимости от браузера и платформы.
    standalone — приложение будет выглядеть и ощущаться, как отдельное приложение.
    fullscreen — используется все доступное пространство экрана.

    Для того чтобы изменился режим отображения, необходимо переустановить приложение.
  • Измените цвет фона (7) и темы (8) при необходимости. Функция актуальна только для Android;
  • По умолчанию на мобильных устройствах будет подгружаться фавиконка для обозначения приложения. Также вы можете загрузить иконку в различных размерах (9). Операционная система сама будет подбирать оптимальный размер под конкретное мобильное устройство.  

e9232f11-7b5b-11f1-8fe4-fa163e2ff576

Сохраните изменения. После сохранения настроек будет создан файл манифеста в корне сайта. Если поле «Подключать манифест для сайта» активно, то в теге <head> сайта будет прописана ссылка <link> на файл.

Предыдущая статья Кастомизация цены, кнопок «Купить» и «Наличие»
Следующая статья Аспро: ИИ-агенты