Hey Ionites!
I developed an app using Ionic 2 and trying to implement the push notifications. I couldn’t find any document for Push notification on http://ionicframework.com/docs/v2/native/Push/ . The only link I found useful is [http://nishanthkabra.com/ionic2push.html] (http://nishanthkabra.com/ionic2push.html) Using this link, I am able to get basic android push notification but it’s not working for IOS.
Ionic 2 is my choice of framework because it provides native interface with simplistic code and it’s based on new technologies. I think push notifications are very important for mobile apps and a good documentation on push notifications could be a huge win for Ionic over other frameworks.
Can we expect a documentation on Push notification once Ionic is out of beta mode? Also, google has moved from GCM to FCM so if it’s using FCM, it would be great.
2 Likes
Hi this is Nishanth Kabra, happy to see that my post helped 
Push notifications is one the top features of ionic and it definitely needs documentation.
Eagerly waiting for angular2 and ionic2 to go live and have better docs.
Use ionic-cloud-angular bro… Instructions on how to use it for push notifications are given here - http://tphangout.com/ionic-2-push-notifications/
Good luck… 
Finally got it working for both iOS and Android. Wrote an article Ionic 2 Push notifications to explain push notifications for both iOS and Android. Someone might find it useful. It also has good references to articles like @NishanthKabra article on push notification in android.
4 Likes
Can You please provide the Code exactly what you doing… Am unable to get push notifications in IONIC V2
THANK YOU
As I mentioned in solution, this article has complete steps with code and images for GCM and APNS setup for Ionic 2 push notifications. If you carefully go step by step, push notifications should work in both Android and iOS.
while run ionic serve --lab app.bundle.js is missing every time…its shows error… how can i solve this?
Thank You
If you don’t have app.bundle.js in www/build/js directory, try deleting build directory and running ionic build to rebuild it.
Yeah I deleted the build directory and while run ionic build exactly what happen is i attached screen shot here, in screen shot its shown error and again app.bundle.js file is miising
Is it happening after adding the push code? It’s impossible to debug without seeing the code so if you can provide some code which you think can be causing issue would be helpful.
In app.ts
import {Component} from ‘@angular/core’;
import {Platform, ionicBootstrap} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {Push} from ‘ionic-native’;
@Component({
template: ‘<ion-nav [root]=“rootPage”>’
})
export class MyApp {
private rootPage: any;
constructor(platform: Platform) {
// Call any initial plugins when ready
platform.ready().then(() => {
StatusBar.styleDefault();
let push = Push.init({
android: {
senderID: "889246010125 "
},
ios: {
alert: “true”,
badge: false,
sound: “true”
},
windows: {}
});
push.on(‘registration’, (data) => {
console.log(“device token ->”, data.registrationId);
//TODO - send device token to server
});
push.on(‘notification’, (data) => {
console.log(‘message’, data.message);
let self = this;
//if user using app and push notification comes
if (data.additionalData.foreground) {
// if application open, show popup
let confirmAlert = Alert.create({
title: ‘New Notification’,
message: data.message,
buttons: [{
text: ‘Ignore’,
role: ‘cancel’
}, {
text: ‘View’,
handler: () => {
//TODO: Your logic here
//self.nav.push(SomeComponent, {message:data.message});
}
}]
});
self.nav.present(confirmAlert);
} else {
//if user NOT using app and push notification comes
//TODO: Your logic on click of push notification directly
//self.nav.push(SomeComponent, {message:data.message});
console.log(“Push notification clicked”);
}
});
push.on(‘error’, (e) => {
console.log(e.message);
});
});
}
ionicBootstrap(MyApp);
Only error I could find in your code is missing some imports such as Alert import and empty template
I’ve following working code
import {Component, ViewChild} from "@angular/core";
import {Platform, Nav, ionicBootstrap, Alert} from "ionic-angular";
import {StatusBar, Splashscreen, Push} from "ionic-native";
import {TabsPage} from "./pages/tabs/tabs";
@Component({
template: '<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>'
})
class MyApp {
// the root nav is a child of the root app component
// @ViewChild(Nav) gets a reference to the app's root nav
@ViewChild(Nav) nav: Nav;
rootPage: any = TabsPage;
constructor(platform: Platform) {
// Call any initial plugins when ready
platform.ready().then(() => {
StatusBar.styleDefault();
let push = Push.init({
android: {
senderID: "YOUR_PROJECT_NUMBER_HERE"
},
ios: {
alert: "true",
badge: false,
sound: "true"
},
windows: {}
});
push.on('registration', (data) => {
console.log("device token ->", data.registrationId);
//TODO - send device token to server
});
push.on('notification', (data) => {
console.log('message', data.message);
let self = this;
//if user using app and push notification comes
if (data.additionalData.foreground) {
// if application open, show popup
let confirmAlert = Alert.create({
title: 'New Notification',
message: data.message,
buttons: [{
text: 'Ignore',
role: 'cancel'
}, {
text: 'View',
handler: () => {
//TODO: Your logic here
//self.nav.push(SomeComponent, {message:data.message});
}
}]
});
self.nav.present(confirmAlert);
} else {
//if user NOT using app and push notification comes
//TODO: Your logic on click of push notification directly
//self.nav.push(SomeComponent, {message:data.message});
console.log("Push notification clicked");
}
});
push.on('error', (e) => {
console.log(e.message);
});
});
}
}
ionicBootstrap(MyApp, [], {
tabbarPlacement: 'bottom',
prodMode: true
});
1 Like
Thank You So Much… I Got Device Token, Then Next Step Mention Please
The Exact Problem Is Android studio Is not up to date
I Got Device Token, But I send Notification Through Post Man, Status is created sucessfully. but In mobile not getting notification
Hi @ankushagg93,
I am getting error while implementing this in my existing app-
TypeScript error: app/app.ts(43,27): Error TS1138: Parameter declaration expected.
TypeScript error: app/app.ts(43,28): Error TS1109: Expression expected.
TypeScript error: app/app.ts(43,31): Error TS1128: Declaration or statement expected.
TypeScript error: app/app.ts(91,8): Error TS1128: Declaration or statement expected.
TypeScript error: app/app.ts(92,5): Error TS1128: Declaration or statement expected.
TypeScript error: app/app.ts(94,19): Error TS1005: ‘;’ expected.
I think there is some issue with app.js code
can you give me a link for this application like github if you have pushed it there.
We are using https://gcm-http.googleapis.com/gcm/send to send payload, you are using https://api.ionic.io/push/notifications. Try this url, else try using java code mentioned in article used for push notification from server side.
See https://forum.ionicframework.com/t/ionic-2-push-notification/53898/18?u=ankushagg93. Also, if you can show your app.ts code, it will help in debugging as it’s impossible to tell error in code without seeing code itself 
thanks @ankushagg93,
I am new to ionic, I think you are using
to send a push message to devise!!!
can’t we do this same uisng thinrd party service as
I also don’t know how to use this because it seems java code.
Device token how i send to server in ionic v2
i got errors that code mention here , please Tell me to how i send device token to Server (Post method) Please attach the code
----------------------------------------Post Moethod is it Right or Wrong ? -----------------
In Constructor
http: Http;
data = “”;
user = {“YOUR_DEVICE_TOKEN”:""+data.registrationId};
console.log(JSON.stringify(user));
this.http.post(‘http://192.168.1.39:8081/controler/ionic2notification’, user)
.map(res => res.json())
.subscribe( obj => {
console.log(JSON.stringify(obj)) ,
this.data = obj;
alert(this.data.status)
},
error => {
alert("network error")
//console.log(JSON.stringify(error.json()));
return false;
})
