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şim 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.
  • Müzelerde olduğu gibi herkese açık olarak sunulan kiosk uygulamaları, artık kimse kioskla etkileşimde bulunmuyorsa "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 ile idle'yi ayırt etmek için kullanıcı, kullanıcı aracısı ve işletim sistemine göre farklılık gösterebilecek sezgisel kurallar 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 kullanırken ilk adım, 'idle-detection' izninin verildiğinden emin olmaktır. İzin verilmezse IdleDetector.requestPermission() üzerinden 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ımda IdleDetector sınıfını örneklendirin. Minimum threshold değeri 60.000 milisaniyedir (1 dakika). Son olarak, IdleDetector'ın start() yöntemini çağırarak boşta algılama işlemini başlatabilirsiniz. Parametre olarak, milisaniye cinsinden istenen boşta kalma threshold değerine sahip bir nesne ve isteğe bağlı olarak AbortSignal içeren 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 sınıfının abort() yöntemini çağırarak boşta algılamayı iptal edebilirsiniz.

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

DevTools desteği

Chromium 94'ten itibaren, gerçekten boşta kalmadan DevTools'ta boşta kalma etkinliklerini taklit edebilirsiniz. Geliştirici Araçları'nda Sensörler sekmesini açın ve Boşta Algılayıcı durumunu emülasyon'u 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

Boş Durma Algılama API'sinin bazı yönleri doldurulabilir ve idle.ts gibi boş durma 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 anket 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 Boş Durum 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 görünen ancak aslında aynı tüzel kişi tarafından kontrol edilen web siteleri, kullanıcının boşta kalma bilgilerini edinebilir ve verileri ilişkilendirerek farklı kaynaklardan gelen benzersiz kullanıcıları tanımlayabilir. 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 sorunları bildirme

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, hatayı yeniden oluşturmayla ilgili basit talimatlar verin 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.