Снижаем количество вычислений и продлеваем жизнь мобильного устройства. Допустим, у пользователя открыта страница сайта на которой воспроизводится видео, проигрывается музыка, запущено приложение с 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 @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 (качество пользования), снизив количество вычислений, продлив жизнь устройству, особенно при питании от батареи.
ссылка на оригинал статьи http://habrahabr.ru/post/254031/
Добавить комментарий