Как определить фокус браузера на мобильных устройствах?

Приложение, которое я разрабатываю, построено вокруг jQuery Mobile и некоторых Ajax для обновления частей страницы. Как и сайты, использующие автоматическое обновление, я хочу остановить обновление после некоторого условия (время/видимость/и т.д.), Поэтому мой сервер не обманывается ненужными запросами. Приложение имеет экран состояния, который обычно проверяется пользователем, и, в идеале, мои скрипты будут знать, что окно браузера сосредоточилось, и было бы подходящим временем для обновления. Я делал это раньше в desktop webapps, но я замечаю множество вариаций на мобильной стороне между различными платформами и браузерами, например:

Лучшее, что я смог сделать до сих пор, - это набор эвристик, которые рассматривают доступные события +, когда было обнаружено взаимодействие пользователя со страницей, но оно неуклюже и приводит к тому, что пользователь переходит на страницу назад и необходимо обновить вручную. Не очень.

Какие-нибудь умные методы для решения этого?

Ответы

Ответ 1

Если вы просто хотите знать, что окно браузера было не в фокусе, используйте функцию requestAnimationFrame.

window.requestAnimFrame = window.requestAnimationFrame ||
                          window.mozRequestAnimationFrame || 
                          <add browsers here>

Затем в вашем коде

var lastupdate = new Date()
(function loop() {
      var now = new Date();

      if ( now - lastupdate > <some treshold like 1 second> ) {
          // browser was suspended and did come back to focus
      }
      lastupdate = now;

      window.requestAnimFrame(loop);
})();

Трюк заключается в том, что браузеры не предоставляют анимационный кадр, если вкладка или окно не в фокусе. Обычные setInterval и setTimeouts будут по-прежнему работать. Этот цикл будет работать непрерывно, когда окно находится в фокусе, но накладные расходы минимальны, он называется 3-5 раз в секунду в мобильных устройствах.