🔔 Local Notifications 사용해 보기

Firebase FCM(Firebase Cloud Message) 사용해 보기

flutter_local_notifications | Flutter Package
awesome_notifications | Flutter Package
permission_handler | Flutter Package

---

2022.10 작성한 flutter_local_notification 패키지 관련

flutter_local_notifications(Setting)
flutter_local_notifications(사용 방법)
flutter_local_notifications(Listener)

---

이번 글에서는 앱 개발에 있어서 필수 기능으로 개발이 되어야 하는 Local Notifications에 대해서 다뤄보도록 하겠다.

이전에도 Local Notification에 대해서 작성한 글이 있긴 하지만, 일부 내용이 누락되기도 했고, 좀 더 다양한 기능은 다루지 않는 듯 하여 새롭게 작성하게 되었다.

원래 글 작성 하면서, awesome_notifications 패키지와 비교 하면서 차이점과 사용 방법을 자세히 다뤄보려고 했는데, awesome_notifications 패키지와 flutter_local_notifications 패키지를 모두 사용하려고 하니, 충돌이 발생해서 Local Notification 패키지 중 인기가 좋은 flutter_local_notifications에 대해서만 자세히 다뤄보았다.

awesome_notifications에 대한 내용도 추후 시간될 때에 다뤄볼 예정이다.

Push Type

앱에서 사용하는 알림 종류는 크게 Remote, Local 이렇게 2가지 정도가 있다.

각각의 차이점은 무엇일까 ?

대표적인 차이점이라면 발송 주체가 다르다라는 점이 있고, 또 하나는 명칭에서도 알 수 있듯이 발송을 보내는 방식에도 차이가 있다는 것을 알 수 있다.

사용 방법이나 설정 방법은 크게 차이가 없다.

Remote Notifications

Remote Push란 ?

먼저 Remote Push 라고 불리는 타입에 대해서 간단하게 살펴보자.

일반적으로 앱에서 푸시를 보낸다고 하면, Remote Push를 사용해서 보내게 된다.

Remote Push를 구축하기 위해서는 각 서비스의 맞는 시스템을 구축해야 하는데, 직접 구축할 수도 있고, Firebase Messaging 기능을 사용해서 구축할 수 있다.
Firebase Messaging는 일반적으로 FCM(Firebase Cloud Messaging)이라고 불리며, 직접 구축하는 방식보다 개발 리소스가 적으며, 전송률에서도 차이가 많이 발생하여 가장 인기가 좋은 방식이다.

Remote Push는 서버에서 각 디바이스의 Token을 사용해 Google GCM, Apple APNs 서버에 요청을 보내 각 플랫폼에서 디바이스로 푸시를 전송하게 된다.

Remote Push, FCM, Firebase Messaging 등에 대해서 자세히 살펴보고 싶다면, 이전에 작성한 글을 참고하시길 바란다.

Local Notifications

그 다음으로 이번 글에서 다루게 될 내용인 Local Notification이다.

Local Push 또는 내부 푸시라고 불리는 종류인데, Local Push는 Remote Push와는 다르게 서버에서 전송을 요청하지 않고 디바이스에서 전송을 요청하기에 서버를 따로 구축할 필요가 없다. 이 부분이 장점일 수도 있고 단점일 수도 있는데, 서버를 통해 전송되지 않기 때문에 전송률은 거의 100%라고 봐도 된다.
다만, 앱에서 이벤트가 발생하여 푸시를 전송해야 하기에, Remote Push 보다는 커스텀한 내용을 전송하기는 한계가 있다.

Local Push는 스케쥴링이 가능하여, 매일, 매주, 매월, 특정 기간 등에 따라 전송을 예약할 수 있으며, 주로 알림 관련 앱들이 Local Push를 사용해 알림을 보내주고 있다.

또한 Remote Push로 전송된 알림이 디바이스의 상태가 Foreground라면, 알림을 보내지 않게 되는 문제가 있는데, 이러한 부분에서도 Remote Push에 정보를 담은 payload를 얻어 Local Push로 전송을 요청하면 Foreground에서도 알림을 보낼 수 있다는 장점이 있다.

대부분의 서비스는 꼭 하나의 Notification 타입을 구축하는 것이 아닌, Remote, Local 두 시스템을 다 구축해서 적절히 사용한다고 보면 된다.

예를 들어, 우리가 SNS 앱을 사용한다고 가정해보자. 사용자에게 매일 오전 9시에 알림을 전송하고 싶다면, 이럴 때 Local Notifications의 스케쥴링을 사용해서 매일 오전 9시에 알림을 보내주면 된다. 굳이 서버에서 알림을 전송할 필요가 없다. 하지만, 사용자에게 다른 사용자가 팔로우 했다는 알림을 보내고 싶다면, 당연히 서버에서 알림을 전송해야 하기에, Remote Push를 사용해야 한다.

Permission

이제 본격적인 사용 방법에 앞서 모든 알림 종류를 사용할 때에 공통적으로 설정이 되는 부분이 있는데, 바로 권한을 요청 받는 문제이다.

Permission은 앱에서 필수적으로 이해하고 개발해야 하는 부분으로, 권한이 없는 사용자는 해당 기능을 사용할 수 없기에, 적절한 시점에 권한 요청은 필수적이다.

여기서는 Notifications와 관련된 권한을 요청 받을 수 있도록 먼저 설정을 진행해 보자.

Permission 요청을 하고 싶을 때는, 보통 각 패키지에서도 권한을 요청 받을 수 있지만, 앱에서 알림에 대한 권한만을 사용하는 것은 아니기에, 한 번에 Permission 관리를 할 수 있는 패키지를 사용할 것이다.

참고로 Permission 관련된 내용은 시뮬레이터와 실제 디바이스, 설정된 Flutter 파일 및 디바이스 버전에 따라 일부 내용이 조금씩 다를 수 있으니, 구글링이 필요할 수도 있고, 해결이 안되시는 부분은 댓글 남겨 놓으시면 최대한 도움 드리도록 하겠다.

dependencies

permission_handler 패키지를 추가해 주도록 하자.

dependencies:
	permission_handler: ^11.1.0

알림 허용을 위해서 앱이 가장 최상단 위젯에서 알림에 대한 권한을 요청하도록 해보자.

권한을 요청했는데, 아무 반응이 없거나 앱에 크래시가 발생했을 것이다. 플랫폼에 맞게 권한을 요청하기 위해 추가적으로 설정을 해주지 않아서 그런 것이다.

@override
void initState() {
	super.initState();
    _permissionWithNotification();
}
  
void _permissionWithNotification() async {
	await [Permission.notification].request();
}

IOS

먼저 IOS 설정을 추가해 주도록 하자. Podfile에 코드를 추가해 주면되는데, 필요에 따라 Info.plist 파일도 수정해야 할 수도 있다.

ios > Podfile

Podfile 하단 부분에 아래 코드를 추가해 주면 된다. 여기서 주석 처리된 부분이 있는데, 'PERMISSION_NOTIFICATIONS=1' 해당 부분에만 주석이 되어 있지 않다.

IOS는 이렇게 사용할 퍼미션의 주석을 제거하여 사용하면 되는데, 여기서는 Notifications에 대한 권한만 사용할 것이기에 아래 코드만 주석을 해제해 주었다.

    target.build_configurations.each do |config|

    config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
  
      ## dart: PermissionGroup.calendar
      # 'PERMISSION_EVENTS=1',
  
      ## dart: PermissionGroup.reminders
      # 'PERMISSION_REMINDERS=1',
  
      ## dart: PermissionGroup.contacts
      # 'PERMISSION_CONTACTS=1',
  
      ## dart: PermissionGroup.camera
      # 'PERMISSION_CAMERA=1',
  
      ## dart: PermissionGroup.microphone
      # 'PERMISSION_MICROPHONE=1',
  
      ## dart: PermissionGroup.speech
      # 'PERMISSION_SPEECH_RECOGNIZER=1',
  
      # dart: PermissionGroup.photos
      # 'PERMISSION_PHOTOS=1',
  
      ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
      # 'PERMISSION_LOCATION=1',
  
      ## dart: PermissionGroup.notification
        'PERMISSION_NOTIFICATIONS=1',
  
      ## dart: PermissionGroup.mediaLibrary
      # 'PERMISSION_MEDIA_LIBRARY=1',
  
      ## dart: PermissionGroup.sensors
      # 'PERMISSION_SENSORS=1',   
  
      ## dart: PermissionGroup.bluetooth
      # 'PERMISSION_BLUETOOTH=1',
  
      ## dart: PermissionGroup.appTrackingTransparency
      'PERMISSION_APP_TRACKING_TRANSPARENCY=1',
  
      ## dart: PermissionGroup.criticalAlerts
      # 'PERMISSION_CRITICAL_ALERTS=1'
    ]  
    end

위의 코드가 들어가야 하는 부분의 전체 코드인데, post_install 코드는 각각의 설정에 따라 크게 다를 수 있어서 참고만 해주시면 된다.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|

    config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
  
      ## dart: PermissionGroup.calendar
      # 'PERMISSION_EVENTS=1',
  
      ## dart: PermissionGroup.reminders
      # 'PERMISSION_REMINDERS=1',
  
      ## dart: PermissionGroup.contacts
      # 'PERMISSION_CONTACTS=1',
  
      ## dart: PermissionGroup.camera
      # 'PERMISSION_CAMERA=1',
  
      ## dart: PermissionGroup.microphone
      # 'PERMISSION_MICROPHONE=1',
  
      ## dart: PermissionGroup.speech
      # 'PERMISSION_SPEECH_RECOGNIZER=1',
  
      # dart: PermissionGroup.photos
      # 'PERMISSION_PHOTOS=1',
  
      ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
      # 'PERMISSION_LOCATION=1',
  
      ## dart: PermissionGroup.notification
        'PERMISSION_NOTIFICATIONS=1',
  
      ## dart: PermissionGroup.mediaLibrary
      # 'PERMISSION_MEDIA_LIBRARY=1',
  
      ## dart: PermissionGroup.sensors
      # 'PERMISSION_SENSORS=1',   
  
      ## dart: PermissionGroup.bluetooth
      # 'PERMISSION_BLUETOOTH=1',
  
      ## dart: PermissionGroup.appTrackingTransparency
      'PERMISSION_APP_TRACKING_TRANSPARENCY=1',
  
      ## dart: PermissionGroup.criticalAlerts
      # 'PERMISSION_CRITICAL_ALERTS=1'
    ]  
    end
  end
end

아래 이미지 참고하시면 된다.

이제 다시 실행해서 권한을 요청 받는지 확인해 보자. 정상적으로 요청을 한다.

Podfile

Android

이번엔 Android 설정도 추가해주자.

Android API 33레벨을 기준으로 알림 권한에 대한 내용의 변화가 있다.

33레벨 이전인 경우 알림을 따로 요청받을 필요 없이, 알림 권한이 모두 허용 상태였는데, 33레벨 이상부터 권한을 따로 요청하는 방식으로 변경이 되었다.

Remote Notifications 만 사용하는 경우에는 추가적인 설정이 필요 없지만, Local Notifications를 사용하기 위해서는 여러 권한들을 등록해야 사용할 수 있다. 해당 권한은 아래에서 다루기로 하겠다.

Android는 따로 설정 없이도, 요청이 가능하다.

Status

이제 권한을 요청하는 방법에 대해서 살펴봤는데, IOS와 Android의 각 권한 상태가 일부 다르고, 권한을 한 번 요청한 상태에서는 추가적인 권한 요청시 에러가 발생할 수 있어 적절하게 권한 요청을 관리해 주어야 한다.

아래는 제가 주로 사용하는 방식의 코드로, 권한 상태 두 개를 사용해서 적절하게 요청 시점을 관리하고 있다.

Permission의 전체적인 권한 상태에 대해서는 내용이 너무 많고 복잡해서 시간이 되면 다른 글에서 더 자세히 다루겠다.

Permission 요청시 사용한 코드를 수정해 주자.

이렇게 하면 IOS인 경우 권한을 요청 받지 않는 상태라면 권한을 요청하고, 거부 또는 허용된 상태에서는 요청하지 않는다.

Android의 경우에는 33레벨 이전에서는 권한을 묻지 않고, 33레벨 이상 부터는 권한이 없는 경우 또는 거부된 상태인 경우 최대 2번까지 요청을 하게될 것이다.

아래 코드는 실제 운영 앱에서는 여러 케이스들이 추가되어 관리되고 있으므로, 참고만 하시길 바란다.

  void _permissionWithNotification() async {
    if (await Permission.notification.isDenied &&
        !await Permission.notification.isPermanentlyDenied) {
      await [Permission.notification].request();
    }
  }

Local Notifications

Permission 권한도 정상적으로 진행 했으니, 본격적으로 flutter_local_notifications 패키지를 사용한 로컬 푸시에 대해서 살펴보도록 하자.

dependencies

dependencies:
	flutter_local_notifications: ^16.3.0

initialization

먼저 패키지 사용시 초기화를 먼저 진행해야 한다.

final FlutterLocalNotificationsPlugin _local = FlutterLocalNotificationsPlugin();

Android, IOS 각각의 초기화 설정을 진행해야 한다.

Android 초기화 설정은 아이콘만 설정해 주면되는데, 앱 아이콘을 사용하면 되기에 아래에 ic_launcher로 등록된 아이콘을 사용하도록 해주었다.

IOS는 초기화시 권한을 요청할 것이냐는 옵션인데, permission_handler를 사용해 요청을 별도로 해줄 것이기에, 모두 false로 해주었다.

void _initialization() async {
    AndroidInitializationSettings android =
        const AndroidInitializationSettings("@mipmap/ic_launcher");
    DarwinInitializationSettings ios = const DarwinInitializationSettings(
      requestSoundPermission: false,
      requestBadgePermission: false,
      requestAlertPermission: false,
    );
    InitializationSettings settings =
        InitializationSettings(android: android, iOS: ios);
    await _local.initialize(settings);
  }

앱의 최상단 위젯의 initState에서 초기화를 진행해 주자.

@override
void initState() {
	super.initState();
    _permissionWithNotification();
    _initialization();
}

Test

이제 테스트 전송을 한 번 해보자.

가장 기본적인 전송 방법이다. 해당 show() 기능을 사용하면 즉시 푸시가 전송되게 된다. 아래 코드를 사용해서 버튼을 만들어 준 뒤 버튼을 클릭해보자.

아무런 반응이 없다. 왜 그럴까 ?

Foreground 환경에 대한 추가적인 설정을 해주지 않아서 앱 실행 중 환경에서는 푸시가 전송되지 않는 것이다.

NotificationDetails details = const NotificationDetails(
	iOS: DarwinNotificationDetails(
		presentAlert: true,
		presentBadge: true,
		presentSound: true,
	),
	android: AndroidNotificationDetails(
    	"1",
        "test",
		importance: Importance.max,
		priority: Priority.high,
	),
);

await _local.show(1, "title", "body", details);

Heads Up Notifications

앱 실행 중 환경인 Foreground 환경에서 푸시 알림을 노출 시키는 기능을 heads up notifications라고 한다. 해당 기능이 정상적으로 진행이 되려면 각 플랫폼 별로 설정을 추가해야 한다.

Android

android > app > src > main > AndroidManifest.xml

application 태그 상단에 Permission을 활성화하는 코드를 추가해 주자.

• android.permission.RECEIVE_BOOT_COMPLETED : 재부팅시 앱 실행
• android.permission.VIBRATE : 진동 사용
• android.permission.WAKE_LOCK : 화면 켜짐 유지
• android.permission.USE_FULL_SCREEN_INTENT : 전체 화면 인텐트 사용
• android.permission.SCHEDULE_EXACT_ALARM : 정확한 알림

    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM"
        android:maxSdkVersion="32" />
    <uses-permission android:name="android.permission.USE_EXACT_ALARM" />

activity 태그 아래에 receiver 사용에 대한 코드를 추가해 주자.

• 푸시 알림을 화면에 출력

<receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />

• 디바이스 재부팅시 알림 스케쥴 유지

<receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver" >
	<intent-filter>
		<action android:name="android.intent.action.BOOT_COMPLETED"/>
		<action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
		<action android:name="android.intent.action.QUICKBOOT_POWERON" />
		<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
	</intent-filter>
</receiver>

전체 코드이다.

<receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
<receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver" >
	<intent-filter>
		<action android:name="android.intent.action.BOOT_COMPLETED"/>
		<action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
		<action android:name="android.intent.action.QUICKBOOT_POWERON" />
		<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
	</intent-filter>
</receiver>

activity 태그 안에도 코드를 추가해 주자.

• 디바이스 잠금시 알림 보여주기

<activity
	...
	android:showWhenLocked="true"
	android:turnScreenOn="true">
</activity>

아래는 위에서 설정한 전체 AndroidManifest 코드이다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- local_notifications -->
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM"
        android:maxSdkVersion="32" />
    <uses-permission android:name="android.permission.USE_EXACT_ALARM" />
    <!-- local_notifictaions -->

    <application
        android:label="flutter_local_notifications_sample"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            android:showWhenLocked="true"
            android:turnScreenOn="true">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
        <receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver" >
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
                <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
                <action android:name="android.intent.action.QUICKBOOT_POWERON" />
                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
            </intent-filter>
        </receiver>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

AndroidManifest.xml

IOS

IOS 설정을 추가해 주자.

IOS 설정을 위해 XCode를 열어주도록 하자. ios 폴더의 우측 버튼을 클릭하여 "Open in Xcode"를 눌러주면 프로젝트의 ios 수준의 XCode를 사용할 수 있다.

Runner > AppDelegate.swift

아래 코드를 추가해 주도록 하자.

• Foreground 상태에서 알림 노출

if #available(iOS 10.0, *) {
	UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

AppDelegate 전체 코드이다.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      
    if #available(iOS 10.0, *) {
        UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }
      
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

다시 테스트를 진행해 보자. 이제 Foreground 환경에서도 푸시가 정상적으로 노출이 되고 있다.

이제 flutter_local_notifications 패키지에는 어떤 기능들이 있는지 하나씩 살펴보도록 하자.

show

가장 기본적인 사용 방법이 푸시를 즉시 전송하여 노출될 수 있도록 해주는 기능이다. 해당 기능을 사용하면 Remote Push가 수신 되었을 때에, Foreground 환경에서 알림을 보여줄 수 있게 된다.

NotificationDetails details = const NotificationDetails(
      iOS: DarwinNotificationDetails(
        presentAlert: true,
        presentBadge: true,
        presentSound: true,
      ),
      android: AndroidNotificationDetails(
        "show_test",
        "show_test",
        importance: Importance.max,
        priority: Priority.high,
      ),
    );
    await _local.show(
      0,
      "타이틀이 보여지는 영역입니다.",
      "컨텐츠 내용이 보여지는 영역입니다.\ntest show()",
      details,
      payload: "tyger://",
    );

id : Unique Id, 중복되지 않아야 함. 알림 그룹별로 id 값을 지정하여 사용함.

title : 제목 영역이 보여지는 부분에 노출되는 영역.

body : 제목 아래 본문 내용에 노출되는 영역.

payload : 알림을 터치하여 앱에 진입 했을 때에, 수신 가능한 부분으로, 주로 네임드 라우터에 사용하는 path를 사용함.

notificationDetails

플랫폼 (android, ios, macOS, linux) 별로 로컬 푸시의 세부 설정을 할 수 있는 부분이다.

- android

channelId : 고유한 id 값을 사용.
channelName : 앱 설정 > 알림에 보여지는 네임.
channelDescription : 해당 채널에 대한 설명.
importance, priority : 중요도를 설정하는 부분으로 아래와 같이 중요도를 높혀서 전송을 해야지만 Foreground에서 노출이 가능함.

AndroidNotificationDetails(
	"show_test",
	"show_test",
	channelDescription: "Test Local notications",
	importance: Importance.max,
	priority: Priority.high,
),

- ios

presentAlert, presentBadge, presentSound : 얼럿, 배지, 사운드 활성화.
badgeNumber : 배지 카운트를 넣어주는 부분으로, 앱 아이콘 배지 넘버이다.

ios는 앱 아이콘 배지 넘버를 직접 지정해 주지 않으면 카운트를 시스템에서 처리해주지 않기 때문에, 지정하지 않으면 카운트는 표시되지 않습니다.

DarwinNotificationDetails(
	presentAlert: true,
	presentBadge: true,
	presentSound: true,
	badgeNumber: 1,
),

periodicallyShow

이번엔 간단하게 특정 주기를 반복해서 로컬 푸시를 반복적으로 보낼 수 있는 기능에 대해서 살펴보도록 하겠다.

periodicallyShow()는 간단하게 푸시를 반복적으로 생성하여 스케쥴링을 할 수 있지만, 미리 지정된 4개의 타입으로만 설정할 수 있으며, 시간대 또한 설정할 수 없다는 단점이 있어서 자주 사용되는 기능은 아닐 것 같다.

알림 앱이라면 매 분마다 반복적인 알림을 쉽게 설정할 수 있다는 부분은 장점인 듯 하다.

await _local.periodicallyShow(
	type.id,
	title,
	body,
	RepeatInterval.everyMinute,
	details,
	payload: type.deeplink,
);

RepeatInterval 타입은 총 4가지로 나뉘며 각각 1분 주기, 1시간 주기, 하루 주기, 한 주 주기를 반복적으로 보낼 수 있도록 설정하는 부분이다.

RepeatInterval.everyMinute
RepeatInterval.hourly
RepeatInterval.daily
RepeatInterval.weekly

옵셔널 파라미터로 androidScheduleMode가 있는데, 해당 부분은 안드로이드 플랫폼 전용으로 사용하는 기능이지만, 해당 파라미터는 릴리즈 버전에서 제거될 예정이라 하여 따로 살펴보진 않을 것이다.
마찬가지로, 최신 flutter_local_notifications에서는 androidAllowWhileIdle 옵션도 더 이상 사용되지 않으므로 사용하지 않도록 하겠다.

periodicallyShow에 대해서 살펴봤지만, 매분, 매시간 등 정해 놓은 규칙에 의한 전송은 쉽게 구현이 가능하지만, 5분 마다, 2시간 마다... 이런 기능들은 구현할 수 없다.

이러한 기능들을 사용하고자 한다면 아래에서 살펴볼 Timezone을 활용한 시간대를 직접 생성해서 구현해야 한다.

Timezone

특정 시점에 전송 하거나, 스케쥴을 설정하여 매일, 매주, 매월 등 일정 기간에 따라 전송할 수 있는 기능을 사용하려면 Timezone을 설정 하여야 한다.

Timezone은 Flutter에 기본적으로 내장되어 있는 내장 객체로 추가적으로 종속성은 추가하지 않아도 된다.

initialization

import 'package:timezone/data/latest_all.dart' as tz;
import 'package:timezone/timezone.dart' as tz;

타임존은 사용하기 전 반드시 초기화를 진행하여야 한다.

tz.initializeTimeZones();

setLocalLocation

타임존의 로케이션을 설정할 수 있는데, 설정을 하지 않는다면 UTC 시간대가 설정이 된다.

타임존 설정은 각 로케이션을 넣어서 사용할 수 있다. 대한민국은 Asis/Seoul 이다.

tz.setLocalLocation(tz.getLocation('Asia/Seoul'));

TZDateTime

이제 타임존을 사용하여 시간을 만들어 주도록 해보자. DateTime 객체처럼 사용 방법은 거의 동일하여 현재 시간을 받아올 수도 있고, 시간을 만들어 줄 수도 있다.

로컬 푸시 기능에 있어서는 show() 기능을 사용한 즉시 전송, periodicallyShow()를 사용한 기본적인 주기로 전송하는 것 보다는, 아래에서 살펴볼 타임존을 활용한 zonedSchedule() 기능을 더 많이 사용하기 때문에, 타임존에 대한 부분을 잘 기억하시고 연습을 많이 해보시길 바란다.

TZDateTime을 사용하여 시간대를 생성해 주는데, 필수 값으로 설정해야 할 파라미터는 Locale이다. 초기화시에 로케이션 설정을 진행 하였기에, 사용시에는 설정된 local을 가져다 사용하면 된다.

tz.TZDateTime now = tz.TZDateTime.now(tz.local);
// 2024-01-22 00:00:00.000Z
 
tz.TZDateTime setting = tz.TZDateTime(tz.local, 2024, 1, 22);
// 2024-01-22 00:00:00.000Z

tz.TZDateTime duration = now.add(const Duration(hours: 3, minutes: 20));
// 2024-01-22 03:20:00.000Z

zonedSchedule

zonedSchedule은 타임존을 사용해 시간대를 만들고, 일정 주기를 반복해서 푸시를 보내는 방법이다. 물론, 주기를 넣어서 로컬 푸시를 생성할지 .. 아니면 주기 없이 일회성으로만 푸시를 생성할 지도 .. 해당 기능으로 구현 가능하다.

가장 기본적으로 사용하느 방법이다. 설정한 타임존에 로컬 푸시를 전송하게 된다. 기존에 살펴본 다른 기능들과 거의 유사하지만 추가된 파라미터가 scheduledDate, uiLocalNotificationDateInterpretation, matchDateTimeComponents 이다.

tz.TZDateTime schedule = tz.TZDateTime.now(tz.local);

await _local.zonedSchedule(
	id,
	title,
	body,
	schedule,
	details,
	uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
	matchDateTimeComponents: null,
);

추가된 파라미터에 대해서 살펴보도록 하자.

uiLocalNotificationDateInterpretation
absoluteTime, wallClockTime 을 지정하는 부분이다. 절대적 시간을 사용하면 된다.
[UILocalNotificationDateInterpretation.absoluteTime, UILocalNotificationDateInterpretation.wallClockTime]

matchDateTimeComponents
zonedSchedule 기능에서 가장 중요한 부분이라고 할 수 있다. 해당 설정에 따라 주기성을 갖는지 일회성을 갖는지 결정되게 된다.

DateTimeComponents.dateAndTime
DateTimeComponents.time
DateTimeComponents.dayOfWeekAndTime
DateTimeComponents.dayOfMonthAndTime

scheduledDate
위에서도 설명한 시간대를 설정하는 부분이다. 시간대 설정은 TZTimeZone 객체로만 생성해야 하고, 여기서 설정되는 시간대로 전송된다.

💥 현재 시간에서 5분 뒤 전송

현재 시간에서 5분 뒤 한 번만 로컬 푸시를 전송할 수 있도록 해보자. 한 번만 전송하고 싶을 때는 matchDateTimeComponents 옵션을 사용하지 않으면 된다. null을 넣어도 되고, DateTimeComponents.dateAndTime을 넣어주면 주기성을 갖지 않게 된다.

5분 후를 만드려면 add 함수를 사용해서 현재 시간대에 5분 을 추가해주면 5분 뒤 시간으로 설정된다.

tz.TZDateTime schedule = tz.TZDateTime.now(tz.local).add(const Duration(minutes: 5));

await _local.zonedSchedule(
	type.id,
	title,
	body,
	schedule,
	details,
	uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
	matchDateTimeComponents: null,
    );

💥 매일 동일 시간에 전송

매일 동일 시간에 전송을 하기 위해서는 matchDateTimeComponents 타입을
DateTimeComponents.time 주면 시간을 기준으로 매일 로컬 푸시를 전송할 수 있게 된다.

tz.TZDateTime schedule = tz.TZDateTime.now(tz.local);

await _local.zonedSchedule(
	type.id,
	title,
	body,
	schedule,
	details,
	uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
	matchDateTimeComponents: DateTimeComponents.time,
);

💥 매주 동일 시간에 전송

매주 동일 시간대를 전송하기 위해서는 DateTimeComponents.dayOfWeekAndTime 타입으로 지정해 주면 된다.

여기서 한 가지를 더 살펴보려고 하는데, 바로 위에서 살펴본 periodicallyShow()의 repeat을 RepeatInterval.weekly로 설정을 했을 때와 동일하다는 것을 느낄 수 있다.

둘 다 결과는 동일해 보이지만 실제로는 완전히 다른 기능이다.

periodicallyShow()는 매주 전송을 보낼 수 있지만 시간을 설정할 수 없고, 요청한 시간을 기준으로만 전송을 보낼 수 있는 반면, zonedSchedule()을 사용하면 TZDateTime을 생성해 시간대를 만들 수 있어 원하는 시간대에 푸시를 전송할 수 있다.

tz.TZDateTime schedule = tz.TZDateTime.now(tz.local);

await _local.zonedSchedule(
	type.id,
	title,
	body,
	schedule,
	details,
	uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
	matchDateTimeComponents: DateTimeComponents.dayOfWeekAndTime,
);

💥 매월 동일 시간에 전송

매월 동일 시간대 전송은 DateTimeComponents.dayOfMonthAndTime 타입을 사용하면 된다.

tz.TZDateTime schedule = tz.TZDateTime.now(tz.local);

await _local.zonedSchedule(
	type.id,
	title,
	body,
	schedule,
	details,
	uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
	matchDateTimeComponents: DateTimeComponents.dayOfMonthAndTime,
);

동일 시간대 일정 주기를 기준으로 zonedSchedule() 기능에 대해서 살펴봤다.

시간대를 만드는 방법은 동일하고, 타입만 변경해 주면 된다. 여기서 한 가지 확실히 이해해야 하는 것은 zonedSchedule()은 반드시 매일을 기본으로 보내는 기능이지, 매 시간, 2분 마다, 3시간 마다, 2일 마다.. 이런 기능은 아니다. 무조건 하루를 기준으로 한다.

💥 Local Timezone

시간대에 대해서 자세히 살펴볼 부분이 있다.

타임존을 초기화할 때에 Location을 설정해 주는 부분이다. 지금처럼 "Asia/Seoul"을 Location으로 지정하게 되면 문제가 있다.

tz.initializeTimeZones();
tz.setLocalLocation(tz.getLocation('Asia/Seoul'));

실컷 글로벌 서비스 앱을 개발 하던 중 해외 여행을 갔을 때에 개발한 앱에서 로컬 푸시가 한국에서 설정한 시간대로만 오는 문제가 있었다.

바로 Location을 대한민국으로 지정해 놨기 때문인데, 국내만 서비스 할거라면 문제가 안될 수도 있지만, 해외에서 접속하는 사용자는 시간대가 다르기 때문에 이 부분을 고려하지 않을 수 없게 된다.

Location을 설정하지 않으면 기본 Location은 UTC 타임존이 되기 때문에, UTC 타임존을 사용하여 시간대를 만들어 주면 이러한 문제는 해결이 된다.

SetLocalData

현재 시간대의 타임존을 UTC 타임존과의 차이를 이용하여, 로컬 푸시로 스케쥴링을 진행할 때에 UTC 타임으로 변환해서 설정을 해주면 된다.

tz.TZDateTime _setDate(DateTime date) {

    Duration offSet = DateTime.now().timeZoneOffset;
    DateTime local = date.add(-offSet);
    
    return tz.TZDateTime(tz.local, local.year, local.month, local.day,
        local.hour, local.minute, local.second);
  }

초기화시에 Location을 지정해주는 코드는 제거하도록 하겠다.

// tz.setLocalLocation(tz.getLocation('Asia/Seoul'));

UTC 타임으로 변환은 DateTime에서 제공해주는 UTC 변환을 사용해도 된다.

이 부분을 자세히 살펴보면, 먼저 현재 시간대의 UTC 타임존과의 시간차를 가져오자. 대한민국은 9시간이 빠르다.

Duration offSet = DateTime.now().timeZoneOffset;
print(offSet);
// 9:00:00.000000

설정하고자 하는 시간대에서 UTC 타임존 간의 차이만큼 시간대를 다시 생성해 주자.

이렇게 되면 원하는 시간대에 푸시가 정확하게 전송이 된다.

print(DateTime.now());
// 2024-01-20 13:40:17.146397

DateTime local = date.add(-offSet);
print(local);
// 2024-01-20 04:40:00.000

Location 지정 없이, 각 타임존 시간에 맞게 로컬 푸시가 스케쥴링 되길 원한다면 Location 설정을 별도로 해주지 않고, UTC 타임으로 로컬 푸시를 전송하면 된다.

로컬 푸시 뿐만 아니라 앱에서 시간을 사용할 때에도 UTC 타임을 기준으로 사용하는 방법을 추천한다.

SetWeeklyDate

이번에는 주간 마다 로컬 푸시가 전송되야 할 때에, 요일을 가져오는 방법에 대해서 살펴보도록 하자. 이 부분은 구글링 해보면 다른 방법도 많으니 편하신 방법을 사용하시면 된다.

0이 월요일 이다.

오늘이 월요일인데, 수요일을 기준으로 매주 로컬 푸시 스케쥴링을 해야한다면, 다가오는 수요일 또는 수요일에 해당하는 날짜로 푸시가 예약되어야 수요일을 기준으로 매주 로컬 푸시를 전송할 수 있다.

void _setWeekDate() {
    Duration offSet = DateTime.now().timeZoneOffset;
    DateTime local = DateTime.now().add(-offSet);
    DateTime start = local.subtract(Duration(days: local.weekday - 0));
    DateTime weekDate = switch (index) {
      0 => start.add(const Duration(days: 1)),
      1 => start.add(const Duration(days: 2)),
      2 => start.add(const Duration(days: 3)),
      3 => start.add(const Duration(days: 4)),
      4 => start.add(const Duration(days: 5)),
      5 => start.add(const Duration(days: 6)),
      6 => start.add(const Duration(days: 0)),
      _ => start,
    };
}

zonedSchedule() 기능은 flutter_local_notifications의 전송 주기와 시간대를 다루는데에 있어서 중요한 부분이 많으니, 꼭 여러번 테스트를 진행하면서 사용해 보시길 바란다.

pendingNotificationRequests

로컬 푸시의 스케쥴을 등록하는 부분에 대해서 살펴봤다.

그렇다면 등록된 스케쥴 목록을 얻으려면 어떻게 해야 할까?

flutter_local_notifications 패키지에서는 간단하게 함수를 호출하면 배열에 담아서 스케쥴 목록을 반환해준다.

pendingNotificationRequests() 함수만 호출해주면 되고, 비동기로 반환되는 함수이므로 비동기에 대한 처리를 해주면 된다.

List<PendingNotificationRequest> notifications = await local.pendingNotificationRequests();

PendingNotificationRequest 객체는 어떤 정보들을 반환해 주는지 콘솔에 출력해보면, title, body, payload, id 이렇게 정보를 제공해준다.

cancel

이번에는 등록이 아닌 등록된 스케쥴의 전송을 취소하는 방법에 대해서 살펴보도록 하겠다.

취소는 간단하다. 단일 푸시 스케쥴을 취소할 수도 있고 한 번에 전체 스케쥴을 취소할 수도 있다.

cancel

단일 푸시 스케쥴을 취소하는 방법이다. 한 개의 스케쥴을 취소하기 위해서 반드시 알고 있어야 하는 데이터는 바로 id이다.

id는 앱 내에서 정해진 규칙으로 생성하여 관리해도 되고, 위에서 살펴본 PendingNotificationRequest 객체를 얻어서 id를 관리해도 된다.

final FlutterLocalNotificationsPlugin local = FlutterLocalNotificationsPlugin();
local.cancel(id);

cancelAll

한 번에 모든 스케쥴을 전부 취소하려면 간단히 cancelAll() 함수를 사용할 수 있다.

final FlutterLocalNotificationsPlugin local = FlutterLocalNotificationsPlugin();
local.cancelAll();

Linstener

지금까지 flutter_local_notifications 설정부터, 로컬 푸시를 전송하고, 스케쥴을 등록하고 취소하는 방법까지 가장 기본적인 사용 방법에 대해서 살펴봤다.

수신 받은 푸시를 사용자가 클릭해서 앱이 오픈 되었을 때에, 원하는 작동을 할 수 있으려면 푸시 알림을 클릭해서 진입한 사용자라는 것을 알아야하고, 추가적으로 푸시 알림에 어떤 정보가 담겨 있는지도 파악하여야 앱 내에서 원하는 이벤트를 실행시킬 수 있을 것이다.

앱에서 사용하는 알림에 대해 모르시는 부분은 없으시겠지만, 혹시라도 모르시는 분들은 딥링크와 앱의 상태에 대해서 이해를 하고 있으셔야 한다.

이전에 앱에서 사용하는 링크에 대한 사용 방법과 설명을 작성한 글이 있으니 해당 내용 참고하시면 좋을 것 같다.

URL Scheme 체계 이해해 보기
Firebase DynamicLinks 사용해 보기
Firebase FCM(Firebase Cloud Message) 사용해 보기

우리가 위에서 푸시를 전송할 때에 payload 라는 부분에 데이터를 넣어줄 수 있게 되어있는데, payload에 넣어주는 데이터가 바로 수신 받는 데이터가 된다.

일반적으로 푸시를 보내는 부분은 사용자에게 특정 알림을 주기 위해 전송을 할 것인데, 원하는 것은 결국 사용자를 특정 영역으로 이동시켜야 한다는 것이다.

Flutter에서 앱의 페이지를 이동할 때에 Named Router를 사용하는데, payload에 페이지 네임을 넣어서 사용하면 푸시 오픈 즉시 원하는 영역으로 라우팅을 보낼 수 있을 것이다.

payload를 어떻게 사용할 지는 개발자 자유니, 원하는 이벤트를 만들어 주면되고 우선 푸시 클릭시 데이터를 수신할 수 있도록 개발을 해보자.

추가적으로 푸시 알림에 사용하는 앱의 상태는 3가지가 있다. 앱 실행 중 환경, 앱 백그라운드 상태, 앱 종료 상태 이렇게 3가를 사용하는데, 각 환경에서 푸시 알림을 수신하는 방법에 차이가 있다.

Foreground / Background

앱 실행 중 상태인 Foreground와 Background 상태는 동일한 리스너로 수신이 가능하다.

추가적으로 Foreground, Background를 구분해야 한다면 AppLifeCycle을 사용한 상태 관리가 추가적으로 필요하다.

Flutter App Lifecycle

FlutterLocalNotificationsPlugin을 최초 초기화시에 initialize() 함수를 실행시켜 주어야 하는데, 옵션 파라미터로 onDidReceiveNotificationResponse 옵션이 있다.

바로 여기서 백그라운드, 포어그라운드 상태를 받아볼 수 있다.

초기화는 앱의 최상단 위젯 트리에서 진행해 주면 하위 위젯트리 어느 영역에 있어도 해당 기능이 작동되니, 위젯트리를 고려해서 원하는 위치에서 초기화를 시켜주는 것이 중요하다.

저는 MaterialApp() 실행 후 initialPage가 초기화 될때에 FlutterLocalNotificationsPlugin도 초기화를 진행해 준다.

리스너가 실행되면 NotificationResponse 객체를 반환해 주는데, 해당 객체안에 payload 값이 담겨져 있어서 원하는 이벤트를 실행해 주면 된다.

final FlutterLocalNotificationsPlugin local = FlutterLocalNotificationsPlugin();

await local.initialize(
      settings,
      onDidReceiveNotificationResponse: (NotificationResponse details) {
        if (details.payload != null) {
          print(details.payload);
        }
      },
    );

Terminate

앱 종료 상태에서의 로컬 푸시 리스너를 구독하는 방법에 대해서 살펴보자. 앱 종료 상태는 앱이 완전히 종료된 상태에서 수신되는 기능이어서 앱의 최상단에서 최초 초기화 될 때에 한 번만 실행하면 된다.

한 번만 실행되는 트리가 아닌 여러번 재 실행 되는 부분에 해당 함수를 실행시키면 계속 수신되니, 앱 실행 최초 한 번만 실행하는 것이 중요하다.

getNotificationAppLaunchDetails() 함수를 실행 시키면 로컬 푸시를 클릭 했을 때에 데이터를 해당 함수가 반환해 준다.

 NotificationAppLaunchDetails? details = await local.getNotificationAppLaunchDetails();
    if (details != null) {
      if (details.notificationResponse != null) {
        if (details.notificationResponse!.payload != null) {
          //
        }
      }
    }

flutter_local_notifications(Listener) - 2022.10

리스너 부분이 잘 작동되지 않거나, 추가적으로 Remote Push, Links 사용 등으로 어떻게 해야 하는지 잘 모르시는 분들은 댓글 남겨주시면 최대한 도와 드리겠습니다.

---

지금까지 flutter_local_notifications를 사용한 가장 기본적인 방법에 대해서 살펴봤다.

기본적인 내용이라고 해도 사실 위에서 살펴본 내용만 있어도 로컬 푸시 구성은 끝났다고 봐도 된다. 이제부터 설명할 내용은 옵셔널한 부분이니, 로컬 푸시 구성을 다양하게 해보실 분이라면 꼭 봐야할 내용은 아닐 수도 있다.

원래는 이제부터 소개할 내용을 사용해보고 정리하기 위해 글을 작성하려고 한것인데, 배보다 배꼽이 더 커져버렸다... 로컬 푸시는 한 번 세팅하고 테스트 하기까지 오랜 시간이 걸리고, 내용도 많다...

이번에 작성하면서 로컬 푸시의 기능들을 담은 앱을 하나 개발 하였는데, 필요하신 분은 글 마지막에 작성한 내용을 참고하셔서 APK로 안드로이드에서 직접 앱을 실행해 보실 수 있다.

자 이제 로컬 푸시를 좀 더 멋지게 만들어 보자.

* 아래 내용은 정확한 테스트를 전부 진행하지는 못해서 일부 내용이 다를 수 있으니, 더 자세하게 알고 싶으신 내용이 있다면 편하게 댓글 남겨주세요! 추가적으로 테스트 후 내용 수정하도록 하겠습니다 !

Image

앱을 사용하면서 푸시 알림을 받아 보면 이미지가 있는 푸시들이 있었을 것이다. 이미지는 어떻게 보내야 할까 ?

Remote 푸시의 경우 FCM을 통해 이미지를 보내는 것이 간단하다.

로컬 푸시에서도 어렵지 않게 이미지를 실어 보낼 수 있는데, 이 부분을 살펴보도록 하자.

로컬 푸시에서 이미지를 실어서 전송하려면, NotificationDetails 객체의 플랫폼별 세팅에서 이미지 정보를 넣어주면 된다.

NotificationDetails 객체를 사용한다는 의미는 플랫폼별 사용 방법이 다를 수 있다는 의미기도 하다.

먼저, ios의 DarwinNotificationDetails를 살펴보면, attachments 옵셔널 파라미터가 보인다. 배열로 DarwinNotificationAttachment 객체를 넣어주면 된다고 한다.
DarwinNotificationAttachment는 필수 파라미터로 filePath를 받아오게 되어있다. filePath는 File 저장소에 저장된 이미지의 경로이다.

이번에는 android 부분을 살펴보자.
AndroidNotificationDetails 객체의 styleInformation 파라미터 부분을 살펴보면 푸시 전송시 푸시 템플릿 변경에 사용된다고 한다.
StyleInformation 객체는 InBox, Media, Default, BigPicture 등 다양한 형태의 타입의 객체들이 사용되고 있는데, 여기서 이미지에 사용되는 것은 BigPictureStyleInformation 객체를 사용해주면 된다.
BigPictureStyleInformation 객체는 필수 값으로 AndroidBitmap을 넘겨 받게 되는데, 이것도 ios와 동일하게 File 저장소에 저장된 이미지 경로를 필요로 한다.

이제 이미지가 노출될 수 있도록 푸시 전송시 어떤 데이터가 필요한지 살펴봤다.

로컬 푸시를 전송하기 전에 우선적으로 이미지를 File로 변환하는 방법에 대해서 알아보자. 이 부분은 이미 널리 사용되는 방법이기에 간단하게만 보겠다.

아래 패키지들을 추가해주자.

http : HTTP 통신에 사용
path_provider : 앱 File system 경로를 확인하기 위해 사용

dependencies:
	http: ^1.2.0
	path_provider: ^2.1.2

AssetToFile

Asset 이미지를 File 저장소에 저장한 후 경로를 가져오면 된다.

import 'package:path_provider/path_provider.dart';

final String asset = "your_asset_image";
final ByteData byteData = await rootBundle.load(asset);
final Directory directory = await getTemporaryDirectory();
final File file = File('${directory.path}/${asset.split('/').last}');
await file.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
print(file.path);

NetworkImageToFile

Network 이미지를 사용할 경우 이미지를 불러와 File system 경로에 저장하면 된다.

import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';

try {
	final http.Response response = await http.get(Uri.parse(url));
	final Directory directory = await getTemporaryDirectory();
	final String name = "${directory.path}/${url.split('/').last}.png";
	final File file = File(name);
	await file.writeAsBytes(response.bodyBytes);
	print(file.path);
} catch (_) {
	return;
}

NotificationDetails

로컬 푸시 전송시 ios의 attachments, android의 styleInformation을 사용해서 이미지를 전송하면 된다.

ios의 attachments는 배열을 전달할 수 있게 되어있는데, 첫 번째 배열만 사용이 되기 때문에, 단 한개의 DarwinNotificationAttachment 객체를 넣어서 사용해주자.

NotificationDetails(
      iOS: DarwinNotificationDetails(
        presentAlert: true,
        presentBadge: true,
        presentSound: true,
        badgeNumber: 1,
        attachments: [
        	DarwinNotificationAttachment(filePath)
        ],
      ),
      android: AndroidNotificationDetails(
        send.type.channelId,
        send.type.channelName,
        channelDescription: send.type.channelDescription,
        importance: Importance.max,
        priority: Priority.high,
        styleInformation: BigPictureStyleInformation(
        	FilePathAndroidBitmap(filePath),
      	),
      ),
    );

각각 플랫폼 별로 전송 테스트를 진행해보자. IOS는 이미지 사이즈에 맞춰서 알림의 사이즈가 동적으로 변하는 반면, Android는 지정된 푸시 이미지 사이즈 규격이 있어 해당 사이즈로만 노출되는 것으로 확인할 수 있다.

Android BigPicture 포맷에 대해서 좀 더 살펴볼 기능이 있다. 바로 알림을 펼쳤을 때에 노출 되는 큰 사이즈의 아이콘과, 타이틀, 본문 내용을 바꿀 수 있다는 것이다.

사용 방법은 간단한데, 아이콘은 위에서 이미지를 File 시스템에 저장해서 사용한 것과 동일한 방법을 사용해 주면 된다. 타이틀과 본문 내용은 각각 contentTitle, summaryText 파라미터를 사용하면 된다.

BigPictureStyleInformation(
	FilePathAndroidBitmap(filePath),
    largeIcon: FilePathAndroidBitmap(iconFilePath),
	summaryText: "Expand Summary Text",
	contentTitle: "Expand Content Title",
),

푸시 알림을 펼치면 타이틀과 내용이 변한다. 아쉽게도 IOS는 해당 템플릿의 푸시 알림은 없어서 Android에서만 사용하면 된다.

Category

이번에는 알림 카테고리 기능에 대해서 알아보도록 하자.

카테고리 기능에 대해서 모르시는 분들이 있을 수 있어 어떤 기능인지에 대해 간단하게만 살펴보면, 아래 이미지와 같이 앱을 실행시키지 않고도 푸시 알림에 대한 응답을 받을 수 있는 기능이다.

사실 이 기능은 요새는 잘 사용하지 않는 기능으로 알고있다. 몇 년전까지만 해도 푸시 알림시 사용자들에게 원하는 액션을 얻기 위해 전송하는 경우가 있었지만, 백그라운드에서 작업을 진행해야 한다는 부분과 액션을 처리하는데에 어려움이 있어 현재는 알림에 대한 작업처리 기능의 푸시 타입은 사용하지 않는다.

어떤 기능인지에 대해서는 알고 있으면 나쁠 것 없기 때문에 알아보자.

이 기능 역시 IOS, Android 플랫폼 별로 설정과 사용 방법이 다르다.

먼저 Android는 추가적인 설정은 해주지 않아도 되고 IOS만 추가적인 기능을 활성화 해주면 된다.

IOS

AppDelegate

ios 폴더의 AppDelegate.swift 파일로 가서 주석 아래의 코드를 추가해주면 된다.

// Add
import flutter_local_notifications

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      
    if #available(iOS 10.0, *) {
        UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }
      
   	// Add 
   	FlutterLocalNotificationsPlugin.setPluginRegistrantCallback { (registry) in
        GeneratedPluginRegistrant.register(with: registry)
    }
      
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

추가를 해주었으면, Local Push를 초기화 하는 부분에 사용할 액션에 대해서 설정을 해주면 된다.

notificationCategories 파라미터에 사용할 카테고리를 등록해 주면 된다.
여러 종류의 푸시에 사용될 카테고리는 모두 여기에 추가를 해주어야 사용이 가능하다.

DarwinInitializationSettings(
	requestSoundPermission: false,
	requestBadgePermission: false,
	requestAlertPermission: false,
	notificationCategories: [
    	...
    ],
),

저는 테스트로 한 개의 카테고리 그룹을 추가해 주었다.

먼저 DarwinNotificationCategory는 필수로 identifier를 제공 받아야 하는데, 푸시를 전송시 구분 식별자로 사용할 값을 제공해주면 된다.

action에는 사용할 Action을 넣을 수 있다.
액션 타입은 text, plain 타입이 있고, text는 데이터를 사용자가 키보드를 통해서 입력할 수 있도록 해주고, plain은 액션 이벤트를 받게될 버튼 타입이라고 보면 된다.
각 타입에도 고유한 식별자를 사용해야 하며, text 타입은 버튼명과 Placeholder를 지정할 수 있도록 되어있다.

options를 보면 DarwinNotificationCategoryOption 타입을 지정할 수 있도록 되어있는데, 사용자가 앱의 알림 미리보기를 비활성화하 경우에도 제목을 노출 시키고 싶다면 hiddenPreviewShowTitle, 부제목을 노출 시키고 싶다면 hiddenPreviewShowSubtitle 을 지정해 주라고 한다.

notificationCategories: [
        DarwinNotificationCategory(
          "categoryId",
          actions: <DarwinNotificationAction>[
            DarwinNotificationAction.text("categoryInput", "Input Text",
                buttonTitle: "SEND", placeholder: "Input your text..."),
            DarwinNotificationAction.plain("categoryAccept", "Accept"),
            DarwinNotificationAction.plain("categoryDecline", "Decline"),
          ],
          options: <DarwinNotificationCategoryOption>{
            DarwinNotificationCategoryOption.hiddenPreviewShowTitle,
          },
        ),
      ],

사용할 카테고리 등록은 완료 되었다. 사용을 하려면 로컬 푸시 전송시 사용하는 details에 추가만 해주면 된다.

categoryId를 식별자로 등록 했기에, 해당 값을 categoryIdentifier에 넣어주면 끝이다 !

DarwinNotificationDetails(
	presentAlert: true,
	presentBadge: true,
	presentSound: true,
	badgeNumber: 1,
	attachments: attachments,
	categoryIdentifier: "categoryId",
),

Android

Android는 사용하고자 하는 카테고리를 details에 직접 구성해주기만 하면 된다.

Android도 id를 지정해주고, 액션에 사용할 타이틀을 지정해 주면된다.

AndroidNotificationDetails(
	channelId,
	channelName,
	channelDescription: channelDescription,
	importance: Importance.max,
	priority: Priority.high,
	actions: const <AndroidNotificationAction>[
		AndroidNotificationAction(
			"categoryAccept",
			"Accept",
			showsUserInterface: true,
          ),
		AndroidNotificationAction(
            "categoryDecline",
            "Decline",
            showsUserInterface: true,
            inputs: [
              AndroidNotificationActionInput(
                label: "Input your text",
              )
            ],
          ),
        ],
      ),

Listener

카테고리 액션 이벤트를 수신받기 위해서는 최상위 또는 정적메소드로 구성해야 한다고 한다. 앱이 실행되지 않은 경우 해당 이벤트를 백그라운드에서 처리해야 하기 되기에 이 부분을 생각해서 내부 이벤트를 구성하시면 된다.

@pragma('vm:entry-point')
void notificationTapBackground(NotificationResponse notificationResponse) {
  // handle action
  print(notificationResponse.actionId);
  print(notificationResponse.id);
  print(notificationResponse.input);
  print(notificationResponse.payload);
}

Local Push 초기화시에 onDidReceiveBackgroundNotificationResponse에서 수신을 받으면 된다.

    await local.initialize(
      settings,
      onDidReceiveNotificationResponse: (NotificationResponse details) {
      	...
      },
      onDidReceiveBackgroundNotificationResponse: notificationTapBackground,
    );

카테고리 작업은 기본적인 구성 방법과 사용법에 대해서만 가볍게 다뤘으니, 위의 내용을 참고하여 원하시는 기능을 만드시면 된다.

SubTitle

IOS, Android 둘 다 푸시에 SubTitle을 추가할 수 있고, details 옵션에 추가하여 사용할 수 있다.

IOS

DarwinNotificationDetails(
	...
	subtitle: "SubTitle",
),

Android

AndroidNotificationDetails(
	...
	subText: "SubTitle",
),

Progress Only Android

이번에는 Android에서만 지원하는 기능인 진행률 표시기이다.
아쉽게도 IOS에서는 지원하지 않는 기능이니, 안드로이드 전용으로 사용하시면 된다.

안드로이드 사용자는 익숙한 기능일 것이다. 서비스에서 무언가를 다운로드 받을 때 주로 표시되는 Progress bar이다.

이 기능을 소개하기 앞서, 한 가지 확실히 알아둬야 할 점은 이미 전송된 푸시의 내용을 변경하지 못한다는 것이다. Remote, Local 푸시 모두 한 번 전송되면 내용을 수정할 수가 없다.

자 그렇다면 어떻게 진행률이 단계적으로 표시되는 것일까 ?

방법은 간단한데, 푸시를 계속 보내는 것이다. 푸시를 전송시 id 값을 지정하여 푸시를 전송하게 되는데, 동일 id 값으로 푸시를 여러번 보내게 되면 알림 리스트에는 한 개의 푸시만 보이게 되므로 이러한 기능을 구현할 수가 있다.

다운로드를 받는데, 처음 10% 받았을 때에 푸시를 보내고, 다음으로 25%가 다운로드 됬다면 그 때 동일 id를 사용해 또 푸시를 전송하는 것이다.

AndroidNotificationDetails에 maxProgress, progress, showProgress, silent 값을 활용하면 이 기능을 만들 수 있다.

maxProgress : 전체 진행률
progress : 현재 진행률
showProgress : 진행률 표시기를 노출할지 여부
silent : 알림을 노출시키지 않고 내역에만 노출시키고 싶을 경우 사용

maxProgress를 100으로 지정하고, progress를 15로 지정하면 15%의 진행률 표시기가 노출된다.

showProgress를 true로 하지 않으면 노출되지 않으니, 반드시 true로 지정해야 노출이 된다.

silent는 알림을 배너로 노출하지 않고, 내역에서만 노출되도록 하는 기능인데, silent 값을 사용하지 않으면 푸시가 배너에 노출되면서, 진동이 활성화 되게 된다. 이렇게 되면, 계속 진동이 발생할 것이기 때문에 사용자 피로도가 높아지게 되므로 silent 값을 true로 지정하여 진행률 표시기를 내역에서만 노출될 수 있도록 사용하는 것이 좋다.
물론, 개발자분들이 개발하기 나름이니 silent를 false로 보내도 문제는 없다.

진행률 표시기도 details에서 설정할 수 있다.

AndroidNotificationDetails(
	maxProgress: 100,
	progress: 15,
	showProgress: true,
	silent: true,
),

Flutter에서 현재 다운로드 진행 상황을 만들어주는 패키지는 여러 있으니, 해당 기능과 결합하여 사용하시면 된다.
저는 간단하게 1초에 10%씩 다운로드 받는 코드를 구현해 봤다. 코드를 보시면 쉽게 이해할 수 있을 것이다.

for (int i = 0; i < 10; i++) {
	await Future.delayed(const Duration(seconds: 1), () async {
		await _local.show(
        	1,
            "[PROGRESS] [${(i + 1) * 10}/100]",
            "[TEST] flutter_local_notifications packages with Local Push",
            NotificationDetails(
		    	iOS: ios,
      			android: AndroidNotificationDetails(
        			"progressId",
					"progressName",
			        importance: Importance.max,
       				priority: Priority.high,
    			    maxProgress: 100,
       				progress: (i+1)*10,
			        showProgress: true,
			        silent: true,
      ),
    );
        );
      });
    }

Vibration

이번에도 안드로이드 전용인 진동 패턴에 대해서 살펴보도록 하겠다.

안드로이드의 푸시 전송시 진동 패턴을 변경할 수 있는데, IOS는 진동 패턴을 변경할 수 없다.

진동 패턴은 AndroidNotificationDetails 옵션의 vibrationPattern을 사용해서 Int64List로 패턴을 만들 수 있다.

AndroidNotificationDetails(
	...
	vibrationPattern: Int64List.fromList([0, 1500, 500, 2000, 500, 1500]),
),

• 1초 간격으로 3초씩 2번 진동

Int64List.fromList([0, 3000, 1000, 3000]);

• 1초 진동 후 2초 후 3초 진동 그리고 0.5초 후 1초 진동

Int64List.fromList([0, 1000, 2000, 3000, 500, 1000]);

진동 패턴은 최초 생성된 channelId 값을 기준으로 하기 때문에, 앱을 재설치 하면서 테스트를 진행하시면 된다. 만일 기존 channelId를 사용했다면, 채널이 생성될 때의 진동 패턴을 따라가기 때문에 무조건 초기 실행시 패턴을 만들어야 하며, 같은 channelId로는 패턴을 변경할 수 없다.

Sound

진동 패턴에 이어서 사운드를 변경해보자.

사운드 변경은 진동 패턴과는 다르게 IOS에서도 사용 가능한 기능이다.

사운드 변경을 위해서 오디오 파일이 필요한데, 사용할 오디오 파일은 flutter_local_notifications 패키지 예제 앱에 있는 파일로 사용을 해보도록 하자.

MP3파일은 아래 링크의 Git 저장소에서 받을 수 있다.

slow_spring_board.mp3

Android

안드로이드는 먼저 resource를 생성해 주어야 한다.

android > app > src > main > res

해당 경로로 이동하여 raw 폴더를 생성해주고, raw폴더에 다운받은 mp3 파일을 넣어주자.

사용 방법은 간단하다. 주의할 점은 위에서 진동 패턴을 생성한 것과 같이 channelId로 이미 생성된 로컬 푸시가 있다면 새로운 오디오 파일로 사운드 재생이 안되기 때문에, 새로운 channelId를 생성하거나 아니면 앱을 지웠다가 다시 빌드하면 된다.

AndroidNotificationDetails 옵션 중 sound에 리소스 파일 경로를 찾을 수 있도록 코드를 추가해주자.

만일 재생이 되지 않는다면, playSound 값이 true로 되어 있는지도 확인해보자.

AndroidNotificationDetails(
	...
	sound: const RawResourceAndroidNotificationSound("slow_spring_board"),
      ),

IOS

이어서 IOS에서도 사운드를 변경해보자.

IOS는 mp3파일이 아닌 aiff 파일을 사용하기 때문에 IOS에 사용할 오디오 파일도 아래 링크에서 다운로드 해주자.

slow_spring_board.aiff

먼저 XCode를 열어주자.

Runner 하위에 다운받은 오디오 파일을 넣어주면 된다.

DarwinNotificationDetails 옵션의 sound에 파일 이름을 넣어주면 된다. 끝이다.

DarwinNotificationDetails(
	presentAlert: true,
	presentBadge: true,
	presentSound: true,
	sound: "slow_spring_board.aiff",
),

---

마무리

지금까지 flutter_local_notifications 패키지를 사용한 로컬 푸시 기능에 대해서 설정부터 사용 방법까지 알아보았다.

flutter_local_notifications 패키지에는 이 외에도 많은 기능들이 제공되고 있으니, 한 번씩 사용해 보시면서 자세히 살펴보시길 바란다.

이번 글의 내용이 너무 길어져, 주요한 기능만 작성하게 되었으니 추가적으로 궁금하신 부분은 요청 주시면 이 글에 추가하거나 새로운 글로 작성해 보도록 하겠다

참고로 알림 기능은 PlugIn 패키지이다 보니, 설정 및 버전에 따라 작동이 안되실 수도 있으니, 알림을 생성하고 실제 알림이 오는지 꼭 테스트 해보시면서 개발 하시길 바란다.

지금까지 내용 중 궁금하신 내용은 댓글 남겨주시면 최대한 빠른 답변 드리도록 하겠습니다 !!

---

Sample App

Git Repository

이번에 flutter_local_notifications 패키지에 대해서 보다 자세히 글을 작성하게 되면서, 나중에도 필요한 기능이 있으면 그때마다 프로젝트를 생성하기엔 설정해야 하는 부분이 많아서 테스트용 앱을 하나 만들어 봤다.

간단하게 기능을 사용해보고 싶으신 분들은 Git Repository 들어가셔서 프로젝트 실행해 보시면 도움이 될겁니다.

---

---