Boşta Algılama API'si ile etkin olmayan kullanıcıları tespit edin

Thomas Steiner

Yayınlanma tarihi: 18 Mayıs 2020

Browser Support

Boşta kalma algılama API'si, kullanıcı boşta kaldığında geliştiricileri bilgilendirir. Bu durumda klavye, fare ve ekranla etkileşim olmaması, ekran koruyucunun etkinleştirilmesi, ekranın kilitlenmesi veya farklı bir ekrana geçilmesi gibi durumlar söz konusu olabilir. Geliştirici tarafından tanımlanan bir eşik, bildirimi tetikler.

Idle Detection API için önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:

Sohbet uygulamaları veya online sosyal ağ siteleri, bu API'yi kullanarak kullanıcılara kişilerine ulaşılıp ulaşılamadığını bildirebilir.
Örneğin müzelerde bulunan ve herkese açık kiosk uygulamaları, artık kimse kiosk ile etkileşimde bulunmuyorsa "ana sayfa" görünümüne dönmek için bu API'yi kullanabilir.
Örneğin, grafik çizmek için pahalı hesaplamalar gerektiren uygulamalar, bu hesaplamaları kullanıcının cihazıyla etkileşimde bulunduğu anlarla sınırlayabilir.

API'yi kullanma

Idle Detection API'nin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

API kavramları

Idle Detection API, kullanıcı, kullanıcı aracısı (yani tarayıcı) ve kullanılan cihazın işletim sistemi arasında bir etkileşim olduğunu varsayar. Bu, iki boyutta gösterilir:

Kullanıcı boşta durumu: active veya idle: Kullanıcı, bir süre boyunca kullanıcı aracısıyla etkileşimde bulunmuş veya bulunmamıştır.
Ekran boşta durumu: locked veya unlocked: Sistemde, kullanıcı aracısıyla etkileşimi engelleyen etkin bir ekran kilidi (ör. ekran koruyucu) var.

active ile idle arasındaki farkı belirlemek için kullanıcı, kullanıcı aracısı ve işletim sistemine göre değişebilen sezgisel yöntemler gerekir. Ayrıca makul ölçüde kaba bir eşik olmalıdır (bkz. Güvenlik ve İzinler).

Model, belirli içerikle (yani API'yi kullanan bir sekmedeki web sayfası) etkileşim, kullanıcı aracısının tamamı veya işletim sistemi arasında kasıtlı olarak resmi bir ayrım yapmaz. Bu tanım, kullanıcı aracısına bırakılır.

İzin iste ve örneğini oluştur

Idle Detection API'yi kullanırken ilk adım, 'idle-detection' izninin verildiğinden emin olmaktır. İzin verilmezse IdleDetector.requestPermission() ile izin isteğinde bulunmanız gerekir. Bu yöntemin çağrılması için kullanıcı hareketi gerektiğini unutmayın.

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

İkinci adım ise IdleDetector öğesini oluşturmaktır. Minimum threshold değeri 60.000 milisaniye (1 dakika) olmalıdır. Son olarak, IdleDetector'ın start() yöntemini çağırarak boşta kalma algılamayı başlatabilirsiniz. Parametre olarak, milisaniye cinsinden boşta kalma süresine sahip bir nesne (threshold) ve isteğe bağlı olarak boşta kalma algılamayı durdurmak için bir AbortSignal ile birlikte bir nesne (signal) alır.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

Boşta kalma algılamayı durdurma

AbortController öğesinin abort() yöntemini çağırarak boşta kalma algılamayı durdurabilirsiniz.

controller.abort();
console.log('IdleDetector is stopped.');

Geliştirici Araçları desteği

Gerçekten boşta kalmadan Geliştirici Araçları'nda boşta kalma etkinliklerini taklit edebilirsiniz. Geliştirici Araçları'nda Sensörler sekmesini açın ve Boşta Algılayıcı durumu emülasyonu'nu bulun. Çeşitli seçenekleri videoda görebilirsiniz.

Geliştirici Araçları'nda Boşta Algılayıcı durumu emülasyonu.

Puppeteer desteği

Puppeteer 5.3.1 sürümünden itibaren, web uygulamanızın davranışının nasıl değiştiğini programatik olarak test etmek için çeşitli boşta kalma durumlarını taklit edebilirsiniz.

Demo

Idle Detection API'nin nasıl çalıştığını, 60 saniye işlem yapılmadığında içeriğini silen Ephemeral Canvas demosunda görebilirsiniz. Bu cihazın, çocukların karalama yapması için bir mağazada kullanıldığını hayal edebilirsiniz.

Ephemeral Canvas demosu

Polyfill

Boşta kalma algılama API'sinin bazı yönleri polyfillable'dır ve idle.ts gibi boşta kalma algılama kitaplıkları mevcuttur. Ancak bu yaklaşımlar bir web uygulamasının kendi içerik alanıyla sınırlıdır: Web uygulaması bağlamında çalışan kitaplığın, giriş etkinlikleri için pahalı bir şekilde yoklama yapması veya görünürlük değişikliklerini dinlemesi gerekir. Ancak daha kısıtlayıcı bir şekilde, kütüphaneler bugün bir kullanıcının içerik alanının dışında ne zaman boşta kaldığını (ör. kullanıcı farklı bir sekmedeyken veya bilgisayarından tamamen çıkış yaptığında) söyleyemez.

Güvenlik ve izinler

Chrome Ekibi, Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanan temel ilkeleri (kullanıcı kontrolü, şeffaflık ve ergonomi dahil) kullanarak Idle Detection API'yi tasarlayıp uygulamıştır. Bu API'yi kullanma özelliği, 'idle-detection' izni ile kontrol edilir. API'yi kullanmak için uygulamanın üst düzey güvenli bağlamda çalışması da gerekir.

Kullanıcı kontrolü ve gizliliği

Kötü niyetli kişilerin yeni API'leri kötüye kullanmasını her zaman engellemek isteriz. Görünüşte bağımsız olan ancak aslında aynı tüzel kişi tarafından kontrol edilen web siteleri, kullanıcı boşta kalma bilgilerini elde edebilir ve verileri kaynaklar arasında benzersiz kullanıcıları tanımlamak için ilişkilendirebilir. Bu tür saldırıları azaltmak için Idle Detection API, bildirilen boşta kalma etkinliklerinin ayrıntı düzeyini sınırlar.

Geri bildirim

API ile ilgili beklentilerinizi karşılamayan bir durum var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun bildirme

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Ayrıca Blink>Input simgesini Bileşenler kutusuna girin.

API'ye desteğinizi gösterme

Idle Detection API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına bu özelliklerin ne kadar önemli olduğunu gösterir.

Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse iş parçacığında paylaşın.
@ChromiumDev adresine #IdleDetection hashtag'ini kullanarak tweet gönderin ve nerede, nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Herkese açık açıklayıcı
Taslak spesifikasyon
Idle Detection API Demo | Idle Detection API Demo kaynağı
İzleme hatası
ChromeStatus.com girişi
Blink Bileşeni: Blink>Input

Teşekkür

Idle Detection API, Sam Goto tarafından uygulanmıştır. Geliştirici Araçları desteği Maksim Sadym tarafından eklendi. Yorumları için Joe Medley, Kayce Basques ve Reilly Grant'e teşekkür ederiz.