Simple Push Notifications for Websites

Joash Pereira
Joash’s Blog
Published in
2 min readApr 25, 2015
push-notification-for-websites-joashp

Push notifications term is mainly used in mobiles, to send notifications to users devices whether they on Android, iOS or Windows Phone OS. Push notifications allow your users to opt-in to timely/real time updates from sites they love and allow you to effectively re-engage them with customized, engaging content. Recently, the Chrome 42 supports the Notification API and and Push API.

Notification API, it existed since Chrome 5 and Firefox 4. Push API is similar, but notifications can be shown even if the page is closed, using similar concepts that native applications use when they show notifications even when they are closed.

I will be showing how you can send simple notification using the Notification API for websites.
Supports: chrome, chromium browsers, firefox, and safari — spartan will get support soon.

Simple to use, below snippet:

[code lang=”html”]
<button onclick=”notification_api()”>
Send Notification!
</button>
<script>
function notification_api() {
if (Notification.permission !== “granted”)
Notification.requestPermission();

var notification = new Notification(‘Title goes here’, {
icon: ‘icon-image.png’,
body: ‘Body goes here!’,
});

notification.onclick = function () {
window.open(“www.url-to-open-onclick-of-the-notification.com");
};
}
</script>
[/code]

View demo on Codepen

If you want to send push notifications with the Push API, then read this tutorial on HTML5ROCKS. The Push API works similar to Push notifications on the mobile.

--

--