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

Kullanıcının cihazını ne zaman etkin olarak kullanmadığını öğrenmek için Boşta Kalma Algılama API'sini kullanın.

Thomas Steiner

Idle Detection API nedir?

Boşta Kalma Algılama API'si, kullanıcı boştayken geliştiricileri bilgilendirir. Klavye, fare, ekranla etkileşimin olmaması, ekran koruyucunun etkinleştirilmesi, ekranın kilitlenmesi veya farklı bir ekrana geçilmesi gibi durumları belirtir. Bildirim, geliştirici tarafından tanımlanan bir eşikle tetiklenir.

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, kullanıcının kişilerine şu anda ulaşılıp ulaşılamayacağını bildirmek için bu API'yi kullanabilir.
  • Herkese açık kiosk uygulamaları, örneğin müzelerdeki herkese açık kiosk uygulamaları, artık kimse kiosk ile etkileşime geçmediğinde "ana sayfa" görünümüne dönmek için bu API'yi kullanabilir.
  • Grafik oluşturmak gibi pahalı hesaplamalar gerektiren uygulamalar, bu hesaplamaları kullanıcının cihazıyla etkileşim kurduğu anlarla sınırlayabilir.

Mevcut durum

Step Durum
1. Açıklayıcı oluşturma Tamamlandı
2. Spesifikasyonun ilk taslağını oluşturma Tamamlandı
3. Geri bildirim toplayın ve tasarımda iterasyon yapın Devam ediyor
4. Kaynak denemesi Tamamlandı
5. Lansman Chromium 94

Idle Detection API'yi kullanma

Özellik algılama

Boş Durum Algılama API'sinin desteklenip desteklenmediğini kontrol etmek için:

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

Idle Detection API kavramları

Boş Durum Algılama API'si, kullanıcı, kullanıcı aracısı (yani tarayıcı) ve kullanılan cihazın işletim sistemi arasında belirli bir düzeyde etkileşim olduğunu varsayar. Bu, iki boyutta gösterilir:

  • Kullanıcı boş durumda: active veya idle: Kullanıcı bir süre boyunca kullanıcı aracısıyla etkileşime geçmiş veya geçmemiştir.
  • Ekranın boşta kalma durumu: locked veya unlocked: Sistemde, kullanıcı aracısıyla etkileşimi engelleyen etkin bir ekran kilidi (ekran koruyucu gibi) vardır.

active öğesini idle ile ayırt etmek için kullanıcı, kullanıcı aracısı ve işletim sistemi arasında farklılık gösterebilecek buluşsal yöntemler gerekir. Ayrıca, makul derecede kaba bir eşik olmalıdır (Güvenlik ve İzinler bölümüne bakın).

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

Idle Detection API'yi kullanma

Boş Ekran Algılama API'sini kullanmanın ilk adımı, 'idle-detection' izninin verildiğinden emin olmaktır. İzin verilmezse IdleDetector.requestPermission() üzerinden istekte 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, IdleDetector öğesini örneklendirmektir. Minimum threshold değeri 60.000 milisaniyedir (1 dakika). Son olarak, IdleDetector işlevinin start() yöntemini çağırarak boşta kalma algılamasını başlatabilirsiniz. Parametre olarak, milisaniye cinsinden istenen boşta kalma threshold değerine sahip bir nesne ve isteğe bağlı olarak AbortSignal ile boşta kalma algılamayı iptal eden bir 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);
}

AbortController'in abort() yöntemini çağırarak boşta kalma algılamasını iptal edebilirsiniz.

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

DevTools desteği

Chromium 94'ten başlayarak, boşta kalmaksızın Geliştirici Araçları'nda boşta kalma etkinliklerini emüle edebilirsiniz. Geliştirici Araçları'nda Sensörler sekmesini açın ve Boşta Algılayıcı Durumunu Simüle Et'i bulun. Çeşitli seçenekleri aşağıdaki videoda görebilirsiniz.

DevTools'ta 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

60 saniye boyunca işlem yapılmadığında içeriğini silen Geçici Tuval demosu ile Boş Durma Algılama API'sinin işleyişini görebilirsiniz. Bu ekranın, çocukların karalama yapması için bir departman mağazasında kullanıldığını hayal edebilirsiniz.

Geçici kanvas demosu

Çoklu dolgu

Idle Detection API'nin bazı özellikleri, çoklu doldurulabilir ve idle.ts gibi boşta kalma algılama kitaplıklarıdır ancak bu yaklaşımlar, web uygulamasının kendi içerik alanıyla sınırlandırılmıştır: Web uygulaması bağlamında çalışan kitaplığın, giriş etkinlikleri için yüksek yoğunlukta yoklama yapması veya görünürlük değişikliklerini dinlemesi gerekir. Ancak kitaplıklar, 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) daha kısıtlı bir şekilde belirleyebilir.

Güvenlik ve izinler

Chrome ekibi, kullanıcı kontrolü, şeffaflık ve ergonomi gibi Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme başlıklı makalede tanımlanan temel ilkeleri kullanarak Devre Dışı Kalma Algılama API'sini tasarlayıp uyguladı. Bu API'nin kullanılabilmesi 'idle-detection' izni ile kontrol edilir. API'yi kullanmak için uygulamanın üst düzey güvenli bir bağlamda çalıştırılması da gerekir.

Kullanıcı kontrolü ve gizlilik

Kötü amaçlı kişilerin yeni API'leri kötüye kullanmasını her zaman önlemek isteriz. Bağımsız gibi görünen web siteleri ancak aslında aynı tüzel kişi tarafından kontrol edilen web siteleri, kullanıcıların boşta kalma bilgilerini alabilir ve farklı kaynaklardaki benzersiz kullanıcıları tanımlamak için verileri ilişkilendirebilir. Bu tür saldırıları azaltmak için Idle Detection API, bildirilen boş etkinliklerin ayrıntı düzeyini sınırlar.

Geri bildirim

Chrome Ekibi, Boş Durum Algılama API'si ile ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin

API ile ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinde bir hata bildiriminde bulunun. Mümkün olduğunca çok ayrıntıyı ve yeniden oluşturma için basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna Blink>Input yazın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

API'yi destekleme

Boş Durum Algılama API'sini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Faydalı bağlantılar

Teşekkür ederiz

Idle Detection API, Sam Goto tarafından uygulanmıştır. Geliştirici Araçları desteği Maksim Sadym tarafından eklenmiştir. Bu makaleyi inceleyen Joe Medley, Kayce Basques ve Reilly Grant'a teşekkür ederiz. Hero resmi, Unsplash'taki Fernando Hernandez'e aittir.