<button onclick="ding()">DING!</button>
html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
View Compiled
let notification;

function createNotification() {
  notification = new Notification('Keep your eyes focus on me.', {
    body: '别说这种丧气话,还有机会的!',
    icon: 'https://hezhii.github.io/uploads/avatar.jpg'
  });

  notification.onclick = (e) => {
    window.open('https://hezhii.github.io/');
  }

  notification.onshow = (e) => {
    console.log('Show notification.');
  }

  notification.onerror = (e) => {
    console.log(e);
  }

  notification.onclose = (e) => {
    console.log('Close notification.');
  }

  // setTimeout(() => notification.close(), 3000);
}

function ding() {
  if ('Notification' in window) {
    if (Notification.permission === 'granted') {
      createNotification();
    } else {
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          createNotification();
        }
      });
    }
  } else {
    alert('Your browser does not support desktop notification.');
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.