How do I receive APNS silent push message payload in a web page on safari

I am trying to implement Safari Web Push using the document to setup APNS and receive silent push messages on a react app on Safari browser.

At this point, I have added an endpoint to get push packages on calling window.safari.requestPermission. This prompts the user to enable notification and grants the permission and returns with a device token.

I have a server-side node script implemented using node-apn to send a silent push message to the client using a device token. The send function resolves with a successful response.

Sample message packet that I am sending via APNS:

{
  "aps": {
    "content-available": 1
  },
  "customData": "custom data",
  "topic": "web.push.ID"
}

I am expecting the payload to be delivered to the client through an event. I am trying this with the below function on the web page.

window.addEventListener('push', function (event) {
    if (event && event.push) {
        const payload = event.push;
        console.log('safari received payload in window.addEventListener:', payload);
    }
});

However, I do not see any message coming to the client.

Can someone please point me to what I am missing here? Thanks a lot for your help in advance.

How do I receive APNS silent push message payload in a web page on safari
 
 
Q