Адаптивные 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-приложений при входе в систему.

1. Нажмите на 3 вертикальные точки в PWA >> Выберите “App info”.
2. Затем нажмите “Settings ” и включите опцию “Start App when you sign in”.
3. При следующем входе в систему Windows приложение 3CX PWA будет запускаться автоматически.
4. Параметры 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://pwa-icon-generator.vercel.app/
• https://app-manifest.firebaseapp.com/

Указываем название, краткое название, загружаем картинку 512 на 512 png, режим standalone, ориентация any

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

Не обновляется иконка или название после редактирования PWA

1. Необходимо почистить кеш браузера
2. Если все равно не обновилось, то идем в консоль браузера F12 / Application вкладка Manifest и смотрим какие там картинки и описание подхватились. 
3. В крайнем случае можно попробовать перезагрузить IIS.
4. Также можно попробовать посмотреть с другого браузера (с которого еще не заходили на сайт). 
5. Проверить пути к картинкам и что указана верная ссылка на Manifest.json на странице в разделе head.