Firebase Cloud Messaging Requireinteraction Not Work

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

Solution 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 herereturn 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"