Developer

Clipboard, Notifications, Geolocation

↑ 7.4 Browser API · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Общие принципы: асинхронность, разрешения, безопасный контекст. Спрашивают, как обрабатывать отказ.

Общие правила

  • требуется HTTPS (secure context);
  • запрос разрешения только по действию пользователя;
  • разрешение можно отозвать, всегда обрабатывайте отказ и недоступность;
  • статус: navigator.permissions.query({ name: 'geolocation' }).

Clipboard

await navigator.clipboard.writeText('текст')
const text = await navigator.clipboard.readText()   // запрашивает разрешение
 
await navigator.clipboard.write([
  new ClipboardItem({ 'image/png': blob }),
])

Fallback для старых браузеров — document.execCommand('copy') (устарел).

Notifications

if ('Notification' in window) {
  const perm = await Notification.requestPermission()   // granted / denied / default
  if (perm === 'granted') new Notification('Новый заказ', { body: '№ 1024', tag: 'order' })
}

Для push при закрытой вкладке: Service Worker + Push API (registration.showNotification, подписка через VAPID-ключи).

Geolocation

navigator.geolocation.getCurrentPosition(
  pos => setPoint(pos.coords.latitude, pos.coords.longitude),
  err => { if (err.code === err.PERMISSION_DENIED) showManualInput() },
  { enableHighAccuracy: false, timeout: 5000, maximumAge: 60_000 },
)
const watchId = navigator.geolocation.watchPosition(cb)
navigator.geolocation.clearWatch(watchId)

Практика

  • объяснить пользователю, зачем разрешение, прежде чем его запрашивать;
  • предусмотреть ручной ввод как альтернативу;
  • приватность: не хранить координаты без необходимости.

Вопросы с ответами

Вид графа

Обратные ссылки