PWA push notifications not engaged on iOS Safari (however engaged on android, internet, mac os safari)

I’ve NextJS PWA app and I configured it with VAPID and web-push (nodejs). The notification pops up on all different gadgets (android, internet, mac safari) however not on iphone with safari.

Additional particulars:

• I’ve tried two completely different telephones: not working
• iOS model: 17.4
• sure, i’ve added the PWA to my house display

The bizarre factor is that I do get the push occasion. So the employee.js is working tremendous. However the issue is when displaying the popup e.g. self.registration.showNotification. I’ve tried loads of issues and have been caught with this.

Did anybody else expertise this?

======== Code particulars beneath

That is how my subsequent.config.js is configured:

const isDev = course of.env.NODE_ENV === 'improvement'

const withPWA = require('next-pwa')( {
    dest: "public",
    sw: "sw.js",
    register: true,
    skipWaiting: true,
    disable: isDev
  });

const nextConfig = {
  reactStrictMode: true,
};

module.exports = withPWA(nextConfig);

How I am setting the VAPID particulars:

webpush.setVapidDetails(
        "mailto:[email protected]",
        vapidKeys.publicKey,
        vapidKeys.privateKey
    );

That is what my employee.js appears like:

self.addEventListener("push", async (e) => {
    attempt {
        const { message, physique, icon } = JSON.parse(e.information.textual content());

         // Notify the primary thread to play sound
        const purchasers = await self.purchasers.matchAll();
        purchasers.forEach(shopper => {
            shopper.postMessage({
                kind: 'PLAY_SOUND'
            });
        });

        e.waitUntil(
            self.registration.showNotification(message)
        );

       
    } catch (error) {
        // Ship error log to the primary thread
        self.purchasers.matchAll().then(purchasers => {
            purchasers.forEach(shopper => {
                shopper.postMessage({
                    kind: 'ERROR',
                    message: `Error in push occasion: ${error.message}`
                });
            });
        });
    }
});

self.addEventListener("notificationclick", (occasion) => {
    occasion.preventDefault()
    occasion.notification.shut();

    occasion.waitUntil(
        self.purchasers.matchAll({
            kind: "window",
        }).then((clientList) => {
            for (const shopper of clientList) {
                if (shopper.url === "/" && "focus" in shopper)
                    return shopper.focus();
            }
            if (purchasers.openWindow) return purchasers.openWindow("/");
        })
    );
});

I’ve tried on two completely different iphone gadgets. I’ve tried on android (works), tried on mac os (works).

I’ve tried to debug the Safari context on iOS. I can see that sw.js is loaded correctly and the console logs work (it even triggers a customized occasion I used to debug)

However I feel the issue lies with showNotification which I am unable to determine why.