Push-уведомления во Flutter с Native Notify
Push-уведомления — это короткие сообщения, оповещения и информация, отправляемые сторонними приложениями, которые всплывают на телефоне, планшете или рабочем столе пользователя, подталкивая его к выполнению определенных действий. Push-уведомления помогают отправлять обновления о продуктах и услугах или создают общую осведомленность пользователей с помощью всплывающих сообщений, подталкивающих пользователей к определенным действиям. Это усиливает рекламу в бизнес-секторе.
Native Notify — это платформа push-уведомлений для отправки push-уведомлений в приложения Flutter и React Native, которые имеют:
- Отправка push-уведомлений в кроссплатформенные приложения (Android и IOS)
- Отправка массовых push-уведомлений пользователям приложения
- Отправка данных с помощью push-уведомлений
- Система отправки уведомлений в приложении подписавшимся пользователям.
В этой статье мы настроим приложение для получения уведомлений, чтобы показать, как использовать Native Notify.
Настройка уведомлений
Прежде чем создавать наше приложение, давайте настроим нашу платформу уведомлений. Перейдите к Native Notify и нажмите Начать сейчас.
Native Notify не требует данных карты для регистрации.
После регистрации нажмите «Создать приложение», чтобы начать, и выберите Flutter в качестве фреймворка.
Создание нашего приложения Flutter
Чтобы создать приложение, перейдите в предпочитаемый каталог и выполните приведенную ниже команду в своем терминале.
flutter create notify_app
cd notify_app
Откройте файл pubspec.yaml и добавьте native_notify ниже под cuperino_icons или запустите flutter pub add native_notify
.
name: notify_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
native_notify: ^0.0.13 # Add this package
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
Настройка нашего приложения Notify
Прежде чем получать push-уведомления с помощью нашего приложения, нам нужно настроить некоторые корневые файлы, чтобы предоставить нам доступ к системе push-уведомлений.
Конфигурация Android
Перейдите к файлу android/app/build.gradle
. В объекте Android обновите compileSdkVersion flutter.compileSdkVersion
до compileSdkVersion 31
. Тем не менее, под объектом android обновите minSdkVersion flutter.minSdkVersion
, расположенный в объекте defaultConfig
, до minSdkVersion 21
. После всего этого ваш объект android
должен выглядеть так, как показано ниже.
android { compileSdkVersion 31
... defaultConfig { applicationId "com.example.notify_app" minSdkVersion 21 targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName } }
Конфигурация iOS
Для настройки IOS перейдите к ios/Podfile
и обновите platform :ios
до версии 10.0 или выше.
platform :ios, '10.0'
Если платформа :ios закомментирована, раскомментируйте ее.
Повтор сеанса с открытым исходным кодом
OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая быстрее устранять неполадки. OpenReplay размещается самостоятельно для полного контроля над вашими данными.
Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.
Отображение push-уведомлений
Закончив настройку платформы, давайте настроим наш main.dart
и начнем получать уведомления. Перейдите к файлу main.dart
в папке lib и обновите функцию main()
.
import 'package:flutter/material.dart';
import 'package:native_notify/native_notify.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
NativeNotify.initialize(appId, appToken, null, null);
runApp(const MyApp());
}
Основываясь на приведенном выше блоке кода, мы импортировали пакет native_notify
в файл main.dart, а затем инициализировали его в функции main()
, заставив его запускаться при инициализации приложения. Для метода NativeNotify.initialize
требуются appId и appToken, которые указаны в руководстве NativeNotify. Не удаляйте два нулевых параметра в методе NativeNotify. AppId и appToken указаны на панели инструментов NativeNotify на их официальном сайте.
Отправка push-уведомлений
Со всей конфигурацией и настройкой приступим к отправке push-уведомлений. Сначала запустите приложение на эмуляторе или реальном устройстве, используя команду в терминале.
flutter run
Приведенная выше команда создаст приложение счетчика Flutter по умолчанию и установит его на ваше устройство. Если все конфигурации прошли успешно, вы увидите на терминале сообщение об успешном выполнении NativeNotify. После создания приложения вернитесь на официальный сайт Native Notify и щелкните символ «Отправить» на левой панели вкладок.
Теперь отправьте push-уведомление, введя заголовок и сообщение уведомления.
Отправка больших изображений
Push-уведомление прошло успешно. Теперь давайте отправим push-уведомление с большими картинками. Тем не менее, на вкладке «Отправить» нажмите «Дополнительные настройки».
Заполните заголовок, сообщение, а затем укажите URL-адрес изображения для URL-адреса большой картинки. Мы отправим данные ниже.
title --> New Anime Picture !!
message --> This is Kurosaki Ichigo
big Picture --> https://imgix.ranker.com/user_node_img/50081/1001610696/original/to-shatter-fate-photo-u1?auto=format&q=60&fit=crop&fm=pjpg&dpr=2&w=650
Объект Push Data используется при попытке отправить пользователю информацию JSON об уведомлении. Это не отображается в уведомлении, но помогает перенаправить на вопрос страницы вопроса при нажатии на уведомление.
Заключение
Push-уведомления — это очень интересный и великолепный способ рассылки кратких сведений и информации о разработке мобильных приложений. В этом руководстве мы смогли настроить нашу систему push-уведомлений, интегрировать ее в наше приложение и протестировать ее. Поздравляем!!
Ресурсы
Вот ссылка на исходники на Github