I'm building an offline/installable Progressive Web App (PWA) with a Firebase Cloud Messaging (FCM) backend.
Is it possible to generate an Android push notification with 2 buttons for an installed PWA? Here is an example:
Yes, this is possible over the new FCM REST API:
https://firebase.googleblog.com/2018/05/web-notifications-api-support-now.html
Payload Example:
{
"message": {
"webpush": {
"notification": {
"title": "Fish Photos 🐟",
"body":
"Thanks for signing up for Fish Photos! You now will receive fun daily photos of fish!",
"icon": "firebase-logo.png",
"image": "guppies.jpg",
"data": {
"notificationType": "fishPhoto",
"photoId": "123456"
},
"click_action": "https://example.com/fish_photos",
"actions": [
{
"title": "Like",
"action": "like",
"icon": "icons/heart.png"
},
{
"title": "Unsubscribe",
"action": "unsubscribe",
"icon": "icons/cross.png"
}
]
}
},
"token": "<APP_INSTANCE_REGISTRATION_TOKEN>"
}
}
Note that you will need to register callbacks for these custom actions in your service worker code, to handle whatever is supposed to happen when the user clicks on a custom button:
Service Worker:
// Retrieve an instance of Firebase Messaging so that it can handle background messages.
const messaging = firebase.messaging();
// Add an event listener to handle notification clicks
self.addEventListener('notificationclick', function(event) {
if (event.action === 'like') {
// Like button was clicked
const photoId = event.notification.data.photoId;
like(photoId);
}
else if (event.action === 'unsubscribe') {
// Unsubscribe button was clicked
const notificationType = event.notification.data.notificationType;
unsubscribe(notificationType);
}
event.notification.close();
});
Related
I'm using Firebase to send message across iOS & Android devices. I follow the document of google but it's still not working.
https://firebase.google.com/docs/cloud-messaging/concept-options
In the document, they gave an example
{
"message":{
"token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title":"Match update",
"body":"Arsenal goal in added time, score is now 3-0"
},
"android":{
"ttl":"86400s",
"notification"{
"click_action":"OPEN_ACTIVITY_1"
}
},
"apns": {
"headers": {
"apns-priority": "5",
},
"payload": {
"aps": {
"category": "NEW_MESSAGE_CATEGORY"
}
}
},
"webpush":{
"headers":{
"TTL":"86400"
}
}
}
}
and I replaced some placeholders of this example with my Firebase configurations then I ran Postman and it returned 400 bad Request
{
"message":{
"token":"dRnhMNngY02mofqQ-5no8K:APA91bEcaaZ3QBWTdZfN3hU1tJzy6_ChW4FMArXbbWvT-8wq11TDN2jLy7uaT-Wzjq_xAzPqZfVje5_n54pVLnCfUUPTp_EuS3CykGnysHO0BeJn0TEgP-czc_y2kdyVMW-39mlSh8-t",
"notification":{
"title":"Match update",
"body":"Arsenal goal in added time, score is now 3-0"
},
"android":{
"ttl":"86400s",
"notification": {
"click_action":"OPEN_ACTIVITY_1"
}
},
"apns": {
"headers": {
"apns-priority": "5"
},
"payload": {
"aps": {
"category": "NEW_MESSAGE_CATEGORY"
}
}
},
"webpush":{
"headers":{
"TTL":"86400"
}
}
}
}
But when I changed it. Set to & notification to the first level of json. My iOS device displayed a notification.
{
"to": "dRnhMNngY02mofqQ-5no8K:APA91bEcaaZ3QBWTdZfN3hU1tJzy6_ChW4FMArXbbWvT-8wq11TDN2jLy7uaT-Wzjq_xAzPqZfVje5_n54pVLnCfUUPTp_EuS3CykGnysHO0BeJn0TEgP-czc_y2kdyVMW-39mlSh8-t",
"notification": {
"title": "Match update",
"body": "Arsenal goal in added time, score is now 3-0"
}"message": {
"token": "dRnhMNngY02mofqQ-5no8K:APA91bEcaaZ3QBWTdZfN3hU1tJzy6_ChW4FMArXbbWvT-8wq11TDN2jLy7uaT-Wzjq_xAzPqZfVje5_n54pVLnCfUUPTp_EuS3CykGnysHO0BeJn0TEgP-czc_y2kdyVMW-39mlSh8-t",
"notification": {
"title": "Match update",
"body": "Arsenal goal in added time, score is now 3-0"
},
"android": {
"ttl": "86400s",
"notification": {
"click_action": "OPEN_ACTIVITY_1"
}
},
"apns": {
"headers": {
"apns-priority": "5"
},
"payload": {
"aps": {
"category": "NEW_MESSAGE_CATEGORY"
}
}
},
"webpush": {
"headers": {
"TTL": "86400"
}
}
}
}
I don't know why the example of Firebase from Google is not working? Moreover, I tried to send to my Android device, it said "InvalidRegistration" message but when I tested sending message in https://console.firebase.google.com -> Cloud Messaging -> Compose notification. I pasted the same token that I used to test Android and it worked...
Really confused?!
I found several articles and test but it did work for me. I just want to have a structure of json file to work for both iOS and Android (also need to send both type of message as: notification & data)
Can anyone help me to fix this issue?
Thank you a lot,
Just want to up this question and not to be missed
I have a mobile app built on Ionic 3, using Firebase and FCM plugin to send notifications.
I have 2 problems :
The badge never appears (tested on iOs and Android) (but the notifications are working normally)
When I click on the notification, I am re-directed to my application's home page. But I would like to be re-directed on a specific page of my application. Apparently, that should be specified by changing the "activity" on the "click_action" parameter, however my app doesn't have any activity.
Thanks for your help.
Here is my code :
sendNotif(){
this.postRequest()
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'key=xxxxx:xxxx')
let options = new RequestOptions({ headers: headers });
let postParams = {
"notification": {
"title": "Mon-appli",
"body": "Nouvelle réservation",
"sound": "default",
"click_action": "FCM_PLUGIN_ACTIVITY",
"icon": "fcm_push_icon"
},
"data": {
"param1": "value1",
"param2": "value2"
},
"to": "/topics/all",
"priority": "high",
"restricted_package_name": ""
}
this.http.post("https://fcm.googleapis.com/fcm/send", postParams, options)
.subscribe(data => {
this.nb_notif = this.nb_notif +1;
}, error => {});
}
I ended up here because I have the same problem with badge as you. But I think that I can answer your number 2 problem:
The redirection has nothing to do with your notification set-up. You'll need to unsubscribe from the authentication observer.
So unsubscribe in app.component.ts from the listener as follow:
const authUnsubscribe = afAuth.authState.subscribe( user => {
if (user) {
authUnsubscribe.unsubscribe();
this.rootPage = 'HomePage';
}
else{
this.rootPage = 'LoginPage';
}
});
And for question number 1:
You'll have to add badge:1 in your notification:{..} description.
"notification": {
"title": "Mon-appli",
"body": "Nouvelle réservation",
"sound": "default",
"click_action": "FCM_PLUGIN_ACTIVITY",
"icon": "fcm_push_icon",
"badge":1
}
I am sending a push token to a specific device via the FCM API on testing with Postman, but I intend to send them from the server.
{
"to" : "my_device_token",
"notification" : {
"notificationTitle" :"test from server",
"notificationBody" :"test lorem ipsum"
}
}
I am receiving the response
{
"multicast_id": 4996861050764876123,
"success": 1,
"failure": 0,
"canonical_ids": 0,
"results":
[
{
"message_id": "0:1519567530487886%f95ee7d4f95ee123"
}
]
}
Which shows no error, however I don't get any notifications on my phone.
I tried the same device token using on firebase website "Notifications => New Message => Single Device", and it works.
I see threads about not receiving the notifications when the app is not running, however I don't get any even if the app is running.
Edit: My application is built using Xamarin.Android, if relevant.
The notification property keys are title and body:
{
"to" : "my_device_token",
"notification" : {
"title" :"test from server",
"body" :"test lorem ipsum"
}
}
See Table 2b in the documentation.
I am sending push in a single devices using via FCM api. The JSON is given below.
In the case of Android
{
"to" : "device Tokens", // Your android device token
"data" :
{
"body" : "test",
"title" : "test",
"pushtype" : "events",
};
In the case of IOS json
{
"to" : "device Tokens", // iphone tokens
"data" :
{
"body" : "test",
"title" : "test",
"pushtype" :"events",
},
"notification" : {
"body" : "test",
"content_available" : true,
"priority" "high",
"title" = "C#"
}
} ;
put in index.js
PushNotification.configure({
onNotification: function (notification) {
console.log("NOTIFICATION:", notification);
},
requestPermissions: Platform.OS === 'ios'
})
in your screen
createChannels =()=>{
PushNotification.createChannel(
{
channelId:"test-channel",
channelName:"Test-channel"
}
)
}
handleNotification=()=>{
PushNotification.localNotification({
channelId:"test-channel",
title:"Kinza ",
message: "hi gow adww biy",
});
PushNotification.localNotificationSchedule({
channelId: "test-channel",
title:"Alram",
message:"Hi how are you",
date: new Date(Date.now() + 20*1000),
allowWhileIdle:'true',
});
}
We are implementing FCM in our iOS, Android and web apps and saw that the documentation speaks about sending different values to different OS types via ApnsConfig, WebpushConfig and AndroidConfig objects (https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages)
We tried all kinds of variations but we just can't get this to work. Does anybody know what we are doing wrong? Here is a example of how we try to send something:
{
"notification" : {
"title" :"Title",
"body": "Body",
}
"data" : {
"all_devices_key" : "all_devices_value",
}
"content_available": true,
"to": "...",
"apns": {
"headers": {
"ios_only_key": "ios_only_value",
},
}
}
We also tried the payload and other combinations in the apns like the following but nothing ever comes through.
"apns": {
"payload": {
"ios_only_key": "ios_only_value",
"aps" : {
"alert" : {
"title" : "Game Request",
"body" : "Bob wants to play poker",
"action-loc-key" : "PLAY"
},
"badge" : 5
},
"acme1" : "bar",
"acme2" : [ "bang", "whiz" ]
},
}
Are we misunderstanding the documentation? How can we send specific key-value-pairs to only iOS or Android or Web?
I have a Cordova app, using the push plugin.
On the server I am sending the GCM messages with node-gcm.
I receive notifications just fine, for iOS and Android, and they open the app when clicked, however on Android the 'notification' event does not fire.
push.on('notification', function(data) {
console.log(data);
alert('got PUSH!');
});
If the app is running in the foreground then I get the 'got PUSH!' alert, but when the app is in the background and I click the push notification when it arrives, it opens the app but does not alert 'got PUSH!'.
How can I get the 'notification' event to fire after the app opens?
Here is the gcm Message I am sending to the device:
{
"params": {
"notification": {
"title": "SO post demo",
"body": "THIS IS A TEST!",
"icon": "ic_launcher",
"sound": true
}
}
}
I believe that I need to have something in the notification payload to solve this, but nothing I have tried gets that event to fire when the app opens from the background.
Here are a couple of things that I have tried:
Using "content-available" (as suggested here), using message.addData:
{
"params": {
"notification": {
"title": "SO post demo",
"body": "THIS IS A TEST!",
"icon": "ic_launcher",
"sound": true
},
"data": {
"info": "super secret info",
"content-available": "1"
}
}
}
Same again, but putting my params in the json I use to make the Message:
{
"params": {
"notification": {
"title": "SO post demo",
"body": "THIS IS A TEST!",
"icon": "ic_launcher",
"sound": true,
"info": "super secret info",
"content-available": "1"
}
}
}
In methodically creating this question I found the answer.
I needed my payload to look like this:
{
"params": {
"data": {
"title": "SO post demo",
"body": "THIS IS A TEST!",
"icon": "ic_launcher",
"sound": true
}
}
}
This messes up the notification icon that displays (it is a zoomed in version) but, at this stage, I can live with that.