在静态浏览器属性更改时触发更新

Question

我想在 Notification.permission 浏览器属性发生变化时触发更新。但是，我不确定如何执行此操作，因为 Notification.permission 是静态的。

即使我更改了浏览器的通知权限，以下内容也不会在控制台上打印任何内容：

function MyComponent() {
  console.log(Notification.permission);
  return <MoreGreatStuff />
}

Answer 1

检查权限有不同的选项

granted:用户已明确授予当前源显示系统通知的权限。 拒绝：用户已明确拒绝当前来源显示系统通知的权限。 默认值： 用户决定未知；在这种情况下，应用程序将表现得好像权限被拒绝一样。

你必须这样检查，

(Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

Answer 2

用 How to listen for web notification permission change

回答了我自己的问题

权限状态更新可以通过navigator.permissions.query

挂钩

要点：

const [permissionState, setPermissionState] = useState()

...

navigator.permissions
  .query({ name: 'notifications' })
  .then(permission => setPermissionState(permission.state)

permissionState 的消费者将在任何时候更新re-rendered。

这给了你一个 PermissionState rather than a NotificationPermission，但是 pish posh accpmolishes 相同的东西

在静态浏览器属性更改时触发更新

Trigger update on static browser property change

notifications

reactjs

在静态浏览器 属性 更改时触发更新

Trigger update on static browser property change

notifications

reactjs

在静态浏览器属性更改时触发更新