Trigger update on static browser property change

Question

I'd like to trigger updates anytime the Notification.permission browser property changes. However, I'm not sure how to do this since Notification.permission is static.

The following never prints anything to the console, even if I change my browser's notifications permission:

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

Answer 1

Answered my own question with How to listen for web notification permission change

Permission state updates can be hooked via navigator.permissions.query

The gist:

const [permissionState, setPermissionState] = useState()

...

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

Consumers of permissionState will be re-rendered any time it is updated.

This gives you a PermissionState rather than a NotificationPermission, but pish posh it accpmolishes the same thing

Answer 2

There are diffrent option to check for permission

granted: The user has explicitly granted permission for the current origin to display system notifications. denied: The user has explicitly denied permission for the current origin to display system notifications. default: The user decision is unknown; in this case the application will act as if permission was denied.

You must check it like that,

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