Три состояния пользователя (web-разработка)

Снижаем количество вычислений и продлеваем жизнь мобильного устройства. Допустим, у пользователя открыта страница сайта на которой воспроизводится видео, проигрывается музыка, запущено приложение с 3d-графикой, но в данный момент он не смотрит на нее пользуется другим приложением, просматривает другую вкладку в браузере, или отвлекся на телефонный разговор и т.д., долгом разработчика является улучшить UX и/или продлить жизнь мобильного устройства пользователя.

---

Определяем состояние пользователя

Твердое, жидкое, газообразное

• В сети (online);
• Не в сети (offline);
• Отошел (away).

Все три состояния могут быть использованы как для отображения статуса пользователя в мультиплеерном приложении, чате, форуме, др., так и для организации/оптимизации внутренних (вычисления, обмен данными) и внешних (UI, графика) процессов приложения.
Примеры кода ниже написаны на coffeescript и ориентированы на работу в рамках Meteor-приложения, но, тем не менее, это все еще JavaScript и может быть использован в любом другом окружении.

Рассмотрим события, сообщающие о том, что пользователь активен в данный момент:

#Клиент
#@ = 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

П.С. встроенная в underscore функциия throttle позволяет снизить количество вызовов функции goActive, функция будет вызвана не чаще, чем раз в счастливые 777 миллисекунд.

Определяем активна ли вкладка web-приложения:

#Клиент
setVisibilitychange = ->
    if document.hidden
        # Код для состояния "Отошел"
        goInactive()
    else
        # Код для состояния "В сети"
        goActive()

document.addEventListener "visibilitychange", setVisibilitychange, false

Если вкладка/окно открыты и активны, при этом пользователь залогинен и не активен — через минуту меняем его состояние на неактивное:

#Клиент
Meteor.setTimeout goInactive, 60000

Замечу, что функция goInactive ставит пользователю состояние «Отошел».
Что бы получить статус «Не в сети», пользователю необходимо выйти из приложения (logout) или закрыть/разорвать DDP-соединение.

---

Ниже код относящийся только к Meteor

Ставим статус «Не в сети» по разрыву DDP-соединения:

#Сервер
Meteor.onConnection (connection) ->
    connectionId = connection.id
    connection.onClose () ->
      Meteor.users.update 
        connection: connectionId
      ,
        ‘$set’:
          ‘profile.online’: false
          ‘profile.idle’: false

При входе пользователя необходимо сохранить connectionId используемый выше:

#Сервер
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

Более полный код с кросс-браузерной поддержкой можно посмотреть тут

---

Применение с пользой для пользователя

Многие web-приложения требуют непосредственного внимания пользователя. При состоянии «Отошел» (away) предлагаю:

• Отключить CSS-анимацию;
• Отключить 3D-анимацию;
• Снизить частоту обращений к серверу (для realtime приложений);
• Поставить воспроизведение видео/аудио на паузу;
• Проигрывать звуки уведомлений, или проигрывать их громче;
• Поставить игру на паузу для одноплеерного режима.

Проще говоря, разработчику следует позаботиться о пользователе и его персональном устройстве, улучшив UX (качество пользования), снизив количество вычислений, продлив жизнь устройству, особенно при питании от батареи.