Адаптивные PWA приложения с установкой значка на экран телефона

PWA - это прогрессивные веб-приложения (технология от Google), которые позволяют устанавливать сайт как мобильное приложение на телефон или планшет на различные платформы, а также дает доступ к другим функциям - геолокация, оффлайн работа, push уведомления и другое.

Пример как установить приложение PWA есть на главной странице сайта https://falcon.web-automation.ru

Как настроить PWA для своего проекта

Необходимо указать описательные данные в файле manifest.json (находится в корне проекта), а также добавить свои лого в uploads в разных форматах (ссылки указать в том же файле manifest.json). 

Для подключения скриптов PWA необходимо в GetLayoutInfo в SELECT 1 поставить 1 EnablePWA

Как работать в оффлайн режиме

Работа в оффлайн режиме пока не предусмотрена приложением. 

Как сделать кнопку установки приложения

Используйте класс as-pwa-install

Пример:

<a href="#" class="as-pwa-install btn btn-primary"><i class="fa fa-mobile-alt"></i> Установить PWA</a>

Как реализовать PUSH уведомления 

Для этого должны быть установлены в GetLayoutInfo следующие настройки: 

• 1 enablePWA,
• 1 enablePWANotifications,

При загрузке если enablePWANotifications = 1 происходит запрос показа уведомлений у пользователя (as.notification.askForPWANotificationPermission).

Вручную вызвать уведомление в коде можно через данную функцию:  as.notification.showPWANotification(title, text, notificationID);

Также push уведомление можно вызвать через Внешнее действие.

Встроенные уведомления Falcon Space также работают через PUSH уведомления в случае если они доступны (если не установлен флажок Отключить мгновенные уведомления).

Обработка закрытия уведомлений происходит в pwabuilder-sw.js в self.onnotificationclose, который вызывает метод обработки уведомлений (пользователь прочитал сообщение) - /controls/notifications/processnotifications

Примечание: push уведомления принимаются только при открытой закладке сайта в браузере (браузер может быть неактивен, свернут, но содержать сайт на одной из вкладок).

Как сменить иконку и название приложения PWA

Для этого необходимо отредактировать файл /manifest.json (в корне проекта) - указать название приложения, а также указать пути к форматам иконки (иконки можно разместить в /uploads/icon). 

Создаются иконки под все указанные в manifest.json размеры в формате PNG.

Что выбрать - мобильное приложение или мобильный сайт с PWA.