I can't realise what is wrong with this piece of code - Notification.requestPermission();

Question

Take a look at the example JavaScript - Explain what issues implementing this onto your site may cause and explain how it could be prevented:

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

---

I've the exercise above and I can't figure out what is wrong with it.

Answer 1

There might be a few issues that come from this code.

---

1. Not checking if Notification is supported

In some browsers, Notification isn't supported. Due to this, you have to check if it is in the window, otherwise it will throw an error.

To do this, you can use the following code.

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

This will check if Notification isn't in the global window object (basically, checking if window.Notification is undefined).

---

2. Not checking if Notification has already been granted

Another thing that could be the issue is the fact that you aren't checking if Notification has already been granted. This can cause annoyance with the user.

To check if it has already been granted before asking the user for permission, you can add an if/else statement, like so.

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

This checks if the permission is granted, so that you can just send the notification without pestering the user with confirmation dialogs.

---

3. Not using a Promise

The function Notification.requestPermission() used to have a callback instead of a Promise. But, in favour of Promises, it is now deprecated.

According to MDN Web Docs on the callback parameter:

An optional callback function that is called with the permission value. Deprecated in favor of the promise return value.

Due to this, you need to use a Promise with the function.

Important: Safari doesn't yet support the Promise method. You need to use callbacks instead.

To do this, you can simply use the code below.

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

Basically, this code will run the .then() method when the user has accepted/denied the notification access.

There are three possible values for the permission parameter in the .then() method.

Value	Description
granted	The user has granted permission for notifications.
denied	The user has denied permission for notifications.
default	Default option.

If the user has granted permission, we send them a notification using the Notification class.

---

In conclusion, there are three issues that I have spotted in this code.

1. Not checking if Notification is supported
2. Not checking if Notification has already been granted
3. Not using a Promise

All of the code extracted from these solutions result in this code below. You can use this code, which will rid all of the issues.

(function () {
  // 1. Not checking if Notification is supported
  if (!("Notification" in window)) {
    console.log("Your browser doesn't support notifications.");
  }

  // 2. Not checking if Notification has already been granted
  else if (Notification.permission === "granted") {
    const notification = new Notification("Hello, world!");
  }
  
  // 3. Not using a Promise
  else {
    Notification
      .requestPermission()
      .then((permission) => {
        if (permission === "granted") {
          const notify = new Notification("Hello, world!");
        }
      });
   }
})();

These are the issues that I think could come from this code.