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

Поддержка PWA


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

Поддержка PWA появилась в решении Аспро: Корпоративный сайт 3.0 с версии 1.2.7.

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

fc15d32c-7b61-11f1-8fe4-fa163e2ff576

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

a96853a8-7b5c-11f1-8fe4-fa163e2ff576

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

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

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

b2d25431-7b5c-11f1-8fe4-fa163e2ff576

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

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

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

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

Во вкладке сделайте следующее:

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

    Браузер — приложение открывается в обычной вкладке браузера или новом окне в зависимости от браузера и платформы.
    Автономное — приложение будет выглядеть и ощущаться как отдельное приложение.
    Полноэкранное — используется все доступное пространство экрана.
    Чтобы изменился режим отображения, необходимо переустановить приложение.

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

5ff28d6e-7b5d-11f1-8fe4-fa163e2ff576

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

Предыдущая статья Мобильная шапка и мобильное меню
Следующая статья Графические материалы