Reference:

I have added the key-value pair:

"requireInteraction": true

But the notification in Desktop Chrome still disappear after 20 seconds. Does any one know if Firebase supports this key-value pair? Thanks!

My example below. Please change [...] to yours.

curl -X POST -H "Authorization: key=[...]" -H "Content-Type: application/json" -d '{
  "notification": {
    "requireInteraction": true,     
    "title": "This is custom title",
    "body": "this is custom body",
    "click_action": "",
    "data" : {"requireInteraction": true  }
 },
  "to": "[...]",
}' ""

Reference: https://github./firebase/quickstart-js/tree/master/messaging

I have added the key-value pair:

"requireInteraction": true

But the notification in Desktop Chrome still disappear after 20 seconds. Does any one know if Firebase supports this key-value pair? Thanks!

My example below. Please change [...] to yours.

curl -X POST -H "Authorization: key=[...]" -H "Content-Type: application/json" -d '{
  "notification": {
    "requireInteraction": true,     
    "title": "This is custom title",
    "body": "this is custom body",
    "click_action": "https://google.",
    "data" : {"requireInteraction": true  }
 },
  "to": "[...]",
}' "https://fcm.googleapis./fcm/send"

• javascript
• google-chrome
• firebase
• push-notification
• firebase-cloud-messaging

Share Improve this question Follow edited Apr 25, 2017 at 15:22 baao 73.4k1818 gold badges150150 silver badges207207 bronze badges asked Feb 6, 2017 at 8:52 Samuel LuiSamuel Lui 16911 gold badge22 silver badges1111 bronze badges 3

• Hi Samuel. I don't think that requireInteraction is something that you should be setting in your payload. It should just be declared when you're building the notification. If the question is about just being supported, then requireInteraction doesn't belong in a notification payload, but can exist in a data payload. :) – AL. Commented Feb 6, 2017 at 8:59
• @AL. I have tried to add requireInteraction: true in data payload or notification payload , but the notification popup in my chrome desktop still disappear after 20 seconds – Samuel Lui Commented Feb 6, 2017 at 9:05
• One of the popup in below demo will not be closed until user click it. googlechrome.github.io/samples/notifications/… – Samuel Lui Commented Feb 6, 2017 at 9:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Firebase strips the requireInteraction property from the notification payload when the message is delivered. The workaround that works is to use the data property instead of the notification. You can then use the setBackgroundMessageHandler() method to build the notification as you want it to be:

messaging.setBackgroundMessageHandler(function (payload) {
    return self.registration.showNotification(payload.data.title,
        Object.assign({data: payload.data}, payload.data));
});

I've set data above, because the click_action no longer works with this approach and you need to register the desired onclick handler yourself. Here's a working service worker that does exactly what you intend with your set notification, but uses the data property instead:

// import scripts omitted 

const messaging = firebase.messaging();
// [END initialize_firebase_in_sw]

self.addEventListener('notificationclick', e => {
    let found = false;
    let f = clients.matchAll({
        includeUncontrolled: true,
        type: 'window'
    })
        .then(function (clientList) {
            for (let i = 0; i < clientList.length; i ++) {
                if (clientList[i].url === e.notification.data.click_action) {
                    // We already have a window to use, focus it.
                    found = true;
                    clientList[i].focus();
                    break;
                }
            }
            if (! found) {
                clients.openWindow(e.notification.data.click_action).then(function (windowClient) {});
            }
        });
    e.notification.close();
    e.waitUntil(f);
});

// [START background_handler]
messaging.setBackgroundMessageHandler(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here

    return self.registration.showNotification(payload.data.title,
        Object.assign({data: payload.data}, payload.data));

});
// [END background_handler]

Where this would be your curl call:

curl -X POST -H "Authorization: key=yourKey-" -H "Content-Type: application/json" -d '{
"data": {
    "title": "fooTitle",
    "body": "foo",
    "icon": "image.jpg",
    "click_action": "http://localhost:8000",
    "requireInteraction": true
  },
  "registration_ids": ["id1", "id2"]
}' "https://fcm.googleapis./fcm/send"