The Ultimate Guide to Presence Detection in JavaScript: What Works and Why

14. April 2025

.SHARE

Hey there! Ever wondered how websites know when you’re actually looking at them, or if you’ve wandered off to make coffee? That’s presence detection in action – and it’s super useful for creating responsive, user-friendly web apps.

In this guide, I’ll walk you through everything you need to know about detecting user presence with JavaScript – from figuring out if someone’s still actively using your app to knowing if they’ve lost their internet connection. Let’s dive in!

What’s This Presence Detection Thing All About?

When we talk about presence detection in JavaScript, we’re really looking at four main things:

Is the user still there? (Idle/inactivity detection)
Are they connected to the internet? (Online/offline status)
Which users are currently active? (Real-time user presence for multi-user apps)
Is our app visible or hidden? (Tab/window focus detection)

Each of these gives us different insights into user behavior, and they’re all super useful for different reasons. Let’s break them down one by one.

1. Catching Idle Users: „Hello? Anyone There?“

What’s the deal?

This is about figuring out when someone hasn’t touched their keyboard, moved their mouse, or interacted with your app for a while. Maybe they got distracted by a cat video or went to grab lunch.

Why you’d want this:

Auto-logout for security (so nobody messes with your banking session)
Saving battery life by pausing heavy animations
Showing others you’re „Away“ in chat apps
Nudging users with „Hey, are you still there?“ notifications

The simple way with vanilla JavaScript:


let inactivityTime = function() {
  let time;
  
  // Reset the timer whenever the user does something
  window.onload = resetTimer;
  document.onmousemove = resetTimer;
  document.onkeypress = resetTimer;
  document.onclick = resetTimer;
  document.ontouchstart = resetTimer;
  document.onscroll = resetTimer;

  function resetTimer() {
    clearTimeout(time);
    time = setTimeout(logout, 30000); // 30 seconds until we consider them idle
  }

  function logout() {
    console.log("Looks like they're gone...");
    // Do something - show a message, log them out, etc.
  }
};

// Fire it up!
inactivityTime();

let inactivityTime = function() {

let time;

// Reset the timer whenever the user does something

window.onload = resetTimer;

document.onmousemove = resetTimer;

document.onkeypress = resetTimer;

document.onclick = resetTimer;

document.ontouchstart = resetTimer;

document.onscroll = resetTimer;

function resetTimer() {

clearTimeout(time);

time = setTimeout(logout, 30000); // 30 seconds until we consider them idle

}

function logout() {

console.log("Looks like they're gone...");

// Do something - show a message, log them out, etc.

}

};

// Fire it up!

inactivityTime();

Ready-made solutions that make life easier:

idle-timer.js (if you’re using jQuery)


$(document).idleTimer({
  timeout: 30000, // 30 seconds
  idle: false
});

$(document).on("idle.idleTimer", function(event, elem, obj) {
  console.log("User wandered off");
  // Do your idle stuff here
});

$(document).on("active.idleTimer", function(event, elem, obj) {
  console.log("They're back!");
  // Welcome them back
});

$(document).idleTimer({

timeout: 30000, // 30 seconds

idle: false

});

$(document).on("idle.idleTimer", function(event, elem, obj) {

console.log("User wandered off");

// Do your idle stuff here

});

$(document).on("active.idleTimer", function(event, elem, obj) {

console.log("They're back!");

// Welcome them back

});

idle.js (for vanilla JS lovers)


const idle = new IdleJs({
  idle: 30000, // 30 seconds
  onIdle: function() {
    console.log("Gone fishing...");
    // Handle idle state
  },
  onActive: function() {
    console.log("Back to work!");
    // Handle active state
  },
  events: ['mousemove', 'keydown', 'mousedown', 'touchstart', 'scroll']
});
idle.start();

const idle = new IdleJs({

idle: 30000, // 30 seconds

onIdle: function() {

console.log("Gone fishing...");

// Handle idle state

onActive: function() {

console.log("Back to work!");

// Handle active state

events: ['mousemove', 'keydown', 'mousedown', 'touchstart', 'scroll']

});

idle.start();

Pro tips for idle detection:

Don’t be too trigger-happy – Balance security with not annoying users
Remember multiple tabs exist – They might be active elsewhere in your app
Give fair warnings – Nobody likes being logged out without notice
Be accessibility-friendly – Some folks need more time to interact
Test on phones – Mobile interactions are a whole different ballgame

2. Online or Offline? „Is This Thing Connected?“

What’s the deal?

This is about figuring out if your user has an internet connection. Super important if you want your app to work smoothly when someone’s connection drops (like in an elevator or on the subway).

Why you’d want this:

Building apps that work offline
Saving data when someone goes offline, then syncing when they’re back
Showing handy „You’re offline!“ messages
Disabling features that need internet when it’s not available

The easiest way (Navigator.onLine):


// Check if we're online
const updateConnectionStatus = () => {
  const status = navigator.onLine ? "online" : "offline";
  console.log(`Looks like you're ${status}`);
  
  // Add a visual indicator
  document.body.classList.toggle('offline-mode', !navigator.onLine);
};

// Listen for changes
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', updateConnectionStatus);

// Check right away
updateConnectionStatus();

// Check if we're online

const updateConnectionStatus = () => {

const status = navigator.onLine ? "online" : "offline";

console.log(`Looks like you're ${status}`);

// Add a visual indicator

document.body.classList.toggle('offline-mode', !navigator.onLine);

};

// Listen for changes

window.addEventListener('online', updateConnectionStatus);

window.addEventListener('offline', updateConnectionStatus);

// Check right away

updateConnectionStatus();

A more reliable approach (actually checking if we can reach the internet):


function checkRealConnectivity() {
  return fetch('https://www.example.com/ping', { 
    method: 'HEAD',
    mode: 'no-cors',
    cache: 'no-store'
  })
  .then(() => {
    console.log("Yep, we're online!");
    document.body.classList.remove('offline-mode');
    return true;
  })
  .catch(() => {
    console.log("Nope, we're offline!");
    document.body.classList.add('offline-mode');
    return false;
  });
}

// Check when the page loads
checkRealConnectivity();

// Check every 30 seconds
setInterval(checkRealConnectivity, 30000);

function checkRealConnectivity() {

return fetch('https://www.example.com/ping', {

method: 'HEAD',

mode: 'no-cors',

cache: 'no-store'

})

.then(() => {

console.log("Yep, we're online!");

document.body.classList.remove('offline-mode');

return true;

})

.catch(() => {

console.log("Nope, we're offline!");

document.body.classList.add('offline-mode');

return false;

});

}

// Check when the page loads

checkRealConnectivity();

// Check every 30 seconds

setInterval(checkRealConnectivity, 30000);

The easy button (is-online library):


import isOnline from 'is-online';

async function checkConnection() {
  const online = await isOnline();
  console.log(`We're ${online ? 'connected! 🎉' : 'offline 😢'}`);
  
  // Update the UI
  document.body.classList.toggle('offline-mode', !online);
}

// Check when the page loads
checkConnection();

// Check periodically
setInterval(checkConnection, 30000);

import isOnline from 'is-online';

async function checkConnection() {

const online = await isOnline();

console.log(`We're ${online ? 'connected! 🎉' : 'offline 😢'}`);

// Update the UI

document.body.classList.toggle('offline-mode', !online);

}

// Check when the page loads

checkConnection();

// Check periodically

setInterval(checkConnection, 30000);

Pro tips for online/offline detection:

Don’t trust Navigator.onLine alone – It can lie (especially on some browsers)
Belt AND suspenders – Use both methods for best results
Be ready for reconnection – Have a plan for when users come back online
Make it obvious – Clear indicators when someone’s offline prevent frustration
Design assuming offline – The web is flaky, plan accordingly!

3. Who’s Here Right Now? Real-time User Presence

What’s the deal?

This is about knowing which users are currently active in multi-user applications. Think of the green dots next to names in chat apps or seeing who’s editing a Google Doc with you.

Why you’d want this:

Chat apps showing who’s available
Collaborative editing tools
Multiplayer games
Those „Someone is typing…“ indicators

The popular option: Firebase


// Assuming Firebase is set up
const uid = firebase.auth().currentUser.uid;
const userStatusRef = firebase.database().ref('/status/' + uid);

// Define our states
const isOfflineForDatabase = {
  state: 'offline',
  last_changed: firebase.database.ServerValue.TIMESTAMP,
};

const isOnlineForDatabase = {
  state: 'online',
  last_changed: firebase.database.ServerValue.TIMESTAMP,
};

// The magic happens here
firebase.database().ref('.info/connected').on('value', (snapshot) => {
  if (snapshot.val() === false) {
    return;
  }

  // This is the clever bit - it runs on the server even if they
  // close the browser or lose connection
  userStatusRef.onDisconnect().set(isOfflineForDatabase).then(() => {
    // Now we can safely mark them as online
    userStatusRef.set(isOnlineForDatabase);
  });
});

// Get a list of who's currently online
firebase.database().ref('/status').on('value', (snapshot) => {
  const statuses = snapshot.val() || {};
  const activeUsers = Object.keys(statuses).filter(key => 
    statuses[key].state === 'online'
  );
  console.log(`${activeUsers.length} people hanging out here`);
  // Update your UI with who's around
});

// Assuming Firebase is set up

const uid = firebase.auth().currentUser.uid;

const userStatusRef = firebase.database().ref('/status/' + uid);

// Define our states

const isOfflineForDatabase = {

state: 'offline',

last_changed: firebase.database.ServerValue.TIMESTAMP,

};

const isOnlineForDatabase = {

state: 'online',

last_changed: firebase.database.ServerValue.TIMESTAMP,

};

// The magic happens here

firebase.database().ref('.info/connected').on('value', (snapshot) => {

if (snapshot.val() === false) {

return;

}

// This is the clever bit - it runs on the server even if they

// close the browser or lose connection

userStatusRef.onDisconnect().set(isOfflineForDatabase).then(() => {

// Now we can safely mark them as online

userStatusRef.set(isOnlineForDatabase);

});

// Get a list of who's currently online

firebase.database().ref('/status').on('value', (snapshot) => {

const statuses = snapshot.val() || {};

const activeUsers = Object.keys(statuses).filter(key =>

statuses[key].state === 'online'

);

console.log(`${activeUsers.length} people hanging out here`);

// Update your UI with who's around

});

The DIY approach: Socket.io


// Server-side code (Node.js)
const io = require('socket.io')(server);
const users = {};

io.on('connection', (socket) => {
  // Someone shows up
  socket.on('user-connect', (userId) => {
    users[userId] = {
      id: userId,
      socketId: socket.id,
      lastActive: new Date()
    };
    io.emit('user-presence-update', users);
  });

  // They did something
  socket.on('user-activity', (userId) => {
    if (users[userId]) {
      users[userId].lastActive = new Date();
    }
  });

  // They left
  socket.on('disconnect', () => {
    const userId = Object.keys(users).find(id => users[id].socketId === socket.id);
    if (userId) {
      delete users[userId];
      io.emit('user-presence-update', users);
    }
  });
});

// Client-side code
const socket = io();
const userId = 'user123'; // Usually from login

// Let everyone know we're here
socket.emit('user-connect', userId);

// Ping periodically to show we're still active
setInterval(() => {
  socket.emit('user-activity', userId);
}, 30000);

// Listen for updates about who's around
socket.on('user-presence-update', (users) => {
  console.log(`There are ${Object.keys(users).length} people here`);
  // Update your UI
});

// Server-side code (Node.js)

const io = require('socket.io')(server);

const users = {};

io.on('connection', (socket) => {

// Someone shows up

socket.on('user-connect', (userId) => {

users[userId] = {

id: userId,

socketId: socket.id,

lastActive: new Date()

};

io.emit('user-presence-update', users);

});

// They did something

socket.on('user-activity', (userId) => {

if (users[userId]) {

users[userId].lastActive = new Date();

}

});

// They left

socket.on('disconnect', () => {

const userId = Object.keys(users).find(id => users[id].socketId === socket.id);

if (userId) {

delete users[userId];

io.emit('user-presence-update', users);

}

});

// Client-side code

const socket = io();

const userId = 'user123'; // Usually from login

// Let everyone know we're here

socket.emit('user-connect', userId);

// Ping periodically to show we're still active

setInterval(() => {

socket.emit('user-activity', userId);

}, 30000);

// Listen for updates about who's around

socket.on('user-presence-update', (users) => {

console.log(`There are ${Object.keys(users).length} people here`);

// Update your UI

});

Pro tips for real-time presence:

Be forgiving about disconnections – Network hiccups shouldn’t mark people offline immediately
Respect privacy – Let users go „invisible“ if they want
Add timeouts – Show „away“ status before „offline“
Think about scale – Presence updates can create lots of traffic
Use clear indicators – Make status easy to understand at a glance

4. Are They Actually Looking At Us? Tab/Visibility Detection

What’s the deal?

This is about knowing if your web page is currently visible to the user or if it’s hidden in a background tab or minimized window. Great for conserving resources and improving performance.

Why you’d want this:

Pausing videos when people switch tabs
Saving battery by stopping animations
Changing notification sounds/visuals
Knowing actual viewing time for analytics

The modern way: Page Visibility API


// Handle visibility changes
function handleVisibilityChange() {
  if (document.hidden) {
    console.log("Tab is hidden - taking a break!");
    // Pause stuff
    document.querySelector('video')?.pause();
  } else {
    console.log("Tab is visible - back to work!");
    // Resume stuff
    document.querySelector('video')?.play();
  }
}

// Listen for changes
document.addEventListener('visibilitychange', handleVisibilityChange);

// Check right away
handleVisibilityChange();

// Handle visibility changes

function handleVisibilityChange() {

if (document.hidden) {

console.log("Tab is hidden - taking a break!");

// Pause stuff

document.querySelector('video')?.pause();

} else {

console.log("Tab is visible - back to work!");

// Resume stuff

document.querySelector('video')?.play();

}

// Listen for changes

document.addEventListener('visibilitychange', handleVisibilityChange);

// Check right away

handleVisibilityChange();

The old-school approach: Focus/Blur


window.addEventListener('focus', () => {
  console.log("Window active - hello again!");
  // Resume heavy stuff
  document.querySelector('video')?.play();
});

window.addEventListener('blur', () => {
  console.log("Window inactive - taking a breather");
  // Pause heavy stuff
  document.querySelector('video')?.pause();
});

// Check right away
console.log(`Window is ${document.hasFocus() ? 'focused' : 'not focused'} right now`);

window.addEventListener('focus', () => {

console.log("Window active - hello again!");

// Resume heavy stuff

document.querySelector('video')?.play();

});

window.addEventListener('blur', () => {

console.log("Window inactive - taking a breather");

// Pause heavy stuff

document.querySelector('video')?.pause();

});

// Check right away

console.log(`Window is ${document.hasFocus() ? 'focused' : 'not focused'} right now`);

The helper library: visibilityjs


// Is the page hidden?
if (Visibility.hidden()) {
  console.log('Page is in the background');
}

// Run when visibility changes
Visibility.change((e, state) => {
  console.log(`Visibility changed to: ${state}`);
});

// Run when page becomes visible
Visibility.onVisible(() => {
  console.log('Welcome back!');
});

// Get current state
console.log(`Current state: ${Visibility.state()}`);

// Is the page hidden?

if (Visibility.hidden()) {

console.log('Page is in the background');

}

// Run when visibility changes

Visibility.change((e, state) => {

console.log(`Visibility changed to: ${state}`);

});

// Run when page becomes visible

Visibility.onVisible(() => {

console.log('Welcome back!');

});

// Get current state

console.log(`Current state: ${Visibility.state()}`);

Pro tips for visibility detection:

Page Visibility API > focus/blur – It’s more reliable
Think about mobile – Mobile browsers handle visibility differently
Test on different browsers – Implementation varies
Hidden doesn’t mean inactive – They might be listening to your audio
Combine with idle detection – For the full picture of user engagement

What’s the Best Option? A Quick Comparison

Here’s a no-nonsense ranking of the most popular solutions:

Solution	Popularity	Reliability	Difficulty	Best For
Navigator.onLine	Extremely High	Moderate	Very Easy	Quick online/offline checks
Vanilla JS Idle Detection	Very High	High	Easy	Auto-logout and activity tracking
Firebase Presence	High	Very High	Moderate	Chat apps and collaboration tools
Page Visibility API	High	High	Easy	Pausing videos and animations
Socket.io Presence	Moderate	High	Moderate	Custom real-time presence systems

How to Choose What’s Right for Your Project

When picking a solution, ask yourself:

What exactly am I trying to detect? (Idle users? Connection status? Who’s online?)
How many users will I have? (Some solutions don’t scale well)
Do I need something simple or feature-rich? (Balance complexity with needs)
Am I okay using third-party services? (Or need to keep everything in-house)
Which browsers need to be supported? (Older browsers need different approaches)

Wrapping Up

Presence detection might seem like a small detail, but it can make a huge difference in how your app feels. Whether you’re building the next big social platform or just trying to make your web app more responsive, these techniques can help you create a better experience for your users.

Remember that you can (and often should) combine different approaches – for example, using both idle detection and visibility detection together will give you a much clearer picture of what your users are actually doing.

And always, always test on different devices and browsers! Nothing’s worse than deploying something that works great on your machine but falls apart on your users‘ devices.

Want to dig deeper? Check out these resources:

FAQ

What is JavaScript presence detection?

JavaScript presence detection refers to techniques used to determine if a user is actively interacting with a webpage, if they’re connected to the internet, or if the page is currently visible. It encompasses four main types of detection: user idle/inactivity detection, online/offline status detection, real-time user presence tracking, and focus/visibility detection.

How can I detect if a user is idle in JavaScript?

There are several ways to detect user idleness in JavaScript:

1. The most common method is to track user interactions (mouse movement, clicks, key presses) and reset a timer whenever activity is detected. After a set period without activity, the user is considered idle.

2. For modern browsers, you can use the Idle Detection API (though it requires permission).

Here’s a simple example using the traditional method:


let idleTimer;
const idleTimeout = 30000; // 30 seconds

function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(userIdle, idleTimeout);
}

function userIdle() {
  console.log('User is idle');
  // Perform idle actions like showing a warning or logging out
}

// Reset the timer on various user interactions
window.addEventListener('mousemove', resetIdleTimer);
window.addEventListener('keypress', resetIdleTimer);
window.addEventListener('click', resetIdleTimer);
window.addEventListener('scroll', resetIdleTimer);
window.addEventListener('touchstart', resetIdleTimer);

// Initialize the timer
resetIdleTimer();

let idleTimer;

const idleTimeout = 30000; // 30 seconds

function resetIdleTimer() {

clearTimeout(idleTimer);

idleTimer = setTimeout(userIdle, idleTimeout);

}

function userIdle() {

console.log('User is idle');

// Perform idle actions like showing a warning or logging out

}

// Reset the timer on various user interactions

window.addEventListener('mousemove', resetIdleTimer);

window.addEventListener('keypress', resetIdleTimer);

window.addEventListener('click', resetIdleTimer);

window.addEventListener('scroll', resetIdleTimer);

window.addEventListener('touchstart', resetIdleTimer);

// Initialize the timer

resetIdleTimer();

How do I detect if a user is online or offline?

The simplest way to detect online/offline status is using the Navigator.onLine property and the ‚online‘ and ‚offline‘ events:


function updateOnlineStatus() {
  const status = navigator.onLine ? 'online' : 'offline';
  console.log(`User is ${status}`);
  
  // Update UI based on connection status
  document.body.classList.toggle('offline', !navigator.onLine);
}

// Listen for changes
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

// Initial check
updateOnlineStatus();

function updateOnlineStatus() {

const status = navigator.onLine ? 'online' : 'offline';

console.log(`User is ${status}`);

// Update UI based on connection status

document.body.classList.toggle('offline', !navigator.onLine);

}

// Listen for changes

window.addEventListener('online', updateOnlineStatus);

window.addEventListener('offline', updateOnlineStatus);

// Initial check

updateOnlineStatus();

For more reliable detection, you can combine this with a network request to verify actual connectivity:


function checkActualConnectivity() {
  return fetch('https://www.example.com/ping', { 
    method: 'HEAD',
    mode: 'no-cors',
    cache: 'no-store'
  })
  .then(() => true)  // Connected
  .catch(() => false); // Not connected
}

function checkActualConnectivity() {

return fetch('https://www.example.com/ping', {

method: 'HEAD',

mode: 'no-cors',

cache: 'no-store'

})

.then(() => true) // Connected

.catch(() => false); // Not connected

}

What is the Page Visibility API and when should I use it?

The Page Visibility API lets you detect when a webpage is visible or hidden to the user. This occurs when a user switches tabs, minimizes the browser window, or when the device screen locks.

You should use it when you need to:

Pause media playback when users switch tabs
Stop animations to save battery and CPU
Pause real-time updates or polling
Track actual page viewing time for analytics


document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    console.log('Page is hidden');
    // Pause videos, animations, etc.
    document.querySelector('video')?.pause();
  } else {
    console.log('Page is visible');
    // Resume videos, animations, etc.
    document.querySelector('video')?.play();
  }
});

document.addEventListener('visibilitychange', function() {

if (document.hidden) {

console.log('Page is hidden');

// Pause videos, animations, etc.

document.querySelector('video')?.pause();

} else {

console.log('Page is visible');

// Resume videos, animations, etc.

document.querySelector('video')?.play();

}

});

Is the Page Visibility API better than window focus/blur events?

Yes, the Page Visibility API is generally better than window focus/blur events for detecting when users can see your page. Here’s why:

It’s specifically designed for detecting visibility state, not just focus
It works consistently across different browser contexts (tabs, minimized windows)
It handles mobile scenarios better (like screen locking)
It provides a more reliable signal about whether content is actually visible to users

However, window focus/blur events have slightly better browser compatibility for very old browsers. In modern applications, the Page Visibility API is the recommended approach.

How do I implement user presence detection for multi-user applications?

For multi-user presence detection (showing which users are online), you’ll need a real-time backend solution. The two most popular approaches are:

1. Firebase Realtime Database:


// Assuming Firebase is initialized
const uid = firebase.auth().currentUser.uid;
const userStatusRef = firebase.database().ref('/status/' + uid);

// Define states
const isOfflineForDatabase = {
  state: 'offline',
  lastActive: firebase.database.ServerValue.TIMESTAMP,
};

const isOnlineForDatabase = {
  state: 'online',
  lastActive: firebase.database.ServerValue.TIMESTAMP,
};

// Monitor connection state
firebase.database().ref('.info/connected').on('value', (snapshot) => {
  if (snapshot.val() === false) {
    return;
  }

  // Use onDisconnect() to set offline when connection is lost
  userStatusRef.onDisconnect().set(isOfflineForDatabase).then(() => {
    userStatusRef.set(isOnlineForDatabase);
  });
});

// Assuming Firebase is initialized

const uid = firebase.auth().currentUser.uid;

const userStatusRef = firebase.database().ref('/status/' + uid);

// Define states

const isOfflineForDatabase = {

state: 'offline',

lastActive: firebase.database.ServerValue.TIMESTAMP,

};

const isOnlineForDatabase = {

state: 'online',

lastActive: firebase.database.ServerValue.TIMESTAMP,

};

// Monitor connection state

firebase.database().ref('.info/connected').on('value', (snapshot) => {

if (snapshot.val() === false) {

return;

}

// Use onDisconnect() to set offline when connection is lost

userStatusRef.onDisconnect().set(isOfflineForDatabase).then(() => {

userStatusRef.set(isOnlineForDatabase);

});

2. Socket.io:


// Client-side code
const socket = io();
const userId = 'user123'; // From authentication

// Connect and send presence
socket.emit('user-connect', userId);

// Send regular heartbeats to maintain presence
setInterval(() => {
  socket.emit('user-heartbeat', userId);
}, 30000);

// Listen for presence updates
socket.on('presence-update', (onlineUsers) => {
  console.log('Online users:', onlineUsers);
  // Update UI with online users
});

// Client-side code

const socket = io();

const userId = 'user123'; // From authentication

// Connect and send presence

socket.emit('user-connect', userId);

// Send regular heartbeats to maintain presence

setInterval(() => {

socket.emit('user-heartbeat', userId);

}, 30000);

// Listen for presence updates

socket.on('presence-update', (onlineUsers) => {

console.log('Online users:', onlineUsers);

// Update UI with online users

});

Firebase provides better built-in reliability for presence detection because of its onDisconnect() feature, which works even when connections are dropped suddenly. Socket.io requires more custom code for reliable presence detection but offers more flexibility.

What are the security concerns with idle detection and auto-logout?

When implementing idle detection and auto-logout features, consider these security concerns:

Timeout Duration: For sensitive applications (banking, healthcare), shorter timeouts (5-15 minutes) are recommended. For less sensitive applications, 30 minutes to 1 hour may be appropriate.
User Experience vs. Security: Very short timeouts can frustrate users, while long timeouts create security risks.
Warning Before Logout: It’s best practice to warn users before logging them out, giving them a chance to extend their session.
„Remember Me“ Options: If implementing a „remember me“ feature, make sure users understand the security implications of longer sessions on shared devices.
Multiple Tabs: Consider how to handle sessions across multiple tabs. Logging a user out of one tab should ideally log them out of all tabs.

For high-security applications, combine idle detection with server-side session management so sessions expire on the server even if client-side code is manipulated.

How do I handle idle detection across multiple tabs?

One of the challenges with idle detection is handling it consistently across multiple tabs. If a user is active in one tab but not another, you typically don’t want to log them out. Here’s how to synchronize idle state across tabs:


// Reset timer when user is active
function resetIdleTimer() {
  // Store last activity timestamp in localStorage (shared across tabs)
  localStorage.setItem('lastActivity', Date.now().toString());
  
  // Clear any existing timeout
  clearTimeout(window.idleTimer);
  
  // Set a new timeout
  window.idleTimer = setTimeout(checkIdleState, 10000); // Check every 10 seconds
}

// Check if user is idle based on activity across all tabs
function checkIdleState() {
  const lastActivity = parseInt(localStorage.getItem('lastActivity') || '0');
  const idleThreshold = 30 * 60 * 1000; // 30 minutes in milliseconds
  
  if (Date.now() - lastActivity > idleThreshold) {
    // User has been idle across all tabs
    console.log('User is idle across all tabs');
    // Perform logout or show warning
  } else {
    // User is still active in at least one tab
    window.idleTimer = setTimeout(checkIdleState, 10000);
  }
}

// Set up activity listeners
window.addEventListener('mousemove', resetIdleTimer);
window.addEventListener('keypress', resetIdleTimer);
window.addEventListener('click', resetIdleTimer);
window.addEventListener('scroll', resetIdleTimer);

// Initialize
resetIdleTimer();

// Listen for storage events (when other tabs update lastActivity)
window.addEventListener('storage', (event) => {
  if (event.key === 'lastActivity') {
    // Another tab has recorded activity, reset our timer
    clearTimeout(window.idleTimer);
    window.idleTimer = setTimeout(checkIdleState, 10000);
  }
});

// Reset timer when user is active

function resetIdleTimer() {

// Store last activity timestamp in localStorage (shared across tabs)

localStorage.setItem('lastActivity', Date.now().toString());

// Clear any existing timeout

clearTimeout(window.idleTimer);

// Set a new timeout

window.idleTimer = setTimeout(checkIdleState, 10000); // Check every 10 seconds

}

// Check if user is idle based on activity across all tabs

function checkIdleState() {

const lastActivity = parseInt(localStorage.getItem('lastActivity') || '0');

const idleThreshold = 30 * 60 * 1000; // 30 minutes in milliseconds

if (Date.now() - lastActivity > idleThreshold) {

// User has been idle across all tabs

console.log('User is idle across all tabs');

// Perform logout or show warning

} else {

// User is still active in at least one tab

window.idleTimer = setTimeout(checkIdleState, 10000);

}

// Set up activity listeners

window.addEventListener('mousemove', resetIdleTimer);

window.addEventListener('keypress', resetIdleTimer);

window.addEventListener('click', resetIdleTimer);

window.addEventListener('scroll', resetIdleTimer);

// Initialize

resetIdleTimer();

// Listen for storage events (when other tabs update lastActivity)

window.addEventListener('storage', (event) => {

if (event.key === 'lastActivity') {

// Another tab has recorded activity, reset our timer

clearTimeout(window.idleTimer);

window.idleTimer = setTimeout(checkIdleState, 10000);

}

});

This approach uses localStorage to share the last activity timestamp across all tabs, ensuring that activity in any tab prevents an idle timeout.

Is Navigator.onLine reliable for detecting internet connectivity?

Navigator.onLine is not entirely reliable for detecting actual internet connectivity. Here’s why:

It primarily detects if the device has a network connection, not if there’s actual internet access
It might report „online“ when connected to a WiFi network that has no internet access
Different browsers implement it differently, leading to inconsistent behavior

For more reliable connectivity detection, it’s best to combine Navigator.onLine with an actual network request:


function checkConnectivity() {
  // First check Navigator.onLine (quick but not always reliable)
  if (!navigator.onLine) {
    return Promise.resolve(false); // Definitely offline
  }
  
  // If onLine is true, verify with an actual network request
  return fetch('https://www.example.com/ping', { 
    method: 'HEAD',
    mode: 'no-cors',
    cache: 'no-store',
    timeout: 5000
  })
  .then(() => true)  // Connected
  .catch(() => false); // Not connected
}

// Use it like this
checkConnectivity().then(isOnline => {
  console.log(`User is ${isOnline ? 'online' : 'offline'}`);
  updateUIBasedOnConnectivity(isOnline);
});

function checkConnectivity() {

// First check Navigator.onLine (quick but not always reliable)

if (!navigator.onLine) {

return Promise.resolve(false); // Definitely offline

}

// If onLine is true, verify with an actual network request

return fetch('https://www.example.com/ping', {

method: 'HEAD',

mode: 'no-cors',

cache: 'no-store',

timeout: 5000

})

.then(() => true) // Connected

.catch(() => false); // Not connected

}

// Use it like this

checkConnectivity().then(isOnline => {

console.log(`User is ${isOnline ? 'online' : 'offline'}`);

updateUIBasedOnConnectivity(isOnline);

});

What’s the difference between Firebase and Socket.io for presence detection?

When choosing between Firebase and Socket.io for presence detection, consider these key differences:

Firebase Realtime Database:

Pros:
- Built-in presence system with onDisconnect() method
- Handles dropped connections and browser crashes automatically
- Easier to implement and maintain
- Managed service with good scalability
Cons:
- Less flexibility for custom presence logic
- Potential costs at scale
- Vendor lock-in

Socket.io:

Pros:
- Complete control over presence implementation
- Can be self-hosted
- More flexibility for custom presence states and logic
- No mandatory third-party dependency
Cons:
- Requires more custom code for reliable presence detection
- Need to handle disconnections, reconnections, and timeouts yourself
- More complex to implement correctly
- Requires setting up and maintaining server infrastructure

For most applications, Firebase is the simpler and more reliable choice, especially if you’re already using other Firebase services. Socket.io makes more sense if you need complete control over your presence system or have specific requirements that Firebase doesn’t meet.

What are the best practices for session timeouts in web applications?

When implementing session timeouts based on user inactivity, follow these best practices:

Align timeout duration with security needs:
- High-security applications (banking, health): 5-15 minutes
- Medium-security applications (email, social media): 15-30 minutes
- Low-security applications: 30-60 minutes
Provide clear countdown warnings: Notify users 1-2 minutes before timeout with a visible countdown and option to extend
Implement both client and server-side timeouts: Don’t rely solely on JavaScript, which can be manipulated
Save user work: Auto-save draft content before logging users out
Consider „Remember Me“ options: Allow users to opt into longer sessions on trusted devices
Implement session sliding: Reset the timeout timer on meaningful user interactions (not just mouse movement)
Handle multiple tabs gracefully: Activity in any tab should extend the session
Log users out completely: Clear all authentication tokens and sensitive data on timeout

Always balance security requirements with user experience. Too-frequent logouts can frustrate users, while overly long sessions can create security vulnerabilities.

Let’s Talk!

Suchen Sie einen zuverlässigen Partner, der Ihr Projekt auf die nächste Stufe bringt? Ob es sich um Entwicklung, Design, Sicherheit oder laufenden Support handelt – ich würde mich gerne mit Ihnen unterhalten und herausfinden, wie ich Ihnen helfen kann.

Nehmen Sie Kontakt auf,
und lassen Sie uns gemeinsam etwas Erstaunliches schaffen!

Above the Fold: A Critical Web Design Concept Across All Devices

Design / Development / Search Engines

Ever hear web designers obsess about „above the fold“ content? This term isn’t just designer jargon—it’s a fundamental concept that can make or break your website’s effectiveness. Let’s dive into what it means, why it matters, and how it works differently across the devices we use every day. What Exactly Is „Above the Fold“? The […]

VPN Showdown 2025: The Definitive Guide to Privacy, Streaming & Speed

Development / Deployment / Enviroment / Security

Look, these days a solid VPN isn’t just nice to have—it’s practically essential. Whether you want to keep your browsing habits private, access that show that’s somehow available everywhere except your country, or just avoid getting hacked on sketchy coffee shop Wi-Fi, picking the right VPN makes all the difference. We’ve spent hours testing and […]

Smart Refresh: Make Your Raspberry Pi Display Update Only When Content Changes

Development / Content Creation / Digital Kiosk / Digital Signage / Hardware

Need your Raspberry Pi to only update its display when content actually changes? Tired of constant refreshes wasting bandwidth and causing annoying flickers? I’ve got you covered! This guide walks through three practical solutions – from simple HTTP caching to real-time WebSockets – that will make your Pi display work smarter, not harder. Let’s dive […]

Alexander

Ich bin ein Full-Stack-Entwickler. Meine Fachkenntnisse umfassen:

Server-, Netzwerk- und Hosting-Umgebungen
Datenmodellierung / Import / Export
Geschäftslogik
API-Schicht / Aktionsschicht / MVC
Benutzeroberflächen
Benutzererfahrung
Verstehen, was der Kunde und das Unternehmen brauchen

Ich habe eine große Leidenschaft für das Programmieren, das Design und die Serverarchitektur – jeder dieser Bereiche beflügelt meine Kreativität, und ich würde mich ohne sie nicht vollständig fühlen.

Mit einem breiten Spektrum an Interessen erforsche ich ständig neue Technologien und erweitere mein Wissen, wo immer es nötig ist. Die Welt der Technik entwickelt sich rasant, und ich liebe es, mit den neuesten Innovationen Schritt zu halten.

Jenseits der Technologie schätze ich den Frieden und umgebe mich mit Gleichgesinnten.

Ich glaube fest an das Prinzip: Helfen Sie anderen, und die Hilfe wird zu Ihnen zurückkommen, wenn Sie sie brauchen.

The Ultimate Guide to Presence Detection in JavaScript: What Works and Why

Inhaltsverzeichnis

What’s This Presence Detection Thing All About?

1. Catching Idle Users: „Hello? Anyone There?“

What’s the deal?

Why you’d want this:

The simple way with vanilla JavaScript:

Ready-made solutions that make life easier:

idle-timer.js (if you’re using jQuery)

idle.js (for vanilla JS lovers)

Pro tips for idle detection:

2. Online or Offline? „Is This Thing Connected?“

What’s the deal?

Why you’d want this:

A more reliable approach (actually checking if we can reach the internet):

Pro tips for online/offline detection:

3. Who’s Here Right Now? Real-time User Presence

What’s the deal?

Why you’d want this:

Pro tips for real-time presence:

4. Are They Actually Looking At Us? Tab/Visibility Detection

What’s the deal?

Why you’d want this:

The old-school approach: Focus/Blur

Pro tips for visibility detection:

What’s the Best Option? A Quick Comparison

How to Choose What’s Right for Your Project

Wrapping Up

FAQ

What is JavaScript presence detection?

How can I detect if a user is idle in JavaScript?

How do I detect if a user is online or offline?

What is the Page Visibility API and when should I use it?

Is the Page Visibility API better than window focus/blur events?

How do I implement user presence detection for multi-user applications?

What are the security concerns with idle detection and auto-logout?

How do I handle idle detection across multiple tabs?

Is Navigator.onLine reliable for detecting internet connectivity?

What’s the difference between Firebase and Socket.io for presence detection?

What are the best practices for session timeouts in web applications?

RELATED POSTS

Alexander

DISCOVER.

.highlights

.highlights

.highlights