Inactivity Detection

When to use it?

Detecting user inactivity is crucial for enhancing both user experience and performance optimization in modern web applications. This functionality is particularly valuable when you need to:

• Conserve resources by pausing animations, video playback, or other resource-intensive operations when users aren’t actively engaging with your site
• Enhance security by automatically logging out users after periods of inactivity
• Improve engagement by displaying targeted messages, promotions, or suggestions when users appear to be idle
• Gather analytics on user engagement patterns and session activity

By implementing inactivity detection, you can create more responsive applications that intelligently adapt to user behavior, leading to improved performance and more personalized user experiences.

How To use it?

Basic Example

// Basic inactivity detection
bstf.inactivity({
    callback: () => {
        console.log('User has been inactive');
        document.getElementById('idle-message').style.display = 'block';
    },
    idleTime: 5000, // 5 seconds
    debug: true
});

Example with Custom Events and Named Instance

For more control, you can specify which events to monitor and provide a name for your inactivity instance:

// Advanced inactivity detection
bstf.inactivity({
    callback: () => {
        // Pause video playback when user is inactive
        document.querySelector('video').pause();
        // Show a message
        document.getElementById('activity-status').textContent = 'Inactive';
    },
    idleTime: 10000, // 10 seconds
    events: ['mousemove', 'scroll', 'keydown', 'click', 'touchstart'],
    name: 'video-player-inactivity',
    debug: true
});

// Later, destroy this specific inactivity instance
document.getElementById('resume-btn').addEventListener('click', () => {
    bstf.destroyinactivity({
        name: 'video-player-inactivity'
    });
});

Example with Auto-Logout

A simple implementation of auto-logout functionality:

// Auto-logout after inactivity
bstf.inactivity({
    callback: () => {
        // Show a confirmation dialog
        if (confirm('You have been inactive. Would you like to stay logged in?')) {
            console.log('User chose to stay logged in');
            // Reset the inactivity timer by destroying and recreating
            bstf.destroyinactivity({ name: 'security-auto-logout' });
            setupInactivityMonitor(); // Function that sets up this inactivity monitor
        } else {
            // Perform logout
            console.log('Logging out due to inactivity');
            window.location.href = '/logout';
        }
    },
    idleTime: 300000, // 5 minutes
    name: 'security-auto-logout'
});

Configuration options

• callback function (Required): The function to execute when the user becomes inactive.
• idleTime number (Optional): Time in milliseconds to consider the user inactive. Defaults to 3000 (3 seconds).
• events array (Optional): Array of events to monitor for user activity. Defaults to ['mousemove', 'scroll', 'keydown'].
• name string (Optional): Custom name for the inactivity instance, useful for destroying specific instances later.
• debug boolean (Optional): Enable debug mode to see console messages. Defaults to false.

Destroying Inactivity Detection

To stop monitoring for inactivity, use the destroyinactivity method:

// Destroy a specific inactivity instance
bstf.destroyinactivity({
    name: 'my-inactivity-instance'
});

// Or destroy all inactivity instances
bstf.destroyinactivity();

Performance Considerations

The inactivity detection uses efficient event listeners and modern browser features like requestIdleCallback when available to minimize performance impact. However, keep these best practices in mind:

• Use reasonable idle times (not too short) to avoid unnecessary callback executions
• Keep callback functions lightweight and efficient
• Consider destroying inactivity detection when it’s no longer needed
• Limit the number of events monitored to only those necessary for your use case