Адаптивные 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://tools.crawlink.com/tools/pwa-icon-generator/
Что выбрать - мобильное приложение или мобильный сайт с PWA.
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности Локализация сайта. Перевод интерфейса сайта на языки Геолокация, определение местоположения пользователя на карте Безопасность данных сайта и разграничение доступа Адаптивные PWA приложения с установкой значка на экран телефона. Отправка push уведомлений Перетаскивание элементов на странице (Drag-and-Drop) Копирование текста в буфер обмена Удаленное подключение к внешним базам данных из личного кабинета - MySQL, PostgreSQL
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы