IOS 16.4 beta 2 PWA Push notifications

Hello everyone!

I'm trying to test push notifications for PWA, but when I request permission via JS I catch 'Permissions denied'.

Notification.requestPermission(result => {
          console.log(result)
          if (result === 'granted') {
            alert('Permissions granted')
          }
          else {
            alert('Permissions denied')
          }
        });

Is it available to get permissions for IOS? It works properly with android and mac.

Does anyone know what am I missing, or what is wrong?

Post not yet marked as solved Up vote post of Graaggas Down vote post of Graaggas
5.0k views
Posted by
Graaggas
Reply

  • Notification.requestPermission().then(result => { if (result !== 'granted') ………….etc

    —
    Olumide777
Add a Comment

Replies

Hey Graagas!

I am also struggling to get Push Notifications working on iOS 16.4 developer beta in Safari. I added my webpage to the Home Screen. But when I request permission, I get:

ReferenceError: Can't find variable: Notification (similar code as you)

The same is working fine on other major browser like Chrome.

Are there any further steps needed to make Push Notifications work? Did somebody make it work?

Any help is appreciated!

Posted by
jayhaluska
Post not yet marked as solved Up vote reply of jayhaluska Down vote reply of jayhaluska

  • I found out that I had to turn on “Notifications” in the “Experimental Features” Setting in Safari Settings. Now I am getting the same problem as the original post

    —
    jayhaluska
Add a Comment

Same problem, on chrome. firefox, android pwa and safari mac os it works, when I try it on ios with safari add to home screen I get denied, the request is created by user input (e.g. a button). I've also activated Push API and Notifications in Safari settings, I don't understand why it won't work

Posted by
InfamousBear
Up vote reply of InfamousBear Down vote reply of InfamousBear

  • On iOS 16.4, no need to turn on Push API & Notifications in Safari settings

    —
    Olumide777
Add a Comment

I was experiencing the same issue. I was able to solve it by adding a manifest.json file with the "display": "standalone" directive, which I had omitted completely and link to the file in the html file.

After deploying the fix, making sure to clear the website data (cache) for the site in Safari settings and adding the site to the Home Screen, it worked. No need to enable Web Push and Notifications in Safari Experimental Features.

manifest.json

{
  "name": "pwa-ios-test",
  "short_name": "pwa-ios-test",
  "description": "pwa-ios-test",
  "display": "standalone",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <link href="manifest.json" rel="manifest">
...
</html>
Posted by
kurt_fi
Up vote reply of kurt_fi Down vote reply of kurt_fi

  • @kurt_fi I'm not sure that the real fix can you shared your service worker subscription and your Notification.requestPermission part code? If it works on your it should be works on our for Other @Graaggas @Olumide777 and other do you found a solution or still on search? I Use also Firebase sdk but anyway the permission for the moment is the main issue

    —
    Tony_Loc

  • I already had "display": "standalone", and the index.html in the described way, and i can confirm that this doesnt work for me

    —
    Hamma11

  • I already have a manifest file similar to this and the issue still persists

    —
    Camillarhi