javascript - Chrome notification click on Close button - Stack Overflow

admin管理员组

文章数量:1026088

I use notification API to show popup window on Chrome 73:

new Notification('', {
    icon: "images/transparent.png",
    image: res,
    requireInteraction: true
});
notification.onclose = function () {
    alert('close')
};
notification.onclick= function () {
    alert('click')
};
notification.onerror= function () {
    alert('error');
};
notification.onnotificationclose = function () {
    alert("close")
};

I see this popup:

But the problem is that if user clicks icon with arrow, then onclose is fired, but if user clicks 'Close' aka 'Закрыть' button, no handler is invoked.

How can I handle it? Is it a bug in chrome?

I use notification API to show popup window on Chrome 73:

new Notification('', {
    icon: "images/transparent.png",
    image: res,
    requireInteraction: true
});
notification.onclose = function () {
    alert('close')
};
notification.onclick= function () {
    alert('click')
};
notification.onerror= function () {
    alert('error');
};
notification.onnotificationclose = function () {
    alert("close")
};

I see this popup:

But the problem is that if user clicks icon with arrow, then onclose is fired, but if user clicks 'Close' aka 'Закрыть' button, no handler is invoked.

How can I handle it? Is it a bug in chrome?

• javascript
• google-chrome
• notifications

Share Improve this question Follow edited Apr 8, 2019 at 13:18 user1773603 asked Apr 2, 2019 at 23:53 Stepan YakovenkoStepan Yakovenko 9,2643131 gold badges124124 silver badges212212 bronze badges 6

• Can you put a little more info? Like what version of chrome are you using and what are your Notification actions? Are you using a global service worker ? If so, did you try the 'notificationonclose' event? – Daniel Piñeiro Commented Apr 5, 2019 at 10:37
• onnotificationclose doesn't help – Stepan Yakovenko Commented Apr 5, 2019 at 11:57
• Does notification.addEventListener('close', function () => { ... }); solve the issue? – pschild Commented Apr 8, 2019 at 13:29
• no it doesn't, you can test yourself – Stepan Yakovenko Commented Apr 8, 2019 at 14:10
• I seem this notification like a native notification of Windows 10? – hoangdv Commented Apr 8, 2019 at 14:20

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5 +50

As far as I can tell, when you use the Notification API like in your code snippet, you simply cannot handle events that are triggered by clicking the button in a custom way. It seems that the button being visible at all is a Chrome-specific thing, and it's only caused by setting requireInteraction to true. At least in Firefox and Edge, the button won't show up at all.

As an alternative and assuming you're making use of a Service Worker, you can also trigger the notification using the Service Worker's registration. By that you can also use additional attributes in the notification's options, like actions where you can define a list of buttons that should show up. You can define an action for each button and act accordingly in the Service Worker.
The following code works, tested with Chrome 73. Mind the browser patibility.

I hope that helps.

index.html

<button onclick="notifyMe()">Notify me!</button>
<script src="main.js"></script>

main.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js');
}

function notifyMe() {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.getRegistration().then((reg) => {
      var options = {
        body: '<Your Notification Body>',
        icon: '<Your Notification Icon>',
        actions: [
          { action: 'close', title: 'Close' }
        ],
        requireInteraction: true
      };
      reg.showNotification('<Your Notification Title>', options);
    });
  } else {
    Notification.requestPermission();
  }
}

sw.js

self.addEventListener('notificationclick', (event) => {
  if (event.action === 'close') {
    console.log('handle close with button');
    event.notification.close();
  } else {
    console.log('handle notification click');
  }
}, false);

self.addEventListener('notificationclose', (event) => {
  console.log('handle close with arrow');
}, false);

I use notification API to show popup window on Chrome 73:

new Notification('', {
    icon: "images/transparent.png",
    image: res,
    requireInteraction: true
});
notification.onclose = function () {
    alert('close')
};
notification.onclick= function () {
    alert('click')
};
notification.onerror= function () {
    alert('error');
};
notification.onnotificationclose = function () {
    alert("close")
};

I see this popup:

But the problem is that if user clicks icon with arrow, then onclose is fired, but if user clicks 'Close' aka 'Закрыть' button, no handler is invoked.

How can I handle it? Is it a bug in chrome?

I use notification API to show popup window on Chrome 73:

new Notification('', {
    icon: "images/transparent.png",
    image: res,
    requireInteraction: true
});
notification.onclose = function () {
    alert('close')
};
notification.onclick= function () {
    alert('click')
};
notification.onerror= function () {
    alert('error');
};
notification.onnotificationclose = function () {
    alert("close")
};

I see this popup:

But the problem is that if user clicks icon with arrow, then onclose is fired, but if user clicks 'Close' aka 'Закрыть' button, no handler is invoked.

How can I handle it? Is it a bug in chrome?

• javascript
• google-chrome
• notifications

Share Improve this question Follow edited Apr 8, 2019 at 13:18 user1773603 asked Apr 2, 2019 at 23:53 Stepan YakovenkoStepan Yakovenko 9,2643131 gold badges124124 silver badges212212 bronze badges 6

• Can you put a little more info? Like what version of chrome are you using and what are your Notification actions? Are you using a global service worker ? If so, did you try the 'notificationonclose' event? – Daniel Piñeiro Commented Apr 5, 2019 at 10:37
• onnotificationclose doesn't help – Stepan Yakovenko Commented Apr 5, 2019 at 11:57
• Does notification.addEventListener('close', function () => { ... }); solve the issue? – pschild Commented Apr 8, 2019 at 13:29
• no it doesn't, you can test yourself – Stepan Yakovenko Commented Apr 8, 2019 at 14:10
• I seem this notification like a native notification of Windows 10? – hoangdv Commented Apr 8, 2019 at 14:20

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5 +50

As far as I can tell, when you use the Notification API like in your code snippet, you simply cannot handle events that are triggered by clicking the button in a custom way. It seems that the button being visible at all is a Chrome-specific thing, and it's only caused by setting requireInteraction to true. At least in Firefox and Edge, the button won't show up at all.

As an alternative and assuming you're making use of a Service Worker, you can also trigger the notification using the Service Worker's registration. By that you can also use additional attributes in the notification's options, like actions where you can define a list of buttons that should show up. You can define an action for each button and act accordingly in the Service Worker.
The following code works, tested with Chrome 73. Mind the browser patibility.

I hope that helps.

index.html

<button onclick="notifyMe()">Notify me!</button>
<script src="main.js"></script>

main.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js');
}

function notifyMe() {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.getRegistration().then((reg) => {
      var options = {
        body: '<Your Notification Body>',
        icon: '<Your Notification Icon>',
        actions: [
          { action: 'close', title: 'Close' }
        ],
        requireInteraction: true
      };
      reg.showNotification('<Your Notification Title>', options);
    });
  } else {
    Notification.requestPermission();
  }
}

sw.js

self.addEventListener('notificationclick', (event) => {
  if (event.action === 'close') {
    console.log('handle close with button');
    event.notification.close();
  } else {
    console.log('handle notification click');
  }
}, false);

self.addEventListener('notificationclose', (event) => {
  console.log('handle close with arrow');
}, false);

本文标签： javascriptChrome notification click on Close buttonStack Overflow