[Webkit-unassigned] [Bug 259212] New: clients.openWindow() not opening PWA home screen on iOS and macOS

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Jul 14 07:55:05 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=259212

            Bug ID: 259212
           Summary: clients.openWindow() not opening PWA home screen on
                    iOS and macOS
           Product: WebKit
           Version: Safari 16
          Hardware: All
                OS: iOS 16
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit API
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: giorgimamisashvili13 at gmail.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230714/18f0cf79/attachment-0001.htm>


More information about the webkit-unassigned mailing list