从ServiceWorker执行文件中，Notification.requestPermission未定义。Chrome。

Question

我遇到了一个问题，即Notification.requestPermission在我的ServiceWorker处理程序中没有触发。

有趣的是，如果尝试从浏览器控制台使用Notification.requestPermission，它可以正常工作，并且我可以在Chrome浏览器窗口顶部看到通知请求。

通过：Notification.requestPermission().then(res => console.log(res))。但是，在ServiceWorker文件中执行时，同样会抛出错误，例如：

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

那么，有人知道问题出在哪里吗？我已经看过SoW上的这些帖子：

1. Webkit notifications requestPermission function doesn't work

2. Desktop notifications allowing not working on chrome

但它们并没有解决我的问题...

我使用通知的SW push代码部分：

  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}`)
    }
  })

- Max Travis

---

你解决了吗？我也遇到了同样的问题。 - Harshit Agarwal

不行，对我来说仍然是个问题... - Max Travis

我必须让它工作，但不能使用请求权限的方法。 - Harshit Agarwal

你能在这里分享一下你的想法吗？ - Max Travis

我认为Notification.requestPermission在这里不起作用，因为它需要用户活动。请检查Notification.permission是否起作用。 - user706420

Answer 1

对于那些在这里寻找答案的人，很容易——您应该只在 DOMContentLoaded 阶段结束之前运行 Notification.requestPermission。

否则，由于页面资源已加载完成，浏览器将不会允许您请求此权限。

- Max Travis

---

我们应该如何做到这一点？ - Itération 122442

Answer 2

除了被接受的答案外，正如@user706420在评论中提到的，如果唯一的用例只是获取权限状态而不使用Notification.requestPermission()（可能是从主线程用于第一次请求权限时用户到达您的应用程序）。

一个可以使用Notification.permission来检查服务工作者内当前权限状态的片段，就在显示通知之前，因为用户可以随时更改权限。

这里是一小段代码：

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

- HVenom

---

是的，您可以随时甚至之后检查权限。除此之外，默认情况下，所有通知权限都被禁用以在每个浏览器中显示。因此，如果您最终要向最终用户显示某些通知，则不要完全依赖于此方法。 - Max Travis

Answer 3

想要更直接的答案：
前往 src/serviceWorkerRegistration.js
在 register(config) 函数内添加以下代码：

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

将上述问题中提到的代码放入public/custom-sw.js文件中，除了那些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}`)
    }
})

谢谢！

- Vedant Mondkar