Push notification on iOS - Notification.requestPermission not working

Question

Currently I am working on a project implement push notifications dashboard to send notifications to users, be that in desktop or mobile.

Currently it is working for all desktop-based browsers as well as android. On iOS though, the pop up to allow notifications does not appear, at all.

I read around that there are some blockers when it comes to push notifications on iOS for PWA. Is there any workaround for this?

PS: Let me know if it is the case to share a piece of the code.

I created the manifest.json to turn the web app into PWA. I added it to Home Screen already, the service worker gets registered but when the Notification.requestPermission() call apparently is not called. The pop up alert does not appear, consequently I can`t subscribe the service worker.

Answer 1

You're on the right track by adding the PWA to your home screen and using a background service worker to fire off notifications.

Seeing your code would help me better tailor this answer, but provided your iOS version supports push notifications, something like this (for reactjs) should work for prompting users to enable notifications and registering/updating the worker as needed:

const AppComponent = ({}) => {

  const [displayNotif, setDisplayNotif] = useState(false);
  const [isTokenFound, setTokenFound] = useState(false);

  function reqNotifPerm() {
    try {
      Notification.requestPermission().then((result) => {
        if (result === "granted") {
          try {
            setTokenFound(true);
          } catch (err) {
            console.error(err);
          }
        }
      });
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    try {
      if (!(isTokenFound)) {
        setDisplayNotif(true);
      } else if (isTokenFound) {
        setDisplayNotif(false);
        getFBToken(setTokenFound);
      }
    } catch (err) {
      console.error(err);
    }
  },[isTokenFound]);

  return (
    //...
    {displayNotif && <div onClick={() => { reqNotifPerm() }}>
      {"Enable Notifications"}
    </div>}
    //...
  );
};