JSFiddle - React, Tailwind, and code Playground
HTML
<div onclick="notify()">Cick here to notify</div>
CSS
div {
width: 100%; padding: 1em; background: yellow;
}
JavaScript
// Alguém poderia fazer um wrapper para a versão do webkit e da mozilla:
// https://developer.mozilla.org/en/docs/Web/API/notification
var notificationAPI = window.notifications ||
window.webkitNotifications ||
window.mozNotifications ||
(alert('Notifications API is not avaliable'))();
function notify() {
var havePermission = notificationAPI.checkPermission();
if (havePermission == 0) {
// 0 is PERMISSION_ALLOWED
var notification = notificationAPI.createNotification(
'http://i.stack.imgur.com/dmHl0.png',
'Chrome notification!',
'Here is the notification text'
);
notification.onclick = function () {
window.open("http://stackoverflow.com/a/13328397/1269037");
notification.close();
}
notification.show();
} else {
notificationAPI.requestPermission();
}
}