Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Создание локальных уведомлений для приложения на Apache Cordova

Просмотров: 244

Задача состоит в том, чтобы реализовать возможность локальных уведомлений в приложении на Apache Cordova без использования push-серверов и других внешних подключений.

Локальные уведомления в приложении на Apache Cordova

На зарубежных сайтах я встречал несколько инструкций, но они все были устаревшими и описанные в них действия несовместимы с новыми версиями Android и iOS. Пришлось искать новые варианты и изучать новый плагин Local Notifications.

Ставим плагин локальных уведомлений

Для начала работы необходимо войти в свой проект Cordova и установить плагин local-notification. Обратите внимание, что в конце команды установки плагина нужно указать версию, 12. Это не опечатка.

cordova plugin add cordova-plugin-local-notification-12

Для настройки плагина local-notification в приложении Apache Cordova необходимо добавить следующий код в файл config.xml:


    <plugin name="cordova-plugin-local-notification-12" spec="0.1.4">
        <variable name="APP_THEME" value="YOUR_APP_THEME" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
        <variable name="ANDROIDX_CORE_VERSION" value="1.+" />
        <variable name="ANDROIDX_APPCOMPAT_VERSION" value="1.+" />
        <variable name="IOS_DEPLOYMENT_TARGET" value="10.0" />
        <variable name="NSUSERNOTIFICATION_TYPE" value="alert, badge, sound" />
    </plugin>
     <platform name="android">
        <preference name="AndroidXEnabled" value="true" />
        <preference name="android-targetSdkVersion" value="31"/>
        <preference name="android-minSdkVersion" value="29"/>
    </platform>
    <platform name="ios">
        <feature name="LocalNotification">
            <param name="ios-package" value="UILocalNotification" />
        </feature>
    </platform>

Обратите внимание, что в атрибуте name у плагина указывается верное название, а не "cordova-plugin-local-notification-12". Также, следует заменить значение переменной APP_THEME на тему вашего приложения. В зависимости от версий Android и iOS, можно изменять значения атрибутов ANDROID_SUPPORT_V4_VERSION, ANDROIDX_CORE_VERSION, ANDROIDX_APPCOMPAT_VERSION и IOS_DEPLOYMENT_TARGET.

Теперь вы можете использовать методы и запросы, доступные в плагине локальных уведомлений, чтобы создавать и управлять уведомлениями в своем приложении Apache Cordova.

Используем плагин локальных уведомлений

В моем случае плагин локальных уведомлений используется на веб-сайте, который открывается внутри приложения Apache Cordova. Это значит, что вы можете использовать плагин, чтобы отправлять локальные уведомления на устройство пользователя, когда ваше приложение работает в фоновом режиме и поступает новый заказ.

Для этого вам нужно будет использовать методы плагина для создания и настройки уведомлений. Вы также можете настроить действия, которые пользователь может выполнить в ответ на уведомление, используя метод cordova.plugins.notification.local.addAction.

Чтобы отправлять уведомления, когда ваше приложение работает в фоновом режиме, вам нужно будет использовать механизмы работы в фоновом режиме в Apache Cordova. Вы можете использовать плагин Background Mode для этого, который позволяет вашему приложению продолжать работать в фоновом режиме, даже когда пользователь переключается на другое приложение или экран блокировки.

Наконец, важно убедиться, что ваше приложение имеет соответствующие разрешения для отправки уведомлений на устройство пользователя. Вы можете запросить эти разрешения с помощью плагина Permissions.

// Ждем, пока устройство будет готово к работе с Cordova
document.addEventListener("deviceready", function () {

    // Проверяем, есть ли уже разрешение на отправку уведомлений
    cordova.plugins.notification.local.hasPermission(function (granted) {
        if (granted) {
            // Если разрешение уже получено ранее, 
            // можно выполнять нужную логику
            // (например, показывать сохраненные уведомления)
            console.log('Разрешение на уведомления уже получено');
        } else {
            // Если разрешения еще нет, запрашиваем его у пользователя
            cordova.plugins.notification.local.requestPermission(function (granted) {
                if (granted) {
                    // Если пользователь дал согласие на уведомления, 
                    // выполняем нужную логику
                    console.log('Разрешение на уведомления получено');
                } else {
                    // Если пользователь не дал согласие на уведомления,
                    // выводим сообщение и не выполняем дополнительную логику
                    console.log('Разрешение на уведомления не получено');
                    alert('Вы не дали согласие на получение уведомлений');
                }
            });
        }
    });

}, false);

Этот код проверяет, есть ли разрешение на отправку уведомлений на устройстве, и если его нет, запрашивает у пользователя. Если пользователь дает согласие, то выполняется нужная логика, а если не дает, то выводится сообщение об ошибке.

Отправляем уведомление пользователю

Ниже приведен пример скрипта, который отправляет пользователю уведомление, похожее на push, когда в приложении создается новый заказ.

cordova.plugins.notification.local.schedule({
    title: 'Новый заказ',
    text: 'У вас есть новый заказ. Пожалуйста, проверьте приложение.',
    foreground: true,
    vibrate: true,
    sound: null
});

В этом примере используется метод cordova.plugins.notification.local.schedule() для создания уведомления. Он принимает объект с параметрами, такими как title, text, foreground, vibrate и sound. Значение foreground установлено на true, чтобы уведомление отображалось внутри приложения, а не на экране блокировки. Если вы хотите, чтобы уведомление воспроизводило звук, вы можете указать путь к файлу звука в параметре sound. В данном случае звук не используется.

Вы можете использовать этот пример как отправку уведомлений при создании новых заказов, так и для других событий в вашем приложении.


Михаил Базаров 23.02.2023
Для разработки мобильных приложений на платформе Cordova можно использовать плагин cordova-plugin-background-mode, который позволяет приложению работать в фоновом режиме.

Этот плагин позволяет отслеживать, когда приложение находится в фоновом режиме, и запустить специальную задачу, которая будет выполняться в фоне. Таким образом, приложение может продолжать работать даже после того, как пользователь свернул его или переключился на другое приложение.

Кроме того, этот плагин позволяет настроить различные параметры фоновой работы приложения, такие как уведомления, звуковые сигналы и т.д.

Для установки плагина необходимо выполнить следующую команду:
Код
cordova plugin add cordova-plugin-background-mode


Код
// Запуск фонового режима приложения
cordova.plugins.backgroundMode.enable();

// Установка заголовка уведомления
cordova.plugins.backgroundMode.configure({
    title: 'Мое приложение',
    text: 'Работаю в фоновом режиме',
    icon: 'icon', // Название иконки приложения
    color: '#00796b' // Цвет уведомления
});

// Отслеживание событий фоновой работы
cordova.plugins.backgroundMode.on('activate', function() {
    // Выполнение задачи в фоновом режиме
});

cordova.plugins.backgroundMode.on('deactivate', function() {
    // Остановка задачи в фоновом режиме
});

// Остановка фонового режима приложения
cordova.plugins.backgroundMode.disable();


В данном примере показано, как можно запустить и настроить фоновый режим приложения с помощью методов cordova.plugins.backgroundMode.enable() и cordova.plugins.backgroundMode.configure().

Также приведены примеры обработки событий фоновой работы приложения с помощью методов cordova.plugins.backgroundMode.on('activate') и cordova.plugins.backgroundMode.on('deactivate').

Наконец, с помощью метода cordova.plugins.backgroundMode.disable() можно остановить фоновый режим приложения.

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Запретить указание количества товаров, добавляемого в корзину, в опре... Просмотров: 104 Задача состоит в том, чтобы запретить указание количества товара, добавляемого в корзину, ... Бонус за выполненный заказ на внутренний счет пользователя Просмотров: 5116 Задача: после того как заказ, в интернет-магазине, перешел в статус "Выполнен" начислить п... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 2284 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Ссылка и название раздела в списке новостей Битрикс Просмотров: 11521 Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новос... Как вывести картинки к разделам на базе _ext меню Просмотров: 7669 Просто для эстетической красоты, нужно вывести в меню разделов сайта картинки или иконки. ... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 18216 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит... Кастомизация компонента восстановления пароля bitrix:system.auth.forg... Просмотров: 26889 Достаточно часто спрашивают как кастомизировать компонент восстановления пароля пользовате... Обновление цен и остатков из текстового файла, в каталоге 1C-Битрикс. Просмотров: 167 Задача: прочитать txt-файл с ценами и остатками, который выгружает программа учета по FTP,... Вывести производителей на сайте с отбором его товаров из каталога Просмотров: 19710 Достаточно частая задачка для каталога или интернет-магазина: вывести список производителе... Мобильные версии страниц и поисковые системы Просмотров: 6297 Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеетс... INPUT type="file" Предпросмотр превью картинки до загрузки Просмотров: 13013 Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", ка... Ajax форма обратной связи, реализация в битрикс Просмотров: 8729 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Список новостей с автопрокруткой через overflow:scroll Просмотров: 6152 Простенький javascript позволит сделать автопрокрутку в шаблоне списка новостей. Достаточн... Отключить поиск по описаниям товаров в Битрикс Просмотров: 11948 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 12817 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Заполнить поля пользователя из свойства заказа, на примере ФИО Просмотров: 2045 При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в п... Картинка торгового предложения вместо иконки цвета, в выборе SKU Просмотров: 737 Задача: вместо не информативных иконок цветов нужно вывести детальную картинку торгового п... Скопировать номер телефона из поля пользователя в телефон для регистр... Просмотров: 2929 Задача, на конкретном сайте: раньше все пользователи регистрировались по стандартному режи... Сортировка элементов по индексу сортировки значений типа список Просмотров: 11661 Внутри любого компонента есть заранее заложенные поля для сортировки элементов. МОжно сорт... Создание раздела инфоблока при регистрации пользователя в Битрикс Просмотров: 8754 Например вам нужно выводить информацию исключительно для определенного пользователя. Само ...