I have implemented web psuh notification using FCM. Its working fine at backend. At frontend angular5, I have used service worker to fetch that push notifications. At that function its enter only one time but sometime shows 2 notifications one with icon and other without it.
function showNotification(title, options) {
var notificationOptions = {
'tag': options.tag,
'badge': 'assets/icons/icon-128x128.png',
'icon': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/images/logos/logo-icon.png',
'vibrate': [300, 100, 200, 400, 500],
'data': options.data,
'body': options.body,
'sound': 'default'
};
if(options.data.type === 'media') {
notificationOptions.image = options.data.media;
} else {
notificationOptions.body = options.body;
}
return self.registration.showNotification(title, notificationOptions);
}
I have searched for this bit not get any solution.
Advance thanks. Any help will be appreciated.
Related
I am integrating Huawei Push Kit (https://pub.dev/packages/huawei_push) in Flutter application.
I test to schedule a notification to notify every minutes in my Huawei phone, and I able to get the notification as expected. But when I tried to cancel the notification with clearNotification() function (shown below), the notification seem like not cancelled. Wondering do I miss out anything?
scheduleLocalNotification() async {
try {
Map<String, dynamic> localNotification = {
HMSLocalNotificationAttr.TITLE: 'Notification Title',
HMSLocalNotificationAttr.MESSAGE: 'Notification Message',
HMSLocalNotificationAttr.TICKER: "OptionalTicker",
HMSLocalNotificationAttr.TAG: "push-tag",
HMSLocalNotificationAttr.BIG_TEXT: 'This is a bigText',
HMSLocalNotificationAttr.SUB_TEXT: 'This is a subText',
HMSLocalNotificationAttr.LARGE_ICON: 'ic_launcher',
HMSLocalNotificationAttr.SMALL_ICON: 'ic_notification',
HMSLocalNotificationAttr.COLOR: "white",
HMSLocalNotificationAttr.VIBRATE: true,
HMSLocalNotificationAttr.VIBRATE_DURATION: 1000.0,
HMSLocalNotificationAttr.ONGOING: false,
HMSLocalNotificationAttr.DONT_NOTIFY_IN_FOREGROUND: false,
HMSLocalNotificationAttr.AUTO_CANCEL: false,
HMSLocalNotificationAttr.INVOKE_APP: false,
HMSLocalNotificationAttr.ACTIONS: ["Yes", "No"],
HMSLocalNotificationAttr.REPEAT_TYPE: RepeatType.MINUTE,
HMSLocalNotificationAttr.FIRE_DATE:
DateTime.now().add(Duration(minutes: 1)).millisecondsSinceEpoch,
};
Map<String, dynamic> response =
await Push.localNotificationSchedule(localNotification);
print("Scheduled a local notification: " + response.toString());
} catch (e) {
print("Error: " + e.toString());
}
}
clearNotification() async {
Push.cancelNotificationsWithTag('push-tag');
}
Currently, Huawei Push Kit does not support clearNotification() function. You can use the Sending Downlink Messages API. There is an auto_clear parameter, and you can set message display duration, in milliseconds. Messages are automatically deleted after the duration expires.
Please refer to the following code:
{
"validate_only": false,
"message": {
"android": {
"notification":{"body":"Big Boom Body！","click_action":{"type":3},"title":"Big Boom Title","auto_clear": 360000}
},
"token":[
"token1",
"token2"]
}
}
For more information, see docs
Your clearNotification function which calls Push.cancelNotificationWithTag('push-tag') is async.
Possibility is Push.cancelNotificationWithTag might get called before.
Either call it directly and not thru async function or add await.
I have created a PWA and implemented push notifications.
From what I understand notifications can be replaced using tag and behaviour controlled using renotify. Google documentation here.
This may be a good way to keep down the amount of displayed notifications, but is there a way to group notifications in a PWA?
In native apps I have noticed that notifications get "grouped" or "stacked" into one notification if there are more than a certain amount of notifications. Can this be achieved in a PWA?
Code for showing a push notification:
self.addEventListener('push', function (event){
console.log('Push Notification received', event)
const defaultData = {title: 'New!', content: 'Something new happened!', openUrl: '/'}
const data = (event.data) ? JSON.parse(event.data.text()) : defaultData
var options = {
body: data.content,
icon: '/img/ico/manifest-512.png',
badge: '/img/ico/badge96.png',
// tag: 'myTag',
// renotify: true,
data: {
url: data.openUrl
}
}
event.waitUntil(
self.registration.showNotification(data.title, options)
)
})
Kind regards /K
I have created firebase project for using Cloud Messaging . until now I have sent a message from backend to client successfully when the browser (chrome) is open but when I close the browser notification not sending until reopening of the browser in below code you can see my firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.0.4/firebase-messaging.js');
firebase.initializeApp({
messagingSenderId: "My-Sender-Id"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
var notificationTitle = 'Background Message Title';
var notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
self.addEventListener('push', function(e) {
var data;
if (e.data) {
data = JSON.parse(e.data.text()).data;
} else {
data = {};
}
var title = data.title;
var options = {
body: data.body,
icon: 'assets/custom/img/logo.png',
vibrate: [100, 50, 100],
requireInteraction: true,
data: data.data ? data.data : null,
dir: "rtl",
actions: [{
action: data.action,
title: 'open',
icon: 'images/checkmark.png'
},
{
action: 'close',
title: 'close',
icon: 'images/xmark.png'
},
]
};
e.waitUntil(
self.registration.showNotification(title, options)
);
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
if (event.action != "" && event.action != "close") {
return clients.openWindow(event.action);
}
});
how can I have notification even browser is closed?
I believe you are using service worker for FCM, and the service worker only works when the browser is open ,as service worker is responsible for handling the push notification, when the browser is closed you won't receive any push notification, Actually the push notification will appear only when the browser is opened ,or the application for which you have configured FCM is open on chrome tabs but not focused, there is one work around or you say solution for it , that is make sure the chrome browser is active in the background even after closing chrome browser.
There is option in chrome settings
Goto Settings -> Advanced -> Continue running background apps when Google Chrome is closed make sure you enable it
i have tested the code of FCM , after enabling the option you will get the notification popup.
What you are trying to achieve should be accomplished using a database like firestore. When a notification is received at the time when browser is closed, in the service worker, you should add the code to save the notification message in the firestore so that when user opens the website again, you can retrieve the messages from the firestore and can display them to user. As soon as the browser is opened, any pending notification would be saved to the database by service worker.
I believe this should be the preferred way to achieve this.
I implemented web push notifications using service worker. Now I am facing an issue. Suppose if I push 5 notifications to an endpoint(chrome browser) and assume the chrome process was not active during the push, then when I start the browser again, it is showing all the queued up notifications at once. How to prevent this scenario?
I tried with getNotifications function. But it is returning me empty notifications array. Following is my code.
self.addEventListener('push', function(event) {
if (!(self.Notification && self.Notification.permission === 'granted')) {
return;
}
var data = event.data.json();
var options = {
body: data.notificationText,
icon: 'files/assets/staff.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
onClickUrl: data.onClickUrl,
event_id: data.event_id,
productName: data.product_name
}
};
event.waitUntil(
self.registration.getNotifications().then(function(notifications) {
console.log(notifications);
if (notifications && notifications.length > 0) {
notifications.forEach(function(notification) {
notification.close();
});
}
showNotification(data.title, options);
})
);
});
I am trying to set up push notifications with strongloop. I don't understand which file the code below lives in. The docs don't say, which is confusing for newbies.
I understand that I have to add a push component to loopback restful api application, which I have done. But how do I reference the push component from my restful api app? Where's the 'glue'?
http://docs.strongloop.com/display/public/LB/Push+notifications
var badge = 1;
app.post('/notify/:id', function (req, res, next) {
var note = new Notification({
expirationInterval: 3600, // Expires 1 hour from now.
badge: badge++,
sound: 'ping.aiff',
alert: '\uD83D\uDCE7 \u2709 ' + 'Hello',
messageFrom: 'Ray'
});
PushModel.notifyById(req.params.id, note, function(err) {
if (err) {
// let the default error handling middleware
// report the error in an appropriate way
return next(err);
}
console.log('pushing notification to %j', req.params.id);
res.send(200, 'OK');
});
});
This should live in the app.js file as seen in the example here:
https://github.com/strongloop/loopback-component-push/blob/master/example/server/app.js#L137-L145