Gunakan Idle Detection API untuk mengetahui kapan pengguna tidak aktif menggunakan perangkatnya.
Apa yang dimaksud dengan 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, pengaktifan 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 saat ini dapat dijangkau.
- Aplikasi kios yang ditampilkan secara publik, misalnya di museum, dapat menggunakan API ini untuk kembali ke tampilan "layar utama" jika tidak ada yang berinteraksi dengan kios lagi.
- Aplikasi yang memerlukan penghitungan mahal, misalnya untuk menggambar diagram, dapat membatasi penghitungan ini ke saat pengguna berinteraksi dengan perangkatnya.
Status saat ini
Langkah | Status |
---|---|
1. Membuat penjelasan | Selesai |
2. Membuat draf awal spesifikasi | Selesai |
3. Mengumpulkan masukan & melakukan iterasi pada desain | Sedang berlangsung |
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 beberapa tingkat interaksi antara pengguna, agen pengguna (yaitu, browser), dan sistem operasi perangkat yang digunakan. Hal ini direpresentasikan dalam dua dimensi:
- Status tidak ada aktivitas pengguna:
active
atauidle
: pengguna telah atau belum berinteraksi dengan agen pengguna selama jangka waktu tertentu. - Status layar tidak ada aktivitas:
locked
atauunlocked
: sistem memiliki kunci layar aktif (seperti screensaver) yang mencegah interaksi dengan agen pengguna.
Untuk membedakan active
dengan idle
, diperlukan heuristik yang mungkin berbeda di berbagai pengguna, agen pengguna,
dan sistem operasi. Batas ini juga harus cukup kasar
(lihat Keamanan dan Izin).
Model ini sengaja tidak secara formal membedakan 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 harus
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
.
Fungsi ini memerlukan 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 mengemulasikan peristiwa tidak ada aktivitas di DevTools tanpa benar-benar tidak ada aktivitas. Di DevTools, buka tab Sensors dan cari Emulasikan status Detektor Tidak Ada Aktivitas. Anda dapat melihat berbagai opsi di video di bawah.
Dukungan pupeteer
Mulai Puppeteer versi 5.3.1, Anda dapat meniru berbagai status tidak ada aktivitas untuk menguji secara terprogram bagaimana perilaku aplikasi web Anda berubah.
Demo
Anda dapat melihat cara kerja Idle Detection API dengan demo Ephemeral Canvas yang menghapus kontennya setelah 60 detik tidak aktif. Anda bisa membayangkan alat ini ditempatkan di {i>department store<i} untuk anak-anak membuat coretan.
Polyfill
Beberapa aspek Idle Detection API dapat di-polyfill dan library deteksi tidak ada aktivitas seperti idle.ts ada, tetapi pendekatan ini dibatasi pada area konten aplikasi web itu sendiri: Library yang berjalan dalam konteks aplikasi web harus melakukan polling yang mahal untuk peristiwa input atau memproses perubahan visibilitas. Namun, lebih ketat lagi, library saat ini tidak dapat mengetahui kapan pengguna tidak ada aktivitas di luar area kontennya (misalnya, saat pengguna berada di tab lain atau logout dari komputernya sepenuhnya).
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 tingkat atas.
Kontrol dan privasi pengguna
Kami selalu ingin mencegah pihak yang berniat jahat menyalahgunakan API baru. Situs yang tampaknya independen, tetapi sebenarnya dikontrol oleh entitas yang sama, dapat memperoleh informasi pengguna yang tidak ada aktivitasnya dan mengaitkan data untuk mengidentifikasi pengguna unik di seluruh origin. Untuk mengurangi serangan semacam ini, Idle Detection API membatasi tingkat perincian peristiwa tidak ada aktivitas yang dilaporkan.
Masukan
Tim Chrome ingin mengetahui pengalaman Anda saat menggunakan Idle Detection API.
Ceritakan kepada kami tentang desain API
Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang tidak ada yang Anda perlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada implementasi 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 Components.
Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.
Menampilkan 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 mereka.
- Bagikan rencana penggunaannya di rangkaian pesan Discourse WICG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#IdleDetection
dan beri tahu kami tempat dan cara Anda menggunakannya.
Link bermanfaat
- Penjelasan untuk 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 diterapkan oleh Sam Goto. Dukungan DevTools ditambahkan oleh Maksim Sadym. Terima kasih kepada Joe Medley, Kayce Basques, dan Reilly Grant atas ulasan mereka tentang artikel ini. Gambar utama adalah karya Fernando Hernandez di Unsplash.