0

Simple question:

Is there some way, using Angular or plain Javascript, to tell if my web page is being viewed right now?

I am using an API that allows a limited number of calls per month. In order to minimize the amount of calls, I'd like to update my web page 4 times/min but only if the page is being viewed at this very moment.

Ilias Bennani
  • 237
  • 2
  • 11
  • 1
    Use google analytics, there is a live tracker. – lin Mar 15 '17 at 08:42
  • 1
    If you use JS to automatically poll the API every 4 minutes, then that JS script will only run if somebody is viewing the page. If nobody is on the page, the JS will not be executed. It's like Schrodinger's Cat, if nobody is viewing the site, does it really exist? – Jackson Mar 15 '17 at 08:43
  • @Jackson not if we consider the case when user visits another tab, right? – tanmay Mar 15 '17 at 08:44
  • http://stackoverflow.com/questions/21429033/solved-how-to-call-js-function-continuously-after-every-5-seconds – Muhammad Raja Mar 15 '17 at 08:44
  • Check this out: http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active – giaffa86 Mar 15 '17 at 08:45
  • @tanmay Good point. The requestAnimationFrame function could be used to poll the service. This function is only called when the user is viewing the tab – Jackson Mar 15 '17 at 08:47
  • 1
    @Jackson I actually looked up a little and found that there is an event to know it and is called `visibilitychange`. you can check out my answer stating that – tanmay Mar 15 '17 at 09:13
  • Which technology is your backend based on? – lin Mar 15 '17 at 09:30

2 Answers2

2

You can know whether your app is being viewed (is in active tab) by listening to visibilitychange event on document object.

Example:

document.addEventListener('visibilitychange', function(){
    if(document.hidden) {
        // your app is not being viewed (inactive tab)
    } else {
        // app is being viewed.. do necessary things
    }
})

Edit: Some browsers might have msHidden/webkitHidden instead. You can check that out at this MDN example

tanmay
  • 7,761
  • 2
  • 19
  • 38
1

Check this:

angular.element($window).bind('focus', function() {
  // tab is active - sending request to API e.g. with setInterval
});
lin
  • 17,956
  • 4
  • 59
  • 83
Szymon P.
  • 1,008
  • 7
  • 11
  • Bad approach, DDoS yourself? – lin Mar 15 '17 at 08:56
  • Why is it DDOS? – Szymon P. Mar 15 '17 at 08:58
  • Maybe because you attemp send an request to the server in an interval? – lin Mar 15 '17 at 09:14
  • If author want to update page 4times/min,he can send requests in an 15-seconds interval, only when page is active, so there is no problem with DDOS. – Szymon P. Mar 15 '17 at 09:18
  • Think larger + there is no need produce not needed traffic at all. There is a simple solution to question this without producing traffic for a tracking.. – lin Mar 15 '17 at 09:25
  • The window focus is basicly to check if this is the active tab. So this is a good start, this tells you that you can start the interval, but you need to stop it when you lose the focus. Of course, depending on the interval, this could be an heavy load for your server but this is a simple REST so this should be easy to manage. – AxelH Mar 15 '17 at 09:25
  • Depending on interval & active users. The interval can be configured, "users" is a unknown size. Still a solution which is not neat. Think about "Google Analytics". The internet would break down if GA would send requests for tracking active users =) – lin Mar 15 '17 at 09:28
  • The simpler solution is to use WebSockets and load only data which changed/added. – Szymon P. Mar 15 '17 at 09:33
  • Also a WebSocket is not needed to create a neat solution. But yes, a socket would be much better than a DDoS attack =) – lin Mar 15 '17 at 09:34