Following code is to configure Firebase for push notification service,
Below code checks for firebase messaging supported, if it is supported the it will assign public key to firebase messaging and when push notification receives in desktop browser or in mobile browser using messaging.onmessage code below,
if (firebase.messaging.isSupported()) {
// [START get_messaging_object]
// Retrieve Firebase Messaging object.
messaging = firebase.messaging();
// [END get_messaging_object]
// [START set_public_vapid_key]
// Add the public key generated from the console here.
//messaging.usePublicVapidKey(pnfpb_ajax_object_push.publicKey);
// [END set_public_vapid_key]
// IDs of divs that display Instance ID token UI or request permission UI.
const tokenDivId = 'token_div';
const permissionDivId = 'permission_div';
// [START refresh_token]
// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
messaging.getToken({serviceWorkerRegistration: registration, vapidKey:pnfpb_ajax_object_push.publicKey }).then((refreshedToken) => {
//console.log('Token refreshed.');
// Indicate that the new Instance ID token has not yet been sent to the
// app server.
setTokenSentToServer(false);
// Send Instance ID token to app server.
sendTokenToServer(refreshedToken);
// [START_EXCLUDE]
// Display new Instance ID token and clear UI of all previous messages.
//resetUI();
// [END_EXCLUDE]
}).catch((err) => {
console.log('Unable to retrieve refreshed token ', err);
showToken('Unable to retrieve refreshed token ', err);
// alert('Unable to retrieve refreshed token from cloud messaging service '+err);
});
});
// [END refresh_token]
// [START receive_message]
// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
// <code>messaging.setBackgroundMessageHandler</code> handler.
messaging.onMessage((payload) => {
//console.log('Foreground push Message received. ', payload);
// [START_EXCLUDE]
// Update the UI to include the received message.
//appendMessage(payload);
//alert(payload.notification.click_action);
const notification_foreground = payload.notification;
// Customize notification here
const notificationTitle = notification_foreground.title;
const notificationOptions = {
body: notification_foreground.body,
icon: notification_foreground.icon,
image: notification_foreground.image,
data: {
url: notification_foreground.click_action
},
tag: 'renotify',
renotify: true
};
var notificationclickurl = payload.notification.click_action;
if (!("Notification" in window)) {
console.log("This browser does not support system notifications");
}
// Let's check whether notification permissions have already been granted
else
{
if (Notification.permission === "granted") {
// If it's okay let's create a notification
try {
//console.log(notification_foreground.click_action);
var notification = new Notification(notificationTitle, {
body: notification_foreground.body,
icon: notification_foreground.icon,
image: notification_foreground.image,
data: {
url: notification_foreground.click_action
}
});
notification.onclick = function(event) {
event.preventDefault(); //prevent the browser from focusing the Notification's tab
window.open(notificationclickurl, '_blank');
notification.close();
}
} catch (err) {
try { //Need this part as on Android we can only display notifications thru the serviceworker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(homeurl+'/pnfpb_icpush_pwa_sw.js',{scope:homeurl+'/'}).then(function(registration) {
registration.showNotification(notificationTitle, notificationOptions);
}).catch(function(err) {
console.log("Service Worker Failed to Register foreground notification", err);
})
}
else
{
console.log('service workers not supported in this browser !!!');
}
} catch (err1) {
console.log(err1.message);
}
}
}
}
// [END_EXCLUDE]
})
}
else
{
console.log('This browser does not support PUSHAPI Firebase messaging!!!')
}
.
