I faced an issue where Notification.requestPermission doesn't fire from my ServiceWorker handler.

Interesting thing, that if try to use Notification.requestPermission from browser console it works fine and I have see the notification request in top of the Chrome browser window.

by: Notification.requestPermission().then(res => console.log(res)) . But the same throw me an error during execution from ServiceWorker file, like:

Uncaught TypeError: self.Notification.requestPermission is not a function

So, anyone maybe know what is wrong? I have already seen these posts on SoW:

1. Webkit notifications requestPermission function doesn't work

2. Desktop notifications allowing not working on chrome

But they does not solve my problem...

My SW push part of code where I use notifications:

  self.addEventListener('push', function(event) {
    console.log(self.Notification, Notification.requestPermission)
    self.Notification.requestPermission().then(res => console.log(res))

    if (Notification.permission === 'denied') {
      console.log('Permission wasn\'t granted. Allow a retry.');
     return;
    }

    if (Notification.permission === 'default') {
      console.log('The permission request was dismissed.');
      return;
    }

    console.log('The permission request is granted!');

    try {
      event.waitUntil(
        self.registration.showNotification(event && event.data && event.data.text() || 'Some Notification Here!')
      );
    } catch (e) {
      throw new Error(`Error in SW: ${e}`)
    }
  })

I faced an issue where Notification.requestPermission doesn't fire from my ServiceWorker handler.

Interesting thing, that if try to use Notification.requestPermission from browser console it works fine and I have see the notification request in top of the Chrome browser window.

by: Notification.requestPermission().then(res => console.log(res)) . But the same throw me an error during execution from ServiceWorker file, like:

Uncaught TypeError: self.Notification.requestPermission is not a function

So, anyone maybe know what is wrong? I have already seen these posts on SoW:

1. Webkit notifications requestPermission function doesn't work

2. Desktop notifications allowing not working on chrome

But they does not solve my problem...

My SW push part of code where I use notifications:

  self.addEventListener('push', function(event) {
    console.log(self.Notification, Notification.requestPermission)
    self.Notification.requestPermission().then(res => console.log(res))

    if (Notification.permission === 'denied') {
      console.log('Permission wasn\'t granted. Allow a retry.');
     return;
    }

    if (Notification.permission === 'default') {
      console.log('The permission request was dismissed.');
      return;
    }

    console.log('The permission request is granted!');

    try {
      event.waitUntil(
        self.registration.showNotification(event && event.data && event.data.text() || 'Some Notification Here!')
      );
    } catch (e) {
      throw new Error(`Error in SW: ${e}`)
    }
  })

• javascript
• google-chrome
• browser
• service-worker

• Were you able to resolve it? I am facing the same issue. – Harshit Agarwal Commented Jul 11, 2019 at 7:24
• Nope, still an issue for me... – Max Travis Commented Jul 11, 2019 at 9:36
• i got to make it work but without using request permission method. – Harshit Agarwal Commented Jul 11, 2019 at 9:53
• can u share your idea here? – Max Travis Commented Jul 11, 2019 at 11:26
• 1 I think Notification.requestPermission not working here, because its need user activity. Check Notification.permission is working. – user706420 Commented Apr 26, 2020 at 18:03

3 Answers 3

Who those who're looking for an answer here it's easy - you shall run Notification.requestPermission only before DOMContentLoaded phase is finished.

Otherwise, the browser won't let you request this permission due to the finished page resourced load.

Besides the accepted answer Also as @user706420 mentioned in the ments if the only use case is just to get the status of permission instead of using Notification.requestPermission() (which might have been used from the main thread to request permission for the first time when the users arrive at your app).

one can use Notification.permission to check the current status of the permission from within service worker just before showing the notification since permission can be changed at any time by the user.

Here is a snippet:

self.addEventListener('push', function(event) {
  if(Notification.permission === 'granted'){
     self.registration.showNotification()
  }

Those who want a more straightforward answer:
Go to the src/serviceWorkerRegistration.js
add the following code inside register(config) function:

Notification.requestPermission().then(res=>{
    if(Notification.permission=='granted'){
        console.log("Granted permission")
        return
    }
    console.log(res)
})

Put the above code mentioned inside question in public/custom-sw.js file except those requestPermissions.

self.addEventListener('push',e=>{
    console.log(self.Notification)
    // self.Notification.requestPermission().then(res=>console.log(res))

    if(self.Notification.permission == 'denied'){
        console.log("Permission wan't granted")
        
        return;
    }

    if(self.Notification.permission == 'default'){
        console.log("The permission request was dismissed")
    }

    console.log("The permission request was granted!")

    try{
        const data = e.data.json()
        const options = {
            body: data.body
        }
        e.waitUntil(
            self.registration.showNotification(data.title,options)
        )
    }catch(err){
        throw new Error(`Error in SW: ${e}`)
    }
})

Thank You!