Firebase Cloud Messaging requireInteraction not work

Question

Reference: https://github.com/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.com",
    "data" : {"requireInteraction": true  }
 },
  "to": "[...]",
}' "https://fcm.googleapis.com/fcm/send"

Answer 1

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.com/fcm/send"