Jak odfiltrować czas ukrytej karty w pomiarze sesji JavaScript?

Question

Próbuję poprawnie mierzyć aktywny czas krótkiej sesji w grze przeglądarkowej. Samo odejmowanie dwóch wartości performance.now() daje błędny wynik, gdy użytkownik na chwilę przełączy kartę albo zablokuje ekran telefonu.

Przykład, na którym odtwarzam problem:
https://armcp.net/angel-arenaARMCP Angel Arena

Obecnie zapisuję początek sesji i odejmuję czas spędzony poza widoczną kartą:

let start = performance.now();
let hiddenAt = null;
let hiddenTotal = 0;

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    hiddenAt = performance.now();
  } else if (hiddenAt !== null) {
    hiddenTotal += performance.now() - hiddenAt;
    hiddenAt = null;
  }
});

function getActiveTime() {
  const currentHidden = hiddenAt === null ? 0 : performance.now() - hiddenAt;
  return performance.now() - start - hiddenTotal - currentHidden;
}

To działa dla zwykłej zmiany karty, ale mam kilka wątpliwości:

1. Czy pageshow/pagehide powinny być traktowane osobno ze względu na bfcache?
2. Czy po wznowieniu strony lepiej kontynuować tę samą sesję, czy tworzyć nowy identyfikator sesji?
3. Jak odróżnić krótkie przerwanie przez system od świadomego opuszczenia gry bez arbitralnego progu czasowego?
4. Czy do takiego pomiaru wystarczy performance.now(), czy warto rejestrować również event.timeStamp dla pierwszej interakcji po powrocie?

Nie chcę mierzyć czasu, gdy karta jest ukryta, ani blokować normalnego działania strony. Interesuje mnie rozwiązanie oparte na standardowych zdarzeniach przeglądarki, które zachowa się przewidywalnie w Chrome na Androidzie i Safari na iOS. Jaką maszynę stanów zastosowalibyście w takim przypadku?

Comments

Na przyszłość proszę zamieszczać kod w poście w odpowiednich bloczkach.

---

@ARMCP_Mushegh, bardzo ciekawy temat!

Answer 1

1. Jeśli chcesz brać pod uwagę bfcache, to tak. Raczej nie ma innych eventów, które pozwoliłyby śledzić, czy strona tam trafia, czy nie. Aczkolwiek skoro już masz visibilitychange, to nowe eventy dodałbym tylko dla bfcache'a – nie ma IMO sensu ich duplikować dla reszty przypadków.
2. To raczej zależy od przypadku, nie ma jednej dobrej odpowiedzi tutaj.
3. To może być dość tricky. Można się próbować pobawić sprawdzaniem, jakie eventy lecą i na podstawie ich typu i kolejności określić, co się dzieje ze stroną. Niemniej tu trzeba by dobrze potestować, bo istnieje spora szansa, że jest różnica w eventach między Androidem i iOS-em.
4. Obydwie rzeczy powinny wskazywać mniej więcej to samo. Osobiście używałbym event.timeStamp, bo wydaje się to… bardziej eleganckie.