CODEWITHSUNDEEP
javascriptpush-notificationfirebase-cloud-messaging
Laurent
Laurent

Reputation: 1563

FCM / How to handle foreground & background notifications?

I use the REST API from Firebase to send notifications to all browsers. I use PHP to send the message and handle the result with the service worker.

The problem I'm facing is that each time I send a notification, I get two notifications in the browser. One corresponds to the notification content send from PHP (foreground notification) and the other one is coming from the service worker (background notification).

While I understand the need for both, I would like to show only one depending on the context (context = browser open or not).

For the sending, I'm using the following array:

$additional["url1"]="https://www.orange.be";
$additional["url2"]="https://www.proximus.be";
$additional["url3"]="https://www.base.be";
$additional = json_encode($additional);
    
$fields = array(
        'to'=>$to,
        'notification' => [
        'title' => 'new title',
        'body' => 'aaa' ,
        'color' => "#FF33CC",
    'data'=>$additional
                
                ],

        "priority" => "high",

        );

And in the service worker, I have this:

messaging.onBackgroundMessage((payload) => {
//console.log('Messaging:');
//console.log(messaging); 
console.log('Payload:');
console.log(payload);

additional = payload.data["gcm.notification.data"];
console.log(additional)
additional = JSON.parse(additional);
console.log(additional);

const notificationTitle = payload.notification["title"]+'(bg)';
const notificationOptions = {
  body: payload.notification["body"],
  icon: '/firebase-logo.png'

};

self.registration.showNotification(notificationTitle,notificationOptions);
});

If I remove the last line (self.registration), I only receive the foreground notification coming from PHP.

How can I detect the context to use either the foreground or the background notification instead of both at the same time?

Thanks

Upvotes: 3

Views: 3151

Answers (2)

Laurent
Laurent

Reputation: 1563

I found a solution based on another post here. I removed the notification from the json and passed everything through variables:

$fields = array(
        'to'=> $to,
        
        'data'=> [
                    "title"=> "My title",
                    "description"=>"My description ",
                    "link"=>"destination link",
                    "badge"=>"image url",
                    "image"=>"image url"],


        "priority" => "high",

        );

And inside the service worker, I capture the data with payload.data and associate it to the notification options

messaging.onBackgroundMessage((payload) => {
console.log('Messaging / bg');
console.log(messaging); 
console.log('Payload:');
console.log(payload);

additional = payload.data;
console.log(additional)

timing = Date.now();
if (typeof additional["timing"] !=="undefined")
    {
        timing = additional["timing"];
    }
const notificationTitle =additional["title"]+'(bg)';
const notificationOptions = {
    body: additional["description"],
    icon: additional["image"],
    image: additional["image"],
    badge: additional["badge"],
    eventTime: timing,
};

// DISPLAY NOTIFICATION
self.registration.showNotification(notificationTitle,notificationOptions);});

Upvotes: 0

Ammar Rashad
Ammar Rashad

Reputation: 92

Messages received in background are handled using the onBackgroundMessage and for foreground onMessage.

Background Handler

messaging.onBackgroundMessage((payload) => {
  console.log('Background Message received. ', payload);
  // ...
});

Foreground Handler

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Upvotes: 2

Related Questions