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