목차

  1. Local Notifications
  2. 마치며

로컬 푸시 노티를 다루는 방법을 알아봅니다.
알람 설정 등에서 사용할 수 있는 기능입니다.

Local Notifications

자세한 사항은 이 문서를 참고해주세요. Local Notifications
우선 플러그인을 설치해야 합니다.

1
2
$ ionic cordova plugin add cordova-plugin-local-notification
$ npm install @ionic-native/local-notifications

AppModule.ts에 아래처럼 의존성을 넣어주도록 합시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//.. 여러 import들 생략
import {LocalNotifications} from '@ionic-native/local-notifications/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // 생략
  ],
  providers: [
    // 필요한 의존성들 알아서 잘,,
    LocalNotifications,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}


LocalNotifications를 이용하여 스케쥴을 설정하게 됩니다. 참고로 이놈은 cordova 플러그인 문서를 참고하시면 좋습니다.
cordova-plugin-local-notifications

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@Injectable({
  providedIn: 'root',
})
export class NotificationService {
  constructor(private localNotifications: LocalNotifications) {
    this.localNotifications.schedule({
      // 참고로 아이디를 지정해주지 않으면 특정 기본값으로 들어가는것 같음,
      // 따라서 여러 알람을 설정하려면 반드시 id를 구분해서 넣도록 하자.
      id: 1,
      title: '푸시 제목',
      text: '푸시 본문,, 몇줄까지 되는지는 잘 모르겠음',
      trigger: {every: {hour: 7, minute: 20, weekday: 0}}, // weekday는 0 ~ 6 (일월화수목금토)
      foreground: true, // 앱이 켜져있을때도 상단 바에 푸시를 받을지 말지
    });
  }

  cancel(): void {
    // 앱에 있는 모든 알림 삭제
    this.localNotifications.cancel(1, function() {
        // optional callback
    });

    // 앱에 있는 모든 알림 삭제
    this.localNotifications.cancelAll(function() {
        // optional callback
    });

    // cancel 말고 clear도 있는데 무슨차이인지 정확히 모르겠음,, 무튼 cancel쓰면 멈추긴 한다는거...
    // this.localNotifications.clear(1);
    // this.localNotifications.clearAll();
  }
}

주석에 설명을 다 달아두었습니다. 생각보다 별거 아닌건데 이게 weekday 값이 어떻게 들어가는 건지 몰라서 매우 삽질했네요.

마치며

개인적으로 ionic 문서가 별로 맘에 안듭니다. 대충 써있고 세세한부분이 안써있어서요.
아님 그냥 제 html 컴포넌트 관련 지식이 얕아서 일수도 있습니다. weekday 때문에 이렇게 삽질할 줄은..

Local Notifications
cordova-plugin-local-notifications