Web push on iOS is a new thing announced earlier this year. Upon reading and seeing examples of the implementation it made me believe it is fully supported. When I tried implementing my self I was only able to make it work on the frontend side, but sending the push notification from the backend (PHP) didn't work for iOS only, while on MacOS Chrome, Android Chrome and Samsung Internet it worked as expected.

I followed this simple guide on implementing it on the frontend. For storing subscriptions to my database and sending notifications from the backend I used this Symfony package.

On the frontend side I:

• registered a service worked;
• requested a "notifications" permission;
• when granted - sent the subsription to backend to store it;

Here is my script:

import convertVapidKey from 'convert-vapid-public-key';

window.addEventListener('load', async () => {
  // 1. Register ServiceWorker
  if (!('serviceWorker' in navigator)) {
    console.warn('[Service Worker] Service Worker is not available for your device or environment!');
    return;
  }

  let registration;

  try {
    registration = await navigator.serviceWorker.register(window.serviceWorkerPath, {
      scope: '/'
    });
    console.info('[Service Worker] Registration succeeded:', registration);
  } catch (error) {
    console.warn('[Service Worker] Registration failed:', error);
    return;
  }

  // 2. Subscribe to Notifications
  if (
    !window.webpushServerKey ||
    !('Notification' in window) ||
    !('PushManager' in window)
  ) {
    console.warn('[WebPush Client] Web push is not available for your device or environment!');
    return;
  }

  try {
    if (await Notification.requestPermission() === 'granted') {
      await subscribe();
      await registration.showNotification('Congratulations! ?', {
        body: 'You have subscribed to the notifications successfully! ?'
      });
    }
  } catch (error) {
    console.warn('[WebPush Client] Subscription failed:', error);
  }

  async function subscribe() {
    try {
      // Subscribe on client
      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: convertVapidKey(window.webpushServerKey)
      });

      // Store subscription
      await fetch('/webpush/', {
        method: 'POST',
        mode: 'cors',
        credentials: 'include',
        cache: 'default',
        headers: new Headers({
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }),
        body: JSON.stringify({ subscription })
      });

      console.info('[WebPush Client] Subscription succeeded:', subscription);
    } catch (error) {
      console.warn('[WebPush Client] Subscription failed:', error);
    }
  }
});

Now when user on any device (even in iOS Safari web-app) enters the website, they are prompted with the notifications permission confirmation and once confirmed, they successfully get the "congratulations" notification sent from the frontend.

I also added a push event listener to the service worker to receive push notifications sent from the backend at any time of the day even when the website is not being currently used.

// sw.js
self.addEventListener('push', event => {
  try {
    const json = event.data.json();
    const title = json.title || '';
    const options = json.options || {};
    console.info('[Service Worker] Push event received with:', json);
    event.waitUntil(self.registration.showNotification(title, options));
  } catch (error) {
    console.warn('[Service Worker] Push notification failed:', error);
  }
});

For some reason, whenever I push the notification from the backend, on all devices the push listener is executed except on iOS Safari web app...

/** @var \BenTools\WebPushBundle\Sender\PushMessageSender */
protected $sender;

// ...

$message = new \BenTools\WebPushBundle\Model\Message\PushNotification($title, [
  PushNotification::BODY => $notification->getBody(),
  //...
]);
$this->sender->push($notification->createMessage(), $subscriptions);

I started searching why and noticed that, despite endless examples on the internet using service worker push event, in the browser support table it states that the event is not yet supported on iOS Safari. Am I doing something wrong in my code? Is there other way to achieve it for iOS than push event if it's not supported?

P.S. I have Notifications, Push API and Service Workers enabled in the Safari's Experimental Features settings.