굳이, 외부로부터 푸시를 이용하고 싶지 않을때, local push를 사용한다.

  • plugin 인스톨
1
2
$ ionic cordova plugin add de.appplant.cordova.plugin.local-notification
$ npm install --save @ionic-native/local-notifications
  • 앱 모듈에 추가
1
2
3
4
5
6
7
8
9
10
import { LocalNotifications } from '@ionic-native/local-notifications';

@NgModule({
declarations: [
...
LocalNotifications,
...
]
})
export class AppModule { }
  • home.ts
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';

import { LocalNotifications } from '@ionic-native/local-notifications';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, private plt: Platform, private local: LocalNotifications, private alertCtrl: AlertController) {
this.plt.ready().then(rdy => {
this.local.on('click', (notification, state) => {
let alert = this.alertCtrl.create({
title: notification.title,
subTitle: json.myData
});
alert.present();
});
});
}

ionViewDidLoad() {
if (this.platform.is('cordova')) {
this.platform.ready().then(() => {
this.localNotifications.hasPermission().then(function (granted) {
if (!granted) {
// IOS10의 권한 설정
this.localNotifications.registerPermission();
}
});
});
}
}

scheduleNotification() {
this.local.schedule({
id: 1,
title: 'Attention Users!',
text: 'Emirhan notification',
at: new Date(new Date().getTime() + 5 * 1000),
data: { myData: 'My hidden message this is.' }
});
alert(JSON.stringify(this.local.getAll()));
}
}
  • home.html
1
2
3
4
5
6
7
8
9
10
11
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button full (click)="scheduleNotification()">Schedule!</button>
</ion-content>

푸시가 오는 것이 확인된다. 블루스택으로 테스트 할경우, 푸시가 오지 않는 경우가 있으니 주의할 것.

Reference

https://ionicframework.com/docs/native/local-notifications/

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea