Адаптивные 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.

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

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

Falcon Space

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

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

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

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

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

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

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