Three user states (web development)

We reduce the number of calculations and extend the life of a mobile device. Suppose a user has a page of the site on which the video is playing, music is playing, the application is running with 3d graphics, but at the moment it’s doesn't look at her uses another application, browses another tab in the browser, or is distracted by a telephone conversation, etc., the developer’s duty is to improve the UX and / or extend the life of the user's mobile device.

---

We determine the status of the user

Solid, liquid, gaseous

• In the network (online);
• Offline (offline);
• Away (away).

All three states can be used both for displaying user status in a multiplayer application, chat, forum, etc., and for organizing / optimizing internal (calculations, data exchange) and external (UI, graphics) application processes.
The code examples below are written in coffeescript and oriented to work within the Meteor application, but, nevertheless, this is still JavaScript and can be used in any other environment.

Consider the events that indicate that the user is currently active:

# #@ = window @addEventListener "mousemove", _.throttle(goActive, 777), false @addEventListener "mousedown", _.throttle(goActive, 777), false @addEventListener "keypress", _.throttle(goActive, 777), false @addEventListener "DOMMouseScroll", _.throttle(goActive, 777), false @addEventListener "mouse wheel", _.throttle(goActive, 777), false @addEventListener "touchmove", _.throttle(goActive, 777), false @addEventListener "MSPointerMove", _.throttle(goActive, 777), false 

P.S. throttle built-in underscore function reduces the number of calls to the goActive function, the function will be called no more than once per happy 777 milliseconds.
')
Determine whether the tab is active web applications:

 # setVisibilitychange = -> if document.hidden #    "" goInactive() else #    " " goActive() document.addEventListener "visibilitychange", setVisibilitychange, false 

If the tab / window is open and active, the user is logged in and not active - in a minute, change its state to inactive:

 # Meteor.setTimeout goInactive, 60000 

I note that the goInactive function sets the user status "Away".
To get the status "Offline", the user needs to exit the application (logout) or close / terminate the DDP connection.

---

Below is the code for Meteor only.

We set the status "Offline" by breaking the DDP connection:

 # Meteor.onConnection (connection) -> connectionId = connection.id connection.onClose () -> Meteor.users.update connection: connectionId , '$set': 'profile.online': false 'profile.idle': false 

When a user logs in, you must save the connectionId used above:

 # Accounts.validateLoginAttempt (attempt) -> if !attempt.error and attempt.user Meteor.users.update _id: attempt.user._id , '$set': connection: attempt.connection.id 'profile.online': true 'profile.idle': false 'profile.location.ip': attempt.connection.clientAddress 'profile.lastLogin': new Date() return if !attempt.error and attempt.user then true else false 

More complete code with cross-browser support can be found here.

---

User friendly application

Many web applications require immediate user attention. In the state of "Away" (away) I suggest:

• Disable CSS animations;
• Disable 3D animation;
• Reduce the frequency of calls to the server (for realtime applications);
• Pause video / audio playback;
• Play notification sounds, or play them louder;
• Pause the game for a single player mode.

Simply put, the developer should take care of the user and his personal device, improving the UX (quality of use), reducing the number of calculations, extending the life of the device, especially when powered by battery.