Display web notifications only when the browser window/tab is not active

HTML5 has brought with it the Notification API. In other words, HTML5 allow us to show browser notifications to the web app users. The most important feature is that the notification will be displayed regardless of which tab or window is focused.

That being said, personally I want to display a notification only when the source tab is not focused (actually,  that’s the desired behavior in most of the cases).
So, how can we display browser notifications only when the tab is not active/focused?

 
 //make sure the tab is not active/focused
 if(!document.hasFocus()) {
     showNotification('Hello world!');
 }

//source: https://developer.mozilla.org/en-US/docs/Web/API/notification
function showNotification($message) {
    // Let's check if the browser supports notifications
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
    }

    // Let's check whether notification permissions have already been granted
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification($message);
    }

    // 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") {
               var notification = new Notification($message);
            }
        });
     }

 // At last, if the user has denied notifications, and you
 // want to be respectful there is no need to bother them any more.
 }

Resources:

Notification documentation on MDN

Browser compatibility

Official Notification API specs

A simple solution for “image not available” problem

Is there a simple solution for problems with missing or broken images? Yes, it is. You don’t need any script, just an alternate image to display when this problem occur and the “onerror” event available with the img element. Here is an example:

< img src="/path/to/image.jpg" height="100px" width="100px" onerror="this.src = '/path/to/alternate-image.png'" / >

This simple solution was posted by Satya on his web scripting blog. Anyway, if you preffer a more elegant solution, you could use a script that dynamically detects the missing images and replace them with an alternate image. A good Java Script solution is presented on the tech evangelisit’s article.

Bookmark and Share