Chrome Desktop Notifications
HTML
<button onclick="notifyMe()">
Send Notification
</button>
CSS
button {
padding: 1.2rem;
font-size: 1.2rem;
background: #F35E5C;
color: #F5F5F5;
border: .01rem solid #F30E0C;
margin: 8rem;
border-radius: .4rem;
outline: none;
}
button:hover {
padding: 1.2rem;
font-size: 1.2rem;
background: #Ff5f5C;
color: white;
border: .01rem solid #F11E5C;
margin: 8rem;
border-radius: .4rem;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
JAVASCRIPT
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Derek on Codepad sent you a msg', {
icon: 'http://i.imgur.com/1JJms5X.png',
body: "Hey there! You've been notified!",
});
notification.onclick = function () {
window.open("https://codepad.co/derekbtw");
};
}
}
