AppVisibility

В Quasar Framework модуль AppVisibility позволяет отслеживать состояние видимости приложения в браузере или на устройстве, что критично для оптимизации производительности, экономии ресурсов и управления поведением приложения в фоновом режиме. Этот функционал основан на стандартном Web API Page Visibility, но интегрирован в Quasar с удобными событиями и реактивной поддержкой.

Импорт и подключение

Для использования AppVisibility достаточно импортировать его из Quasar:

import { AppVisibility } from 'quasar'

После этого можно подписаться на события изменения видимости приложения.

Основные свойства

AppVisibility предоставляет следующие ключевые свойства:

  • isVisible – булевое значение, показывающее текущее состояние приложения: true если приложение активно и отображается на экране, false если скрыто или свернуто.
  • isHidden – обратное свойство к isVisible.
  • state – строковое значение, отражающее состояние страницы: 'visible' или 'hidden'.

Пример использования:

console.log(AppVisibility.isVisible) // true или false
console.log(AppVisibility.state)     // 'visible' или 'hidden'

Подписка на события

Quasar предоставляет удобные события, которые позволяют реагировать на изменения видимости:

  • onVisibilityChange – вызывается при каждом изменении состояния видимости приложения.

Пример подписки:

AppVisibility.onVisibilityChange((state) => {
  if (state === 'visible') {
    console.log('Приложение активно')
  } else {
    console.log('Приложение в фоне')
  }
})

Поддерживается реактивная интеграция с Vue:

import { ref, onMounted, onUnmounted } from 'vue'

const isAppVisible = ref(AppVisibility.isVisible)

onMounted(() => {
  AppVisibility.onVisibilityChange((state) => {
    isAppVisible.value = state === 'visible'
  })
})

Такое решение позволяет динамически изменять интерфейс или приостанавливать ресурсоёмкие операции, когда пользователь не взаимодействует с приложением.

Использование с таймерами и обновлениями данных

Одна из практических задач — приостановка фоновых операций, когда приложение не видно. Например, обновление данных через setInterval:

let intervalId

const startUpdates = () => {
  intervalId = setInterval(() => {
    fetchData()
  }, 5000)
}

const stopUpdates = () => {
  clearInterval(intervalId)
}

AppVisibility.onVisibilityChange((state) => {
  if (state === 'visible') {
    startUpdates()
  } else {
    stopUpdates()
  }
})

Такой подход экономит ресурсы устройства и предотвращает лишние запросы к серверу, когда пользователь не видит интерфейс.

Интеграция с Vuex или Pinia

Если приложение использует глобальное состояние, AppVisibility можно интегрировать для управления фоновыми процессами через хранилище:

import { store } from './store'

AppVisibility.onVisibilityChange((state) => {
  store.commit('setAppVisible', state === 'visible')
})

В дальнейшем компоненты могут реактивно отслеживать состояние видимости через Vuex или Pinia и корректировать поведение, например, обновление данных, воспроизведение аудио или запуск анимаций.

Особенности и нюансы

  1. Кроссбраузерная поддержка – Quasar абстрагирует различия между браузерами, предоставляя единый интерфейс.
  2. Мобильные устройства – на мобильных платформах AppVisibility корректно отслеживает свернутое состояние приложения или переход в другой экран.
  3. Одновременные события – возможно сочетание с другими событиями жизненного цикла Vue, например, mounted или beforeUnmount, что позволяет корректно отписываться от событий.
  4. Производительность – подписка на события AppVisibility очень легковесна и не создает дополнительной нагрузки на приложение.

Практические кейсы применения

  • Остановка анимаций и WebGL-рендеринга, когда приложение не активно.
  • Приостановка таймеров и фоновых запросов для экономии батареи.
  • Автоматическая пауза аудио- и видеоплееров при сворачивании приложения.
  • Отслеживание активности пользователя для аналитики и событийной логики.

Отписка от событий

Для предотвращения утечек памяти и корректного завершения подписок используется функция offVisibilityChange:

const callback = (state) => {
  console.log('Изменение видимости:', state)
}

AppVisibility.onVisibilityChange(callback)

// Когда нужно отписаться
AppVisibility.offVisibilityChange(callback)

Это особенно важно для компонентов, которые динамически создаются и уничтожаются.

Резюме ключевых методов

Метод / Свойство Назначение
AppVisibility.isVisible Проверка текущей видимости приложения
AppVisibility.isHidden Обратное свойство к isVisible
AppVisibility.state Строковое состояние 'visible' или 'hidden'
AppVisibility.onVisibilityChange(fn) Подписка на изменение видимости
AppVisibility.offVisibilityChange(fn) Отписка от события

Эффективное использование AppVisibility позволяет создавать приложения на Quasar, которые адаптируются к поведению пользователя и экономно расходуют ресурсы, сохраняя при этом интерактивность и отзывчивость интерфейса.

Оглавление