We are developing an application using the Ionic Framework and would like to integrate push notifications. We are currently attempting to use the Cordova plugin cordova-plugin-firebase-messaging to handle notifications on Android and iOS. I can see that onMessage is being called when I send a notification but how do I make the notification actually display? At the moment I am just trying to log the response by using
this.fcm.onMessage()
.subscribe(payload => {
console.log(payload);
});
I guess you have this issue on iOS? If so then it's not a bug. You won't see any notification on iOS devices if the app is running in foreground.
From Apple: If you receive local or remote notifications while your app is running
in the foreground, you’re responsible for passing the information to
your users in an app-specific way
Using Ionic, you can make easy popups with either AlertController
import { AlertController } from 'ionic-angular';
constructor(private alertCtrl: AlertController) {
}
presentAlert() {
let alert = this.alertCtrl.create({
title: 'Low battery',
subTitle: '10% of battery remaining',
buttons: ['Dismiss']
});
alert.present();
}
Or toastController
import { ToastController } from 'ionic-angular';
constructor(private toastCtrl: ToastController) {
}
presentToast() {
let toast = this.toastCtrl.create({
message: 'User was added successfully',
duration: 3000,
position: 'top'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
Related
We have 2 Android apps in one Firebase project container, the first app has FCM implementation on Cloud Function and it works well, but the second app will received this notification as well so using restricted_package_name in messaging option is what we are looking for. However the question is, do we need to update the app as well or just the function in Cloud Function? Thus everything related to filtering of push notif. will be handled by its API and all we need is to provide the package name for the target app.
According to documentation of restrictedPackageName
The package name of the application which the registration tokens must match in order to receive the message.
Do we need to handle token as well? Do we need to update the code in the app or just add the option in the function with NodeJs?
const options = { priority: 'high' };
exports.announcement = functions.firestore.document("Announcement/{doc_id}").onCreate((added) => {
const title = added.data().title;
const description = added.data().description;
const bigImage = added.data().bigImage;
const link = added.data().link;
const environment = added.data().environment;
const payload = {
data: {
title: title,
description: description,
bigImage: bigImage,
link: link,
environment: environment,
}
};
return admin.messaging().sendToTopic("Announcement", payload, options)
.then(val => {
console.log("Success!\n" + JSON.stringify(payload), val);
return true;
})
.catch(error => {
console.error("Failed to send notification.", error);
return true;
});
});
From Firebase side it is not recommended to use same project for 2 different applications, which was also mentioned in this blog. If you want to use restricted_package_name you need to update the code so that the object sends it in notification. You can find a small example here.
I just learned about notifications in the expo, now I have successfully sent notifications and I have also managed to get data from the notifications I sent, the problem is, if the application is in background or foreground, addNotificationResponseReceivedListener is working properly (redirect to another page), but if I close the application, and I receive a notification, then I press the notification, the application opens but the addNotificationResponseReceivedListener function is not running, I try this in a standalone application
what i’m using:
“expo”: “~40.0.0”,
“expo-notifications”: “^0.9.0”,
here’s my example code in Home.js:
componentDidMount() {
//another code..
Notifications.addNotificationResponseReceivedListener(
this._handleNotificationResponse
);
}
_handleNotificationResponse = (response) => {
console.log(
"CONSOLE FROM NOTIF: " +
JSON.stringify(response.notification.request.content.data.from)
);
if (response.notification.request.content.data.from== "GEMASS") {
this.props.navigation.navigate("goToPage", {
//another code...
});
} else {
}
};
here’s my file tree:
App.js
Components
- Home.js
and here’s my terminal looks like when i run on expo client:
clickme
can you guys help me? it means a lot :)
I am using expo react native on a project and I am using the expo-notifications package within the project.
I have added "useNextNotificationsApi": true, to my app.json file
under the android object which is under the expo object so expo.android.useNextNotificationsApi : true.
I also have the experienceId set on the message I am sending to expo's server from my server, I am using the https://github.com/expo/expo-server-sdk-node package to do the sending.
messages.push({
to: red_user.fcm_token,
sound: 'default',
title: "Stylist Response",
body: "Stylist has agreed to fulfill the request",
data: {
experienceId: "#glamcentralng/GlamCentral",
order: order._id,
stylist_response: "agreed"
},
})
In my expo react native app I am using the expo-notifications package as I mentioned and I have the following setup in my class component.
import * as Notifications from 'expo-notifications';
.
.
.
.
componentDidMount() {
//Not working at all
Notifications.addNotificationReceivedListener( notification => {
console.log(notification);
this._handleNotification(notification)
});
//Working well
Notifications.addNotificationResponseReceivedListener(response => {
console.log(response);
});
this.registerForPushNotificationsAsyncNew();
}
The addNotificationReceivedListener does not receive the notification when it comes in, but I see it as a normal notification on my real Android device (I am NOT using an emulator). AS per the documentation when i click on the notification the addNotificationResponseReceivedListener should handle it and it does. So addNotificationReceivedListener does NOT work but addNotificationResponseReceivedListener works well.
One more thing to add is that I am getting a token in the function that does the registration as per the documentation.
Not sure how to fix this as I have checked other threads on here and github. Any help is appreciated.
I have an Ionic 3 App that needs to use Force Update to all users of the App. I used this package called Ionic App Update. I created an small express server that will just serve the client for an updates.
Here is my code in my update.xml in the server or backend
<update>
<version>0.0.2</version>
<name>MyApp</name>
<url>http://192.168.214.27:3346/public/android-debug.apk</url>
</update>
and in my server.js
const express = require('express')
const app = express()
app.use('/public', express.static('public'))
app.get('/', (req, res) => {
shell.exec('./update.sh')
})
app.listen(3336, () => {})
The server is working fine there is no errors
But when I try to call the function of the App Update plugin the device crashes every time.
Here is my code in my app.component.ts
constructor() {
this.update()
}
update() {
console.log('Update check')
const updateUrl = 'http://192.168.214.27:3346/public/update.xml';
this.appUpdate.checkAppUpdate(updateUrl).then(() => { console.log('Update available') }).catch(err => {
console.log(err)
console.log('No update')
});
}
I am calling the update function every time the app component constructor is initialize.
But when I call the function the app crashes
Is this more of an android version issue or what?
Appreciate if someone could help.
Thanks in advance.
This line <version>0.0.2</version> seems to be the problem. This isn't the format for android version numbers. As per cordova's documentation it is
Expressed in major/minor/patch notation.
For example version 30.20.48 would be written as 302048.
Read More:
config.xml - https://cordova.apache.org/docs/en/latest/config_ref/
Android Platform Guide - https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-the-version-code
I'm trying to get an ionic App to get the notification badges on launch app icon.
As far as I have seen, it isn't possible if the ionic app is closed (not in background) so, anyone know if it's possible to create an android service that i always running on background and syncing my ionic app, making the update of the icon badge?
Thank you in advance
Since #Shiben asked, this is what I did to solve it.
Install cordova-plugin-firebase
Go to https://firebase.google.com and create your firebase project (see a guide for the configurations)
-In your app.component.ts do something like:
export class MyApp {
rootPage:any = HomePage;
firebase : any;
constructor(public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
private _firebase: Firebase,
public alertCtrl: AlertController) {
platform.ready().then(() => {
(your things)
this.firebase = _firebase;
this.initFirebase();
this.firebase.setBadgeNumber(0);
});
}
And this was my initFirebase():
initFirebase(){
this.firebase.grantPermission();
this.firebase.onTokenRefresh()
.subscribe((token: string) => localStorage.setItem("pushToken", token))
this.firebase.onNotificationOpen()
.subscribe((notification) => {
let alert = this.alertCtrl.create({
title: 'New Notification',
subTitle: "Your notification",
buttons:['OK']
});
alert.present();
});
}
-In yor index.html insert something like this (You got it from firebase)
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "your key",
authDomain: "your domain",
databaseURL: "your url",
projectId: "your projid",
storageBucket: "your storagebucket",
messagingSenderId: "your messageid"
};
firebase.initializeApp(config);
</script>
I did this a long time ago and something might be change. This can be deprecated or not be the best practices, however, I hope it can get your in the right direction.