I am using below example.it show show me chrome notification default.but when I click on button it doesn't show show me notification why ?

I am using 83 v chrome and mac

I used two example first one is simple and second one to get permission then show .both are not working

here is my code

=/src/App.js:249-1123

<button
        onClick={() => {
          var notification = new Notification("Hi there!");

          // another example

          // if (!("Notification" in window)) {
          //   alert("This browser does not support desktop notification");
          // }

          // // Let's check whether notification permissions have already been granted
          // else if (Notification.permission === "granted") {
          //   // If it's okay let's create a notification
          //   var notification = new Notification("Hi there!");
          // }

          // // Otherwise, we need to ask the user for permission
          // else if (Notification.permission !== "denied") {
          //   Notification.requestPermission().then(function(permission) {
          //     // If the user accepts, let's create a notification
          //     if (permission === "granted") {
          //       var notification = new Notification("Hi there!");
          //     }
          //   });
          // }
        }}
      >
        notify
      </button>

I am using below example.it show show me chrome notification default.but when I click on button it doesn't show show me notification why ?

https://developer.mozilla/en-US/docs/Web/API/notification

I am using 83 v chrome and mac

I used two example first one is simple and second one to get permission then show .both are not working

here is my code

https://codesandbox.io/s/nostalgic-tdd-9kto3?file=/src/App.js:249-1123

<button
        onClick={() => {
          var notification = new Notification("Hi there!");

          // another example

          // if (!("Notification" in window)) {
          //   alert("This browser does not support desktop notification");
          // }

          // // Let's check whether notification permissions have already been granted
          // else if (Notification.permission === "granted") {
          //   // If it's okay let's create a notification
          //   var notification = new Notification("Hi there!");
          // }

          // // Otherwise, we need to ask the user for permission
          // else if (Notification.permission !== "denied") {
          //   Notification.requestPermission().then(function(permission) {
          //     // If the user accepts, let's create a notification
          //     if (permission === "granted") {
          //       var notification = new Notification("Hi there!");
          //     }
          //   });
          // }
        }}
      >
        notify
      </button>

• javascript
• reactjs
• push-notification
• notifications
• web-push

• Hi I'm guessing there should be way more code in there such as user-permission and more. please see links developers.google./web/fundamentals/codelabs/… | stackoverflow./questions/33687298/… | – halilcakar Commented Jun 27, 2020 at 0:10
• @HalilÇakar we can also show notification without web notification it is native javascript – user944513 Commented Jun 27, 2020 at 0:20
• I know it is but as far as know it still needs a permission process right? – halilcakar Commented Jun 27, 2020 at 0:21

2 Answers 2

Make sure your system has allowed notifications, in MacOS need to enable notifications from system preferences. using following steps

for MacOS

system preferences -> Notifications & Focus -> Click on Browser from list -> Allow Notification.

This is a permission issue - your test code is running inside an <iframe> which is not allowed - same applies to non-https environments, mentioned here:

https://developer.mozilla/en-US/docs/Web/API/notification

add a console.log to the requestPermission promise:

Notification.requestPermission().then(function (permission) {
            console.log(permission)
});

will log denied