我无法意识到这段代码出了什么问题 - 通知.请求权限();

Question

看一下JavaScript示例-解释在您的站点上实现它可能会导致什么问题，并解释如何防止它:

(function() {
Notification.requestPermission();
})();

---

我做了上面的练习，但我不知道哪里出了问题。

Answer 1

这段代码可能会出现一些问题。

---

1。不检查是否支持Notification

在某些浏览器中，不支持Notification。因此，您必须检查它是否在window中，否则它将抛出错误。

要做到这一点，您可以使用以下代码:

if (!("Notification" in window)) {
console.log("Your browser doesn't support notifications.");
} else {
Notification.requestPermission();
}

这将检查Notification是否不在全局window对象中(基本上，检查window.Notification是否为undefined)。

---

2。未检查Notification是否已被授予

另一个可能是问题的事实是，你没有检查Notification是否已经被授予。这会引起用户的反感。

要在请求用户权限之前检查它是否已经被授予，您可以添加if/else语句，如下所示。

if (Notification.permission === "granted") {
const notification = new Notification("Hello, world!");
} else {
Notification.requestPermission();
}

这个检查permission是否为granted，这样你就可以发送通知而不用用确认对话框纠缠用户。

---

3。不使用Promise

函数Notification.requestPermission()曾经有一个回调，而不是Promise。但是，为了支持Promises，现在不推荐使用它。

根据MDN Web Docs关于callback参数:

一个可选的回调函数，使用permission值调用。已弃用，支持承诺返回值。

因此，您需要使用带有该函数的Promise。

重要:Safari还不支持Promise方法。你需要用回调来代替。

要做到这一点，您可以简单地使用下面的代码:

Notification
.requestPermission()
.then((permission) => {
if (permission === "granted") {
const notify = new Notification("Hello, world!");
}
});

基本上，当用户接受/拒绝通知访问时，此代码将运行.then()方法。

.then()方法中的permission参数有三种取值:

值	描述
granted	用户已授予通知权限
denied	用户拒绝通知权限
default	默认选项