Web APIs браузера

Браузер предоставляет JavaScript десятки встроенных API, которые открывают доступ к возможностям устройства и операционной системы. Знание этих API позволяет создавать богатые пользовательские интерфейсы, которые органично интегрируются с окружением пользователя.

Page Visibility API

document.visibilityState показывает, видна ли вкладка пользователю. Возможные значения:

Событие visibilitychange срабатывает при переключении. Это важно для:

Online/Offline API

navigator.onLine — булево значение, показывающее наличие соединения. События online и offline срабатывают при изменении состояния.

Важный нюанс: navigator.onLine === true не гарантирует реальный интернет — устройство может быть подключено к сети, но без доступа к интернету. Для настоящей проверки нужно делать тестовый запрос.

Clipboard API

Современный асинхронный API для работы с буфером обмена. Требует явного разрешения пользователя при первом использовании.

Старый синхронный API (document.execCommand('copy')) устарел, но всё ещё работает в большинстве браузеров как фоллбэк.

Geolocation API

navigator.geolocation.getCurrentPosition(success, error) — запросить текущие координаты. Всегда требует явного разрешения пользователя. Возвращает: широту, долготу, точность, скорость и направление (на мобильных).

Notification API

Позволяет показывать системные уведомления за пределами браузера. Требует разрешения Notification.requestPermission(). Уведомления отображаются в системном трее и видны даже когда браузер свёрнут.

Web Share API

navigator.share({ title, text, url }) — вызвать системный диалог «Поделиться». Работает на мобильных и macOS. Интегрируется со всеми установленными приложениями.

Battery API

navigator.getBattery() — уровень заряда, состояние зарядки, оставшееся время. Полезно для оптимизации: снижать качество анимаций при низком заряде.

Vibration API

navigator.vibrate(duration) — вибрация на мобильных. Подходит для тактильной обратной связи: подтверждение действия, уведомление об ошибке.

Device Detection

Определить мобильное устройство можно через navigator.userAgent (устаревший подход) или через медиа-запрос (pointer: coarse) — грубый указатель означает сенсорный экран.

// Page Visibility API — реагируем на переключение вкладок
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    console.log('Вкладка скрыта — ставим на паузу')
    // videoElement.pause()
    // clearInterval(dataUpdateInterval)
  } else {
    console.log('Вкладка активна — возобновляем')
    // videoElement.play()
    // startDataUpdates()
  }
})

// Отслеживаем реальное время просмотра страницы
let visibleTime = 0
let visibleSince = document.visibilityState === 'visible' ? Date.now() : null

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && visibleSince) {
    visibleTime += Date.now() - visibleSince
    visibleSince = null
  } else if (document.visibilityState === 'visible') {
    visibleSince = Date.now()
  }
})

// Online/Offline
function updateConnectionStatus() {
  const status = navigator.onLine ? 'онлайн' : 'офлайн'
  console.log('Статус:', status)
}

window.addEventListener('online', () => {
  console.log('Соединение восстановлено!')
  updateConnectionStatus()
})

window.addEventListener('offline', () => {
  console.log('Соединение потеряно!')
  updateConnectionStatus()
})

// Clipboard API — копирование в буфер
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text)
    console.log('Скопировано:', text)
    return true
  } catch (err) {
    console.warn('Clipboard API недоступен, используем fallback')
    // Фоллбэк для старых браузеров
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    return true
  }
}

await copyToClipboard('Привет из JavaScript!')