The Situation Explained
Assume the user on your website clicks on a button. This click would sent an AJAX request, which would take a few seconds to process. The user realizes that he has to wait, so he visits another website on another tab.
In the meantime, the AJAX request on your website has failed. You would like to show the error message to the user, but unfortunately the user is on another browser tab. He can see the error message only when he goes back to your website tab.
It would have been much better if the user got a hint of the error, while he is on the other tab. He can then quickly go back to the original website tab, and perform a suitable action. The turnaround time of the whole process would have been faster.
A Solution to this Problem
While the user is on another browser tab, only the favicon and title of the original tab is visible to him. What if we can add a flickering effect to the favicon on the original tab, so that it can grab the user's attention even if he is on a different tab ? It should work, at least better than doing nothing at all.
Adding a flickering effect to the favicon can be done by taking an animated GIF as the favicon image.
Knowing When the Browser Tab Becomes Active / Inactive
Obviously to show such an effect, you must know when the browser tab goes inactive, or becomes active once again. This can be achieved through the Page Visibility API.
The Page Visibility API lets you to know when a webpage becomes active or inactive. Active means the user is currently in that web page. Inactive means the user is not on that webpage, for example he might be on another browser tab, or minimized his browser.
- You can use the visibilitychange event to know when the visibility of the browser tab changes.
- You can use the document.hidden property to know whether the browser tab is hidden or visible.
// Signifies an error on the page
var _ERROR_IN_PAGE = 1;
document.addEventListener('visibilitychange', function() {
if(_ERROR_IN_PAGE == 1) {
if(document.hidden) {
// Show the error animated favicon
}
else {
// User has arrived on page
// Show the normal favicon
// Show the error message
}
}
});
Setting an Animated GIF as the Favicon
You could have set an animated GIF as the favicon through the <link> tag directly, but as of now only Firefox supports it.
<-- Animated GIF will work only in Firefox -->
<link rel="icon" href="http://example.com/favicon.gif" type="image/gif" />So to have a better browser compatibility, you need to add some Javscript so as to have an animated favicon. See How to Animate a Favicon in (Most) Browsers to know more on this.