Issue with PWA Push Notifications: Unable to Redirect to Specified URL on iOS

Hey @vansegena, I'm experiencing the exact same issue. And I don't have a solution.

I even have a similar context: I'm trying to open a /chats/some-id page in my PWA. I tried both with a relative path (/chat/some-id) and with an absolute path (https://mysite.org/chat/some-id), both to no avail.

I observed:

• A. If the PWA is still open in the background (just went recently out of focus when switching apps, without explicitly closing it), then it opens the page that the client was previously on as-is, aka, it doesn't load anything new.
• B. If the PWA was explicitly closed, the PWA root web URL loads (as you also describe).

I'm primarily trying to use Web Push with Firebase Cloud Messaging. Their JS SDK also calls clients.openWindow() internally, after trying to client.focus() any active tab with the same matching host. I thought that was the reason for issue A, but it probably doesn't explain issue B. Regardless, I've tried to hook into clients.openWindow in my own notificationclick listener (dodging this Firebase issue first), and the problematic behavior remains the same.

I'm hopeful there is still something that we're doing wrong. If this is not supported by Safari, it's another party ****** for Web Push on iOS. It's already non-trivial to explain to our users how to enable Web Push, since it requires a manual PWA/"Add to Home Screen" procedure. Getting this confusing UX on top when tapping a notification doesn't help.

Any updates on this? Experiencing the same issue

Same here. iOS 17.1

Same here. iOS 17.2

I have the same issue on 17.2.1, specifically on iPhone 13, not iPhone 12.

I was having the same issue, then I try putting event.preventDefault() and worked. My notificationclick event looked like this: self.addEventListener("notificationclick", (event) => { event.preventDefault();

let distUrl = self.location.origin + "/specific-path"; const apntId = event.notification.data?.apntId; if (apntId) distUrl = self.location.origin + "/other-path/" + apntId;

event.notification.close();

event.waitUntil( self.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clients) => { if (clients.length > 0) { const client = clients[0]; client.navigate(distUrl); client.focus(); return; } else event.waitUntil(self.clients.openWindow(distUrl)); }) ); });

I was having the same issue, then I try putting event.preventDefault() and worked. My notificationclick event looked like this:

self.addEventListener("notificationclick", (event) => {
  event.preventDefault();

  let distUrl = self.location.origin + "/specific-path";
  const apntId = event.notification.data?.apntId;
  if (apntId) distUrl = self.location.origin + "/other-path/" + apntId;

  event.notification.close();

  event.waitUntil(
    self.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clients) => {
      if (clients.length > 0) {
        const client = clients[0];
        client.navigate(distUrl);
        client.focus();
        return;
      } else event.waitUntil(self.clients.openWindow(distUrl));
    })
  );
});