Mendeteksi pengguna yang tidak aktif dengan Idle Detection API

Gunakan Idle Detection API untuk mengetahui saat pengguna tidak menggunakan perangkat secara aktif.

Thomas Steiner

Apa itu Idle Detection API?

Idle Detection API memberi tahu developer saat pengguna tidak ada aktivitas, yang menunjukkan hal-hal seperti kurangnya interaksi dengan keyboard, mouse, layar, aktivasi screensaver, penguncian layar, atau berpindah ke layar lain. Ambang batas yang ditentukan developer memicu notifikasi.

Kasus penggunaan yang disarankan untuk Idle Detection API

Contoh situs yang dapat menggunakan API ini antara lain:

  • Aplikasi chat atau situs jejaring sosial online dapat menggunakan API ini untuk memberi tahu pengguna apakah kontaknya saat ini dapat dijangkau.
  • Aplikasi kios yang ditampilkan secara publik, misalnya di museum, dapat menggunakan API ini untuk kembali ke tampilan "beranda" jika tidak ada lagi yang berinteraksi dengan kios.
  • Aplikasi yang memerlukan penghitungan mahal, misalnya untuk menggambar diagram, dapat membatasi penghitungan ini hanya untuk momen saat pengguna berinteraksi dengan perangkat.

Status saat ini

Langkah Status
1. Buat pesan penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
3. Mengumpulkan masukan & mengulangi desain Dalam proses
4. Uji coba origin Selesai
5. Peluncuran Chromium 94

Cara menggunakan Idle Detection API

Deteksi fitur

Untuk memeriksa apakah Idle Detection API didukung, gunakan:

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

Konsep Idle Detection API

Idle Detection API mengasumsikan bahwa ada tingkat interaksi antara pengguna, agen pengguna (yaitu, browser), dan sistem operasi perangkat yang digunakan. Hal ini digambarkan 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 dengan idle memerlukan heuristik yang mungkin berbeda di seluruh pengguna, agen pengguna, dan sistem operasi. Nilai minimum ini juga harus merupakan nilai minimum yang cukup umum (lihat Keamanan dan Izin).

Model dengan 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.

Menggunakan Idle Detection API

Langkah pertama saat menggunakan Idle Detection API adalah memastikan izin 'idle-detection' diberikan. Jika izin tidak diberikan, Anda perlu memintanya melalui IdleDetector.requestPermission(). Perhatikan bahwa memanggil 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). Anda akhirnya dapat memulai deteksi tidak ada aktivitas dengan memanggil metode start() IdleDetector. Dibutuhkan objek dengan threshold tidak ada aktivitas yang diinginkan 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);
}

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

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

Dukungan DevTools

Mulai Chromium 94, Anda dapat mengemulasi peristiwa tidak ada aktivitas di DevTools tanpa benar-benar tidak ada aktivitas. Di DevTools, buka tab Sensors, lalu cari Emulate Idle Detector state. Anda dapat melihat berbagai opsi dalam video di bawah.

Emulasi status Detektor Tidak Ada Aktivitas di DevTools.

Dukungan Puppeteer

Mulai Puppeteer versi 5.3.1, Anda dapat mengemulasi 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 Kanvas Ephemeral yang menghapus kontennya setelah tidak aktif selama 60 detik. Anda bisa membayangkan produk ini ditempatkan di sebuah {i> department store<i} tempat anak-anak mencorat-coret.

Demo Kanvas Ephemeral

Pengisian ulang poliester

Beberapa aspek Idle Detection API dapat dijadikan polyfill dan library deteksi tidak ada aktivitas seperti idle.ts, tetapi pendekatan ini dibatasi pada area konten aplikasi web itu sendiri: Library yang berjalan dalam konteks aplikasi web perlu melakukan polling mahal untuk peristiwa input atau memproses perubahan visibilitas. Namun, batasan yang lebih ketat adalah library tidak dapat memberi tahu hari ini kapan pengguna tidak ada aktivitas di luar area kontennya (misalnya, saat pengguna berada di tab lain atau logout dari komputernya sama sekali).

Keamanan dan izin

Tim Chrome telah merancang dan menerapkan Idle Detection API menggunakan prinsip inti yang ditetapkan 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 level teratas.

Kontrol dan privasi pengguna

Kami selalu ingin mencegah pelaku kejahatan menyalahgunakan API baru. Situs yang tampak independen, tetapi sebenarnya dikontrol oleh entitas yang sama, mungkin memperoleh informasi tidak ada aktivitas pengguna dan menghubungkan data untuk mengidentifikasi pengguna unik di seluruh origin. Untuk memitigasi serangan semacam ini, Idle Detection API membatasi perincian peristiwa tidak ada aktivitas yang dilaporkan.

Masukan

Tim Chrome ingin mengetahui pengalaman Anda saat menggunakan Idle Detection API.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Punya pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang sudah ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dari spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>Input di kotak Components. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.

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 mendukung fitur tersebut.

Link bermanfaat

Ucapan terima kasih

Idle Detection API diimplementasikan oleh Sam Goto. Dukungan DevTools telah ditambahkan oleh Maksim Sadym. Terima kasih kepada Joe Medley, Kayce Basques, dan Reilly Grant atas ulasan mereka tentang artikel ini. Banner besar dibuat oleh Fernando Hernandez di Unsplash.