Chrome уведомления нажмите на кнопку Закрыть

Question

Я использую API уведомлений для отображения всплывающего окна в 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")
};

Я вижу это всплывающее окно:

Но проблема в том, что если пользователь нажимает значок со стрелкой, то запускается onclose, но если пользователь нажимает кнопку «Закрыть» или «Закрыть», обработчик не вызывается.

Как я могу справиться с этим? Это ошибка в Chrome?

Answer 1

Насколько я могу судить, когда вы используете API уведомлений, как в своем фрагменте кода, вы просто не можете обрабатывать события, которые инициируются, если пользователь нажимает кнопку.Кажется, что кнопка, видимая вообще, является специфичной для Chrome, и это вызвано только установкой requireInteraction в true.По крайней мере, в Firefox и Edge кнопка вообще не будет отображаться.

В качестве альтернативы и при условии, что вы используете Service Worker, вы также можете вызвать уведомление, используя регистрацию Service Worker.Таким образом, вы также можете использовать дополнительные атрибуты в опциях уведомления, например, actions, где вы можете определить список кнопок, которые должны отображаться.Вы можете определить action для каждой кнопки и действовать соответствующим образом в Service Worker.
Следующий код работает, протестирован с Chrome 73. Обратите внимание на совместимость браузера .

Надеюсьэто помогает.

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);