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:
Webkit notifications requestPermission function doesn't work
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:
Webkit notifications requestPermission function doesn't work
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}`)
}
})
Share
Improve this question
edited Jan 4, 2019 at 13:08
Max Travis
asked Jan 4, 2019 at 12:59
Max TravisMax Travis
1,3284 gold badges21 silver badges43 bronze badges
8
- 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
Reset to default 2Who 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!