I am trying to implement push notifications in Ionic V1 using $cordovaPushV5 but I am not able to get to work. I am able to get the device registration ID but when I test notifications using Firebase Cloud Messaging, it doesnt work. Below is app.js code -
// ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
var app = angular.module('starter', ['ionic', 'ngCordova'])
.run(function ($ionicPlatform, $cordovaPushV5, $rootScope, $cordovaLocalNotification) {
$ionicPlatform.ready(function () {
// hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
window.StatusBar.styleLightContent();
}
console.log('app.js');
var options = {
android: {
senderID: "981686413111"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
$cordovaPushV5.initialize(options).then(function (result) {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function (registrationId) {
// save `registrationId` somewhere;
console.log(registrationId);
localStorage.setItem('deviceID', registrationId);
}, function (err) {
console.log(err);
});
});
$rootScope.$on('$cordovaPushV5:notificationReceived', function (event, data) {
console.log(data);
});
$rootScope.$on('$cordovaPushV5:errorOccurred', function (event, error) {
console.log("notification error occured");
console.log("event object: ", event);
console.log("error object: ", error);
});
$cordovaPushV5.finish().then(function (result) {
// OK finished - works only with the dev-next version of pushV5.js in ngCordova as of February 8, 2016
}, function (err) {
// handle error
console.log('finish error');
});
//$cordovaPushV5.unregister();
});
});
//# sourceMappingURL=app.js.map
Here is my screenshot of FCM history -
FCM History
I follow the following links to implement -
https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5
What am I missing ?
Related
I am making a ionic 3 app. I want notifications to appear even when app is in foreground. I have tried using FCM Plugin I'm getting notifications only when app is in background.
Home.ts
import { AngularFireDatabase } from 'angularfire2/database';
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import firebase from 'firebase';
declare var FCMPlugin;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
firestore = firebase.database().ref('/pushtokens');
firemsg = firebase.database().ref('/messages');
constructor(public navCtrl: NavController,public afd:AngularFireDatabase) {
this.tokensetup().then((token)=>{
this.storeToken(token);
})
}
ionViewDidLoad() {
FCMPlugin.onNotification(function (data) {
if (data.wasTapped) {
//Notification was received on device tray and tapped by the user.
alert(JSON.stringify(data));
} else {
//Notification was received in foreground. Maybe the user needs to be notified.
alert(JSON.stringify(data));
}
});
FCMPlugin.onTokenRefresh(function (token) {
alert(token);
});
}
tokensetup(){
var promise = new Promise((resolve,reject)=>{
FCMPlugin.getToken(function(token){
resolve(token);
},(err)=>{
reject(err);
});
})
return promise;
}
storeToken(token){
this.afd.list(this.firestore).push({
uid: firebase.auth().currentUser.uid,
devtoken: token
}).then(()=>{
alert('Token stored')
}).catch(()=>{
alert('Token not stored');
})
// this.afd.list(this.firemsg).push({
// sendername:'adirzoari',
// message: 'hello for checking'
// }).then(()=>{
// alert('Message stored');
// }).catch(()=>{
// alert('message not stored');
// })
}
}
the function cloud for notifications
var functions = require('firebase-functions');
var admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
var wrotedata;
exports.Pushtrigger = functions.database.ref('/messages/{messageId}').onWrite((event) => {
wrotedata = event.data.val();
admin.database().ref('/pushtokens').orderByChild('uid').once('value').then((alltokens) => {
var rawtokens = alltokens.val();
var tokens = [];
processtokens(rawtokens).then((processedtokens) => {
for (var token of processedtokens) {
tokens.push(token.devtoken);
}
var payload = {
"notification":{
"title":"From" + wrotedata.sendername,
"body":"Msg" + wrotedata.message,
"sound":"default",
},
"data":{
"sendername":wrotedata.sendername,
"message":wrotedata.message
}
}
return admin.messaging().sendToDevice(tokens, payload).then((response) => {
console.log('Pushed notifications');
}).catch((err) => {
console.log(err);
})
})
})
})
function processtokens(rawtokens) {
var promise = new Promise((resolve, reject) => {
var processedtokens = []
for (var token in rawtokens) {
processedtokens.push(rawtokens[token]);
}
resolve(processedtokens);
})
return promise;
}
it works only when the app in the background. but when i exit from the app and it's not in the background I don't get any notification.
You need to edit the FCM Plugin files. I found the solution only for android now.
I use https://github.com/fechanique/cordova-plugin-fcm this FCM plugin for android and ios in cordova.
You need to edit file MyFirebaseMessagingService.java line 53(line no be may be differ).
In this file there is a method onMessageReceived at the end of the method there is a line which is commented, this line calling an another method i.e. sendNotification(....).
sendNotification(remoteMessage.getNotification().getTitle(), remoteMessage.getNotification().getBody(), data);
You have to uncomment this line and change last parameter from remoteMessage.getData() to data (data variable is already there in the code).
And comment this line FCMPlugin.sendPushPayload( data );
Now you are good to go. Now you are able to receive notification even when app is opened (foreground), you will receive the banner (floating) notifications.
If you found anything for IOS please let me know!!!
I am using firebase plugin for ionic 3.
There is a check if notification data contain "notification_foreground" or not and save it in variable foregroundNotification.
if(data.containsKey("notification_foreground")){
foregroundNotification = true;
}
then it create showNotification variable which decide if we need to show notification or not and pass this to the sendMessage (show notification function).
if (!TextUtils.isEmpty(body) || !TextUtils.isEmpty(title) || (data != null && !data.isEmpty())) {
boolean showNotification = (FirebasePlugin.inBackground() || !FirebasePlugin.hasNotificationsCallback() || foregroundNotification) && (!TextUtils.isEmpty(body) || !TextUtils.isEmpty(title));
sendMessage(data, messageType, id, title, body, showNotification, sound, vibrate, light, color, icon, channelId, priority, visibility);
}
your payload should contain notification_foreground, notification_title and notification_body.
I am trying to figure out how to always check if the location service is enabled. By always I mean like a real-time checker. What I have now is only in one view. I am checking when the user signs in - if the location service is enabled, he signs in. However, if it's unenabled then an Alert dialog appears:
This is my function that checks if it's enabled:
checkLocation() {
this.diagnostic.isLocationEnabled().then(
(isAvailable) => {
console.log('Is available? ' + isAvailable);
if (isAvailable) {
this.navCtrl.setRoot(UserTypePage);
} else {
alert('Please turn on the location service');
if (this.autoLogin) {
this.autoLogin();
}
}
}).catch((e) => {
console.log(e);
alert(JSON.stringify(e));
});
}
I call this function when a user tries to sign in.
Example with Facebook sign in:
facebookLogin(): void {
this.global = ShareService.getInstance();
this.subscriptions.push(this.authProvider.loginWithFacebook().subscribe((user) => {
this.loading.dismiss().then(() => {
this.global.setUserName(user.displayName);
this.global.setProfilePicture(user.photoURL);
this.global.setUserId(this.authProvider.currentUserId);
this.tokenstore();
this.checkLocation(); //HERE
})
}, error => {
this.loading.dismiss().then(() => {
let alert = this.alertCtrl.create({
message: error.message,
buttons: [
{
text: "Ok",
role: 'cancel'
}
]
});
alert.present();
});
}, (err) => {
console.error("error: " + JSON.stringify(err));
}));
this.loading = this.loadingCtrl.create({
content: 'Signing in...'
});
this.loading.present();
}
I want this function to work in the whole application not just in the login view. How do I do that?
This is a classic scenario where Angular Dependency Injection will help you to reuse an existing method across components/views.
You can create a LocationCommonService in your application and define the method to check if Location service is enabled.
Now inject LocationCommonService in all the components where there is a need to call the required function.
I have implemented ionic push notification on my app for android. Push notification works well when app is not running(either is in background or not started), however, it does not get status bar notification(notification bar) or vibration that worked when running in background or not started at all.
$ionicPlatform.ready(function() {
localStorage.myPush = ''; // I use a localStorage variable to persist the token
var tokenID = '';
$cordovaPushV5.initialize( // important to initialize with the multidevice structure !!
{
android: {
senderID: "457390407561"
},
ios: {
alert: 'true',
badge: true,
sound: 'false',
clearBadge: true
},
windows: {}
}
).then(function (result) {
$cordovaPushV5.onNotification();
$cordovaPushV5.onError();
$cordovaPushV5.register().then(function (resultreg) {
localStorage.myPush = resultreg;
console.log(localStorage);
}, function (err) {
// handle error
});
});
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
console.log("notification received");
console.log(event);
console.log(data);
console.log(data.message);
console.log(data.title);
console.log(data.count);
console.log(data.sound);
if (data.additionalData.foreground === true) {
// do something if the app is in foreground while receiving to push - handle in app push handling
console.log("notification received in foreground");
}
else {
// handle push messages while app is in background or not started
console.log("notification received in background");
$state.go('app.orderlist');
}
});
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
Any advice or suggestion?
Thank you in advance.
You can add
forceShow: true
like below
$cordovaPushV5.initialize( // important to initialize with the multidevice structure !!
{
android: {
senderID: "xxxxxxxxx",
forceShow: true
},
ios: {
alert: 'true',
badge: true,
sound: 'false',
clearBadge: true,
},
windows: {}
}
)
I'm receiving notifications sent by FCM console even if the app is killed.
Here's my client code:
$ionicPlatform.ready(function() {
FCMPlugin.onNotification(
function(data){
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
alert( JSON.stringify(data) );
}else{
//Notification was received in foreground. Maybe the user needs to be notified.
alert( JSON.stringify(data) );
}
},
function(msg){
console.log('onNotification callback successfully registered: ' + msg);
},
function(err){
console.log('Error registering onNotification callback: ' + err);
}
);
})
The problem is the notification call back is not received. The log data is showing:
View not ready. SAVED NOTIFICATION: javascript:FCMPlugin.onNotificationReceived()
try to put FCMPlugin in
// Ionic Starter App
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordovaOauth'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
try{
FCMPlugin.onNotification(
function(data){
console.log('DATA ==>: '+data);
if(data.wasTapped){
//Notification was received on device tray and tapped by the user.
console.log('01');
console.log( JSON.stringify(data) );
}else{
//Notification was received in foreground. Maybe the user needs to be notified.
console.log('02');
//alert( JSON.stringify(data));
}
},
function(msg){
console.log('onNotification callback successfully registered: ' + msg);
},
function(err){
console.log('Error registering onNotification callback: ' + err);
}
);
}catch(e)
{
console.log('in login'+e)
}
});
})
I am trying to send my app's link form my website with a token in the link like this :
branch.link({
stage: 'new user',
data: {
token: 543322
}},
function(err, link) {
console.log(err, link);
});
then when the app is installed by user after clicking on the link, i want to get this token to register the user.
I tried by reading Branch.io docs and implementing it but it's not working.
Can somebody tell me an Example to how to make it work?
Code in my app controller is like this
(():void => {
'use strict';
angular
.module('xyz')
.controller('abc', abc);
function abc (
$window
) {
let vm = this;
$window.Branch.setDebug(true);
$window.Branch.initSession().then(function (res) {
console.log(res);
alert('Response: ' + JSON.stringify(res));
}).catch(function (err) {
console.error(err);
alert('Error: ' + JSON.stringify(err));
});
$window.Branch.getFirstReferringParams().then(function (res) {
// Success Callback
alert('res'+res);
}).catch(function (err) {
// Error Callback
alert('err'+err);
});
$window.Branch.getLatestReferringParams().then(function (res) {
// Success Callback
alert(res);
}).catch(function (err) {
// Error Callback
alert(err);
});
function DeepLinkHandler (data) {
alert('Data from initSession: ' + data.data);
}
$window.DeepLinkHandler = DeepLinkHandler;
})();
Alex from Branch here: there are three steps to this process:
1. Create the link
You're doing this already with the code you provided in your question.
2. Integrate the Branch SDK into your app
The docs page covering the steps for this is here: https://dev.branch.io/getting-started/sdk-integration-guide/guide/cordova/
3. Watch for the incoming link, and route it
The docs page covering what you need for this is here: https://dev.branch.io/getting-started/deep-link-routing/advanced/cordova/
Basically, it is a function that will look something like this:
function DeepLinkHandler(data) {
console.log("received data: " + JSON.stringify(data));
for (key in data) {
if ((key != "type" && key != "source" && key != "bubbles" && key != "cancelBubble") && data[key] != null) {
console.log(key + ": " + data["key"]);
}
}
if (data["token"]) {
// load the view to register the user based on your token
} else {
// load your normal view
}
}