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

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

Пример как установить приложение PWA есть на главной странице сайта https://falconspace.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).

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

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

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

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

На телефоне push уведомления принимаются в следующих вариантах:

открыта закладка сайта в браузере (браузер может быть неактивен, свернут, но содержать сайт на одной из вкладок).
установлено PWA приложение и оно запущено (может быть неактивно в данный момент).

Нюансы по работе пуш уведомлений в PWA - https://www.3cx.ru/blog/pwa-push-notifications/

Чтобы получать Push-уведомления в Chrome, у вас должно быть открыто хотя бы одно окно Chrome или приложение Chrome PWA. Если ничего не открыто, Push-уведомления работать не будут.

Чтобы всегда получать Push-уведомления, настройте автоматический запуск PWA-приложений при входе в систему.

Нажмите на 3 вертикальные точки в PWA >> Выберите “App info”.

Затем нажмите “Settings ” и включите опцию “Start App when you sign in”.

При следующем входе в систему Windows приложение 3CX PWA будет запускаться автоматически.

Параметры Chrome >> System >> Включить опцию “Continue running background apps when google Chrome is closed”.

К сожалению, даже если вы включите опцию “Continue running background apps…’, но закроете все окна браузера, включая PWA-приложение, вы не будете получать никаких уведомлений о вызовах.

Для тестирования уведомлений есть форма newnotification, через которую мы можем отправить уведомление некоторому пользователю.

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

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

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

Для генерации иконок PWA можно использовать следующий сервис - https://app-manifest.firebaseapp.com/

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

Страница-источник на сайте falconspace.ru