Рассчитывать общее время работы в активном режиме

В этом руководстве рассказывается, как точно рассчитать общее время, в течение которого пользователь активно просматривает страницу. Традиционные показатели, такие как время на странице, часто неправильно включают время, проведенное со страницей в фоновом режиме. С помощью VisibilityStateEntry API можно измерять только время, когда приложение активно, что позволяет точнее оценивать вовлеченность пользователей.

Как реализовать расчет времени работы в активном режиме

API PerformanceTimeline предоставляет изменения состояния видимости в виде записей о производительности. Вместо того чтобы реагировать на события visibilitychange и вручную накапливать время в течение сеанса, вы можете в любой момент запросить всю историю видимости.

ОБЯЗАТЕЛЬНО. Чтобы рассчитать истинное время на переднем плане, необходимо запросить записи о производительности visibility-state.

/**
 * Calculates total time the page was in the visible state.
 *
 * @returns {number} Total foreground time in milliseconds.
 */
function getTotalForegroundTime() {
  // MANDATORY: Query the visibility-state entries from the performance timeline.
  const entries = performance.getEntriesByType('visibility-state');

  // Fallback: If the browser does not support VisibilityStateEntry,
  // the API will gracefully return an empty array.
  if (entries.length === 0) {
    // Return total time since navigation start as a fallback.
    return performance.now();
  }

  let totalForegroundTime = 0;

  for (let i = 0; i < entries.length; i++) {
    // Only calculate duration for periods where the state was 'visible'
    if (entries[i].name === 'visible') {
      const start = entries[i].startTime;

      // The end time is the start time of the next state change,
      // or the current time if this is the final entry.
      const end = i + 1 < entries.length
          ? entries[i + 1].startTime
          : performance.now();

      totalForegroundTime += (end - start);
    }
  }

  return totalForegroundTime;
}

Резервные объявления и поддержка браузеров

VisibilityStateEntry API – это современное дополнение к Performance Timeline, которое может поддерживаться не во всех браузерах.

Поскольку в неподдерживаемых браузерах performance.getEntriesByType('visibility-state') возвращает пустой массив, в процесс вычисления встроено обнаружение функций. Прежде чем продолжить, всегда проверяйте, возвращаются ли записи.

Если API не поддерживается, рекомендуется возвращать performance.now(). Это общее время с момента перехода, которое служит разумной верхней границей для времени взаимодействия, когда история состояний видимости недоступна.

const entries = performance.getEntriesByType('visibility-state');

// If the array is empty, the API is likely unsupported.
if (entries.length === 0) {
  // Fallback: Return total time since page load.
  return performance.now();
}