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

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

Задача состоит в том, чтобы реализовать возможность локальных уведомлений в приложении на 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() можно остановить фоновый режим приложения.

Блог-note: заметки разработчика

Повторить заказ на API 1С-Битрикс наполнив корзину из заказа

Задача: заполнить корзину пользователя теми же товарами и количествами которые были в ранее созданном заказе. При этом н...

Вывести множественное свойство типа файл с названием и весом файла в Битрикс

В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1С-Битрикс. С показом оригиналь...

Очистка корзины в 1С-Битрикс одним нажатием

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

Получить множественное пользовательское поле раздела. Значения множественного UF_ поля через API

Задача: У разделов инфоблока есть множественное поле типа список. Зная ID раздела, нужно получить и вывести всю информац...

Получение доступа к железу устройства из Битрикс мобильное приложение

Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функционал добавляемый BXMobileApp. ...

Минимальная сумма заказа в корзине и оформлении заказа в 1С-Битрикс

В этой заметке добавим возможность установки минимальной суммы заказа, в новом шаблоне корзины на 1С-Битрикс.

Добавить свойство в административную форму заказа

Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку формы, в виде картинки. На сайте...

Создание блога с комментариями, оценками и просмотрами на сайте с 1С-Битрикс

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

Скопировать номер телефона из поля пользователя в телефон для регистрации

Задача, на конкретном сайте: раньше все пользователи регистрировались по стандартному режиму, через логин(e-mail) и паро...