굳이, 외부로부터 푸시를 이용하고 싶지 않을때, local push를 사용한다.
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 { }
|
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) {
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()));
}
}
|
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
