Bug 259212 – clients.openWindow() not opening PWA home screen on iOS and macOS

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: WebKit API

[Giorgi]

Overview: 
When invoking the clients.openWindow(relative_url) function within a service worker, the expected behavior on iOS should be to open the PWA with that url, allowing users to interact with the app as if it were installed natively. However, on iOS devices, it just opens PWA without redirecting to that url.

Additionally, on macOS systems, calling clients.openWindow(relative_url) also fails to achieve the desired outcome. It appears that the method has no effect.

here is the code snippet I have in service worker: 
self.addEventListener('push', (event) => {
  const notification = JSON.parse(event.data.text());
  const title = notification?.notification?.title;
  const body = notification?.notification?.body;
  const data = notification?.data;
  const options = {
    body,
    data,
    badge: notification.notification.badge || '',
    vibrate: [100, 50, 100],
    actions: [
      {
        action: onNotificationAction(notification['data']),
        title: notification.notification.title,
      },
    ],
  };
  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', async (event) => {
  const notification = event?.notification;
  event.notification.close();

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true, userVisibleOnly: true }).then(function (clientList) {
      // Check if the PWA is already open and focus on it
      for (let i = 0; i < clientList.length; i++) {
        let client = clientList[i];
        if ('url' in client && client.url.includes(onNotificationAction(notification.data)) && 'focus' in client)
          return client.focus();
      }

      // Open a new window with the provided URL
      if (clients.openWindow) {
        clients.openWindow(onNotificationAction(notification.data));
      }
    }),
  );
});

in this case onNotificationAction(notification.data) method returns '/messages'.


1) Upgrade iOS to 16.5.1

2) Open the following experimental features of Safari:
  a) Notifications
  b) Push API

3) Make a web app and add it to the Home Screen

4) Register Service Worker and handle the events

In the service worker:

self.addEventListener('push', (event) => {
  const notification = JSON.parse(event.data.text());
  const title = notification?.notification?.title;
  const body = notification?.notification?.body;
  const data = notification?.data;
  const options = {
    body,
    data,
    badge: notification.notification.badge || '',
    vibrate: [100, 50, 100],
    actions: [
      {
        action: '/messages',
        title: notification.notification.title,
      },
    ],
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', async (event) => {
  const notification = event?.notification;
  event.notification.close();

  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true, userVisibleOnly: true }).then(function (clientList) {
      for (let i = 0; i < clientList.length; i++) {
        let client = clientList[i];
        if ('url' in client && client.url.includes(onNotificationAction(notification.data)) && 'focus' in client)
          return client.focus();
      }

      if (clients.openWindow) {
        clients.openWindow(onNotificationAction('/messages'));
      }
    }),
  );
});

5) Close the Home Screen web app.

6) Click the notification.

Actual Results:

PWA is opened on home page and not redirecting it at the relative url.

Expected Results:

PWA is opened on provided relative url.

Build Date & Hardware:

iOS 16.5.1 (20F75)

Additional Builds and Platforms:

iPhone 14 Pro

Additional Information:

I have tested that on android and desktop chrome both works as expected.

[Jesper Bendtsen]

I have the same problem. There must be something wrong, it just opens the installed app! I tried a lot of combinations similar to your implementation.

Tested on iPhone iOS 16.6 and iPad iOS 16.6. When the app is closed, in the background and foreground.

The last thing I've experienced is super weird and doesn't make sense:

I copied the Angular service worker file ngsw-worker.js and tried their implementation "navigateLastFocusedOrOpen"

// In event.waitUntil
let matchingClient = await this.getLastFocusedMatchingClient(this.scope);

if (matchingClient) {
    matchingClient = await matchingClient.navigate(urlToOpen);
    await(matchingClient == null ? void 0 : matchingClient.focus());
} else {
    await this.scope.clients.openWindow(urlToOpen);
}

// Angular function
async getLastFocusedMatchingClient(scope2) {
    const windowClients = await scope2.clients.matchAll({ type: "window" });
    return windowClients[0];
}

It just opens the installed app (works on my PC with Chrome), but then I inserted some debug code in the top of event.waitUntil and now it works 95% of the time, it goes to the relative url, both when the app is closed, in the background and foreground! If I remove the debug code, it just open the installed app again!

// Debug
const clientStates = await this.scope.clients
    .matchAll({
        includeUncontrolled: true, type: 'window'
    })
    .then((clientList) => {
        let clientStates = [];

        for (const client of clientList) {
            clientStates.push({
                visibilityState: client.visibilityState,
                focused: client.focused,
            });
        }

        return clientStates;
    });

await fetch(this.scope.registration.scope + '/api/web-push/notificationclick', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        onActionClick: onActionClick,
        urlToOpen: urlToOpen,
        clientStates: clientStates
    }),
}).catch(error => {
    console.error(error);
});

[Giorgi]

Looks like it didn't work for me because I was running on localhost, after deploying to to https environment it works well there.