Learning jQuery

Push notifications started from the mobile business but this technology is available for websites too! Push notifications are akin to mobile app notifications except they come from a website. Similar to mobile app notifications, push notifications require user permission. Once the permission is granted, push notifications will appear on the subscribed desktop/device even when the website is not open on your browser. It's not just another medium to connect with your website audience. In fact, it's better than email or social media as it does the job without intruding on their privacy or requiring them to submit their contact details. Website owners are using this piece of technology to reach out to their customers. Some of the use cases for website push notifications are:

• E-commerce websites can notify its customers about any sales, their order tracking details, or about any available coupons
• Bloggers can notify their audience when a new post is available
• Websites can also ask for feedback from their customers
• Though website push notification don't work on all browsers, the majority of modern browsers support them. Here are the advantages of website push notifications:
• It allows you to target a larger audience
• Provides notifications without the use of a mobile app
• It's a safe medium to connect with users without knowing their contact details. This also increases the subscription rate
• Guaranteed delivery of notifications, unlike emails. Emails sometimes may not reach users on time, going to their SPAM folder or simply being ignored
• Less chances for unsubscribing

Cross-browser implementation for push notifications and implementing HTML 5 notification API can eat your lots of development time. Fortunately, there are some jQuery/JavaScript-based plugins to save you. This post talks about 3 such plugins to make the push notification process easier to implement. Let’s begin.

1. Push.js

https://pushjs.org/

Push is the fastest way to get up and running with JavaScript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user’s desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user’s browser does not support the new API.

Getting up and running with Push is extremely easy. It is so easy to begin with that you can create a new notification in just one line, once you include the library reference. Such as:

Push.create('Hello World!');

A more advanced version is,

Push.create("Hello world!", {
 body: "How's it hangin'?",
 icon: '/icon.png',
 timeout: 4000,
 onClick: function () {
 window.focus();
 this.close();
 }
 });

If the browser does not currently have user permission to show desktop notifications, it will automatically ask before proceeding. The plugin supports the following features for customization of the notification message:

• The ability to display an icon in the message
• Set a timeout to close the notification automatically
• Option to make it always visible until the user closes it manually
• Vibrate the device (works only on Android Mobile)
• Option to set the sound for notification

2. Notifier

http://www.ajarunthomas.com/jquery/notifier/

Notifier is a simple jQuery plugin to push notifications on a webpage either at a specified time or at a button click (or even as part of a button function). It's up to you to decide when you want to push a notification. You can even push your advertising columns as notifications. It features:

• Option to push text, images, or advertising columns as notifications
• The ability to specify when the notification should appear, whether on a button click or after a specified time
• The plugin allows you to define the color of your notification bar
• Choose from two types of close buttons for the notification bar

The following jQuery code will push the notification 3 seconds after the webpage has loaded.

$(window).load(function(){
     $.notifier({
         "message":"Your notification message here",
         "color1":"white", //background color of the notification bar
         "color2":"black", //color of the text
         "delay":3   //Show the notification from in 3 seconds
     });
 });

If you want to trigger the notification on button click, then include the initialization code inside the jQuery click method:

$(document).ready(function() {
     $('#myDiv').click(function(){
         $.notifier({
             "message":"this is your notification"
         });
     });
 });

You can include the images in the message parameter using the HTML tag.

3. easyNotify

https://github.com/Gabrielr47/easyNotify

easyNotify is the simplest implementation of sending push notifications using jQuery. Though the plugin checks for notification API support in the browser, there is no fallback mechanism in place. This plugin is very simple and lightweight, yet offers different parameters to customize the notification message like setting icons, language and various callback functions for close, click, and error. The following jQuery code shows how to define options and then pass the same as an object to easyNotify method.

var options = {
 title: "Notificaiton",
 options: {
 body: "Sample notification message.",
 icon: "icon.png",
 lang: 'pt-BR',
 }
 };

$("#easyNotify").easyNotify(options);

There are 2 other small jQuery plugins called Desktopify and jQuery push notification which are similar to easyNotify and offer the same features for sending and customizing push notifications.

Desktopify
https://github.com/pham/desktopify

Desktopify is another simple-to-use jQuery plugin for creating push notifications. This plugin internally attaches 2 events (click and notify) to the element. The click event checks for the notification support and permission, while the notify event pushes the notification. Like other push notification plugins, it also offers customization for the icon, title, and timeout settings.

jQuery Push Notification
https://github.com/asmsuechan/jquery_push_notification

jQuery push notification is similar to the two other plugins listed above. This plugin expands HTML 5 notification API to use with jQuery. The one thing it implements additionally is validations for the notification message body. It offers callback functions for click, close, show, and error.
These plugins do the job for sending website push notification, but if you are not keen to use any third party plugin and want to have your own implementation for overall control, then we’ll see how to do that next!

The following JavaScript code creates a function sendNotification() which,

• Checks for the notification support in the browser
• Ask for the user's permission
• Sends the push notification
• Attaches callback functions for click and close

function sendNotification(title, message, url) {
 //First, check if notifications are supported or not in your browser!
 if (!Notification) {
 console.log('Push notifications are not supported in your browser..');
 return;
 }

//Ask for permission from user
 if (Notification.permission !== "granted") {
 Notification.requestPermission();
 } else {
 var notification = new Notification(title, {
 icon: 'https://cdn1.iconfinder.com/data/icons/twitter-ui-colored/48/JD-24-128.png',
 body: message,
 });

// Remove the notification when clicked and open the URL.
 notification.onclick = function() {
 window.open(url);
 };

// Callback function when the notification is closed.
 notification.onclose = function() {
 console.log('Notification closed');
 };
 }
 }

You can see this in action here.

Conclusion

Website push notifications are one of the best communication channels to connect with your website's audience without intruding on their privacy. They are small, relevant, and can be user-specific. Push notifications with a little programming can offer great customization and timely updates. Most modern browsers are already supporting them and others which are lacking support at this moment are already on their way to support it!