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
Thomas Steiner

Idle Detection API nedir?

Idle Detection API bir kullanıcı boşta kaldığında geliştiricileri; klavye, fare, ekran ile etkileşim eksikliği, ekran koruyucunun etkinleştirilmesi, ekranın kilitlenmesi veya farklı bir ekrana geçme gibi durumları göstererek bilgilendirir. 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

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

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öntemi çağırmak için kullanıcı hareketinin 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 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 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 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çeriklerini silen Geçici Tuval demosu sayesinde Idle Detection API'yi iş başında görebilirsiniz. Bu resim, çocukların çizimleri için bir alışveriş merkezine yerleştirilmiş olduğunu düşünebilir.

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, 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 Idle Detection API'yi Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan temel ilkeleri (kullanıcı kontrolü, şeffaflık ve ergonomi dahil) kullanarak tasarlamış ve uygulamıştır. Bu API'yi kullanma özelliği, 'idle-detection' izni ile kontrol edilir. API'yi kullanabilmesi için bir uygulamanın üst düzey güvenli bağlamda da çalışıyor olması 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ı kaynaklardaki benzersiz kullanıcıları tanımlayabilir. Bu tür saldırıları hafifletmek için Idle Detection API, bildirilen boşta kalma etkinliklerinin ayrıntı düzeyini sınırlandırır.

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 bir spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorunları bildirme

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? 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'ye desteğinizi gösterin

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

Boşta Algılama API'si Sam Goto tarafından uygulandı. 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. Lokomotif resim, Fernando Hernandez tarafından Unsplash'te yayınlandı.