Mendeteksi pengguna yang tidak aktif dengan Idle Detection API

Thomas Steiner

Dipublikasikan: 18 Mei 2020

Browser Support

Idle Detection API memberi tahu developer saat pengguna tidak aktif, yang ditunjukkan oleh hal-hal seperti tidak adanya interaksi dengan keyboard, mouse, layar, aktivasi screensaver, penguncian layar, atau berpindah ke layar lain. Notifikasi dipicu oleh nilai minimum yang ditentukan developer.

Kasus penggunaan yang disarankan untuk Idle Detection API

Contoh situs yang dapat menggunakan API ini meliputi:

Aplikasi chat atau situs jejaring sosial online dapat menggunakan API ini untuk memberi tahu pengguna apakah kontak mereka dapat dihubungi.
Aplikasi kios yang diekspos secara publik, misalnya di museum, dapat menggunakan API ini untuk kembali ke tampilan "beranda" jika tidak ada yang berinteraksi dengan kios lagi.
Aplikasi yang memerlukan penghitungan yang mahal, misalnya untuk menggambar diagram, dapat membatasi penghitungan ini pada saat pengguna berinteraksi dengan perangkatnya.

Menggunakan API

Untuk memeriksa apakah Idle Detection API didukung, gunakan:

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

Konsep API

Idle Detection API mengasumsikan bahwa ada tingkat interaksi tertentu antara pengguna, agen pengguna (yaitu, browser), dan sistem operasi perangkat yang digunakan. Hal ini direpresentasikan dalam dua dimensi:

Status tidak ada aktivitas pengguna: active atau idle: pengguna telah atau belum berinteraksi dengan agen pengguna selama jangka waktu tertentu.
Status tidak ada aktivitas layar: locked atau unlocked: sistem memiliki kunci layar aktif (seperti screensaver) yang mencegah interaksi dengan agen pengguna.

Membedakan active dari idle memerlukan heuristik yang dapat berbeda di seluruh pengguna, agen pengguna, dan sistem operasi. Nilai ini juga harus berupa nilai minimum yang cukup kasar (lihat Keamanan dan Izin).

Model ini sengaja tidak membedakan secara formal antara interaksi dengan konten tertentu (yaitu, halaman web di tab yang menggunakan API), agen pengguna secara keseluruhan, atau sistem operasi; definisi ini diserahkan kepada agen pengguna.

Meminta izin dan membuat instance

Langkah pertama saat menggunakan Idle Detection API adalah memastikan izin 'idle-detection' diberikan. Jika izin tidak diberikan, Anda perlu memintanya dengan IdleDetector.requestPermission(). Perhatikan bahwa pemanggilan metode ini memerlukan gestur pengguna.

// 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.');
}

Langkah kedua adalah membuat instance IdleDetector. threshold minimum adalah 60.000 milidetik (1 menit). Terakhir, Anda dapat memulai deteksi tidak ada aktivitas dengan memanggil metode start() IdleDetector. Metode ini mengambil objek dengan threshold tidak ada aktivitas dalam milidetik dan signal opsional dengan AbortSignal untuk membatalkan deteksi tidak ada aktivitas sebagai parameter.

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);
}

Menghentikan deteksi tidak ada aktivitas

Anda dapat membatalkan deteksi tidak ada aktivitas dengan memanggil metode AbortController abort().

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

Dukungan DevTools

Anda dapat mengemulasi peristiwa tidak ada aktivitas di DevTools, tanpa benar-benar tidak ada aktivitas. Di DevTools, buka tab Sensor dan cari Emulate Idle Detector state. Anda dapat melihat berbagai opsi dalam video.

Emulasi status Pendeteksi Tidak Ada Aktivitas di DevTools.

Dukungan Puppeteer

Mulai dari Puppeteer versi 5.3.1, Anda dapat meniru berbagai status tidak ada aktivitas untuk menguji secara terprogram perubahan perilaku aplikasi web Anda.

Demo

Anda dapat melihat cara kerja Idle Detection API dengan demo Ephemeral Canvas yang menghapus kontennya setelah 60 detik tidak ada aktivitas. Anda dapat membayangkan layar ini digunakan di department store untuk anak-anak mencoret-coret.

Demo Canvas Sementara

Polyfill

Beberapa aspek Idle Detection API dapat diisi dan library deteksi aktivitas tidak ada seperti idle.ts, tetapi pendekatan ini terbatas pada area konten aplikasi web itu sendiri: Library yang berjalan dalam konteks aplikasi web perlu melakukan polling mahal untuk peristiwa input atau memantau perubahan visibilitas. Namun, secara lebih ketat, pustaka tidak dapat mengetahui saat ini ketika pengguna tidak aktif di luar area kontennya (misalnya, saat pengguna berada di tab lain atau logout dari komputernya).

Keamanan dan izin

Tim Chrome telah mendesain dan menerapkan Idle Detection API menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi. Kemampuan untuk menggunakan API ini dikontrol oleh izin 'idle-detection'. Untuk menggunakan API, aplikasi juga harus berjalan dalam konteks aman tingkat teratas.

Kontrol dan privasi pengguna

Kami selalu ingin mencegah pihak berniat jahat menyalahgunakan API baru. Situs yang tampaknya independen, tetapi sebenarnya dikontrol oleh entitas yang sama, dapat memperoleh informasi saat pengguna tidak aktif dan mengorelasikan data untuk mengidentifikasi pengguna unik di berbagai asal. Untuk mengurangi jenis serangan ini, Idle Detection API membatasi perincian peristiwa tidak ada aktivitas yang dilaporkan.

Masukan

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau, apakah ada metode atau properti yang tidak ada dan perlu Anda terapkan untuk mewujudkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di repositori GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>Input di kotak Komponen.

Menunjukkan dukungan untuk API

Apakah Anda berencana menggunakan Idle Detection API? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan untuk fitur tersebut.

Bagikan rencana penggunaan Anda di thread WICG Discourse.
Kirim tweet ke @ChromiumDev menggunakan hashtag #IdleDetection dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

Penjelasan publik
Spesifikasi draf
Demo Idle Detection API | Sumber Demo Idle Detection API
Melacak bug
Entri ChromeStatus.com
Komponen Blink: Blink>Input

Ucapan terima kasih

Idle Detection API diimplementasikan oleh Sam Goto. Dukungan DevTools ditambahkan oleh Maksim Sadym. Terima kasih kepada Joe Medley, Kayce Basques, dan Reilly Grant atas ulasan mereka.