User activity checker that works across browser tabs/windows.
npm install activity-checker'DOMContentLoaded', 'mousemove', 'mousedown', 'scroll', 'DOMMouseScroll', 'keydown', 'touchstart', 'touchmove')
'storage' event of localStorage)
'storage' event of localStorage. localStorage fires an event whenever an item is added, modified, or removed in another browsing context. This means that whenever we touch localStorage in any given tab, all other tabs can learn about it by listening for the storage event on the window object.
onKeepAlive() callback every keepAliveInterval ms where you can call server to refresh session.
js
new ActivityChecker({
idleTimeout: 5000,
awayTimeout: 10000,
// invokes when user was Idle more than idleTimeout ms but less then awayTimeout ms
onIdle: function () {
document.querySelector('body').className = 'idle';
document.querySelector('#status').innerText = 'IDLE';
},
// invokes when user was Idle more than awayTimeout ms
onAway: function () {
document.querySelector('body').className = 'away';
document.querySelector('#status').innerText = 'AWAY';
}
});
`
It is worth mentioning that AC uses inside the idea of namespaces. The nameSpace option is primarily needed for filtering events we are interesting in from all events (which may be fired by localStorage). nameSpace is basically a name of the localStorage field to listen.
Advances usage:
`js
new ActivityChecker({
nameSpace: 'mySite', //if not defined 'AC' is default value
idleTimeout: 5000,
awayTimeout: 10000,
keepAliveInterval: 2500,
// invokes when user was Idle more than idleTimeout ms but less then awayTimeout ms
onIdle: function () {
document.querySelector('body').className = 'idle';
document.querySelector('#status').innerText = 'IDLE';
},
onActive: function () {
document.querySelector('body').className = 'active';
document.querySelector('#status').innerText = 'ACTIVE';
},
onDismiss: function () {
},
// invokes when user was Idle more than awayTimeout ms
onAway: function () {
document.querySelector('body').className = 'away';
document.querySelector('#status').innerText = 'AWAY';
},
// invokes every keepAliveInterval ms
onKeepAlive: function () {
}
});
``