Push API not functioning on iOS 16.4.3 – Ios

The Problem:

A user is facing issues with the Push API not functioning correctly on Safari iOS 16.4.3. Upon clicking the notification enable button, the native prompt appears but no further actions occur, and the backend server remains uncontacted. The user has verified that the issue is specific to Safari on iOS, as it works seamlessly on other platforms such as Chrome and Safari on macOS. A closer examination revealed that ‘navigator.serviceWorker.controller’ returns null, indicating a potential issue with service worker registration. Additionally, the user has implemented a custom logic to handle notification permission requests and service worker registration, which may have introduced unintended behavior.

The Solutions:

Solution 1: Await Notification Permission and Register Service Worker

In the original code, the Notification.requestPermission() method was not properly awaited before registering the service worker. This is crucial because the service worker cannot be registered until the user has granted permission for notifications.

To fix this issue, the following code was updated:

const main = async () => {
    check();
    Notification.requestPermission().then(async function() {
        await registerServiceWorker()
    });
}

This code ensures that the permission is granted before the service worker is registered, which solves the problem of the service worker being unable to contact the server.

Solution 2:

This issue might be related to a reported problem where `Notification.requestPermission()` consistently returns “denied” on iOS, regardless of the user’s selection.

Here’s a simplified version of your code that handles this issue:

Notification.requestPermission().then(function(permission) {
  if (permission !== 'granted') {
    throw new Error('Permission not granted for Notification');
  }
});

Additionally, the code can be simplified further using the across-browser compatible code snippet provided in a later update:

document.getElementById("enable-notifications").addEventListener("click", (event) => {
  event.preventDefault();
  askNotificationPermission().then(alert);
});

function askNotificationPermission() {
  return new Promise((resolve, reject) => {
    if (checkNotificationPromise()) {
      Notification.requestPermission().then(resolve);
    } else {
      Notification.requestPermission(resolve);
    }
  });
}

function checkNotificationPromise() {
  try {
    Notification.requestPermission().then();
  } catch (e) {
    return false;
  }

  return true;
}

Solution 3: Add manifest.json file with "display": "standalone" directive

To resolve the issue, include a manifest.json file with the “display”: “standalone” directive, which specifies the app should be displayed as a standalone application. Additionally, link to the manifest file in the html file and clear the website’s data in Safari settings. Ensure the site is added to the Home Screen for the changes to take effect.

Video Explanation: