October 13, 2015 7:57 am

Creating a HTML5 app that shows gags in real-time Part 2

The Notifications API (Web Notifications) is currently supported by 60.67% of web users globally according to Can I Use.

Creating a HTML5 app that shows gags in real-time 1

[wpdm_file id=150]DEMO
  • Firefox 38+ supports it fully
  • Chrome 31+ supports it fully
  • Safari 8+ supports it fully
  • Opera 31+ supports it in entirety
  • IE does not support it
  • The new Edge browser currently does not support it.
  • The Android’s native browser does not support it at this moment.

To use it, we first check if the user’s browser supports the API with:

if("Notification" in window) {

Then, we check if the user already has granted our website permission to post notifications to him:

if (Notification.permission === "granted") {
    // We can send him a notification

However, we may not have been granted permission yet but if the user has not denied us permission and we do not have permission – this means that we should ask for permission and if he grants us the permission afterwards, we can again send him a notification.

else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
        // If the user accepts, let's create a notification
        if (permission === "granted") {

If the user does not support desktop notifications, the least we can do is inform him the app has a functionality which he cannot use:

else {
    alert("Your browser does not support desktop notifications!");
}

Here is how our notification function looks like in its entirety:

function notifyDesktop(numOfNewGags) {
        // Let's check if the browser supports notifications
        if("Notification" in window) {
        // Let's check whether notification permissions have already been granted

        if (Notification.permission === "granted") {
            // We can send him a notification
            return craftNotification(numOfNewGags);
        }

        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // If the user accepts, let's create a notification
                if (permission === "granted") {
                    return craftNotification(numOfNewGags);
                }
            });
        }

    }
    else {
        alert("Your browser does not support desktop notifications!");
    }
}

It can be seen that the function has a single parameter – the number of new gags which we pass to the craftNotification function.

The function mentioned above instantiates a new notification using the new Notification constructor which takes two parameters – a title and an options object.

A widely used property of the options is body which holds the body (the message) of the notification. However, we would not be needing that as the title is enough to inform the user of new gags. Though we will be using another property – icon – which takes a URL or a path to an image which will appear alongside the notification.

Here is how the function which makes notifications looks like:

function craftNotification(numOfNewGags) {
    var options = {
        icon: 'img/gag.png',
        body: ""
    }
    var isGagsPlural = numOfNewGags > 1 ? "gags" : "gag";
    var notification = new Notification("You have " + numOfNewGags + " new " + isGagsPlural + " to see!", options);

}

You can see we are utilizing the number of new gags given by the Worker and informing the user of the new gags. We are also determining whether we should use the word gag or gags (plural) depending on the number of new gags.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *