IOS 16.4 beta 2 PWA Push notifications

Question

Graaggas OP

Created Feb ’23

Replies 4

Boosts 4

Views 6.6k

Participants 10

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?

Boost

Answer 1

jayhaluska OP

Mar ’23

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!

2

Answer 2

InfamousBear OP

Apr ’23

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

0

Answer 3

Olumide777 OP

Apr ’23

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

0

Answer 4

kurt_fi OP

Apr ’23

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&#x2F;png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image&#x2F;png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image&#x2F;png",
      "purpose": "any maskable"
    }
  ]
}

index.html

&lt;!DOCTYPE html>
&lt;html>
  &lt;head>
    &lt;link href="manifest.json" rel="manifest">
...
&lt;&#x2F;html>

1