<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.