Адаптивные 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://tools.crawlink.com/tools/pwa-icon-generator/

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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK