Phát hiện người dùng không hoạt động bằng API Phát hiện trạng thái rảnh

Thomas Steiner

Ngày xuất bản: 18 tháng 5 năm 2020

Idle Detection API (API phát hiện trạng thái rảnh) sẽ thông báo cho nhà phát triển khi người dùng ở trạng thái rảnh, cho biết những hoạt động như không tương tác với bàn phím, chuột, màn hình, kích hoạt trình bảo vệ màn hình, khoá màn hình hoặc chuyển sang màn hình khác. Ngưỡng do nhà phát triển xác định sẽ kích hoạt thông báo.

Các trường hợp sử dụng được đề xuất cho Idle Detection API

Ví dụ về các trang web có thể sử dụng API này:

• Các ứng dụng trò chuyện hoặc trang web mạng xã hội trực tuyến có thể sử dụng API này để cho người dùng biết liệu họ có thể liên hệ với người liên hệ của mình hay không.
• Các ứng dụng ki-ốt công khai (ví dụ: trong bảo tàng) có thể sử dụng API này để quay lại chế độ xem "trang chủ" nếu không còn ai tương tác với ki-ốt nữa.
• Những ứng dụng yêu cầu các phép tính phức tạp (ví dụ: để vẽ biểu đồ) có thể giới hạn các phép tính này ở những thời điểm người dùng tương tác với thiết bị của họ.

Sử dụng API

Để kiểm tra xem Idle Detection API có được hỗ trợ hay không, hãy sử dụng:

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

Các khái niệm về API

Idle Detection API giả định rằng có một mức độ tương tác nhất định giữa người dùng, tác nhân người dùng (tức là trình duyệt) và hệ điều hành của thiết bị đang sử dụng. Điều này được thể hiện theo hai chiều:

• Trạng thái không hoạt động của người dùng: active hoặc idle: người dùng đã hoặc chưa tương tác với tác nhân người dùng trong một khoảng thời gian.
• Trạng thái màn hình ở chế độ chờ: locked hoặc unlocked: hệ thống có một chế độ khoá màn hình đang hoạt động (chẳng hạn như trình bảo vệ màn hình) ngăn chặn tương tác với tác nhân người dùng.

Để phân biệt active với idle, bạn cần có các phương pháp phỏng đoán có thể khác nhau giữa người dùng, tác nhân người dùng và hệ điều hành. Đây cũng phải là một ngưỡng tương đối thô (xem phần Bảo mật và quyền truy cập).

Mô hình này cố ý không phân biệt chính thức giữa hoạt động tương tác với nội dung cụ thể (tức là trang web trong một thẻ sử dụng API), tác nhân người dùng nói chung hoặc hệ điều hành; định nghĩa này được dành cho tác nhân người dùng.

Yêu cầu cấp quyền và khởi tạo

Bước đầu tiên khi sử dụng Idle Detection API là đảm bảo bạn đã cấp quyền 'idle-detection'. Nếu chưa được cấp quyền, bạn cần yêu cầu cấp quyền bằng IdleDetector.requestPermission(). Xin lưu ý rằng bạn cần có cử chỉ của người dùng để gọi phương thức này.

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

Bước thứ hai là tạo thực thể IdleDetector. threshold tối thiểu là 60.000 mili giây (1 phút). Cuối cùng, bạn có thể bắt đầu phát hiện trạng thái không hoạt động bằng cách gọi phương thức start() của IdleDetector. Phương thức này lấy một đối tượng có threshold ở trạng thái rảnh (tính bằng mili giây) và một signal không bắt buộc có AbortSignal để huỷ phát hiện trạng thái rảnh dưới dạng các tham số.

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

Dừng phát hiện trạng thái không hoạt động

Bạn có thể huỷ phát hiện trạng thái không hoạt động bằng cách gọi phương thức abort() của AbortController.

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

Hỗ trợ Công cụ cho nhà phát triển

Bạn có thể mô phỏng các sự kiện không hoạt động trong Công cụ cho nhà phát triển mà không thực sự ở trạng thái không hoạt động. Trong Công cụ cho nhà phát triển, hãy mở thẻ Sensors (Cảm biến) rồi tìm Emulate Idle Detector state (Mô phỏng trạng thái của Trình phát hiện trạng thái rảnh). Bạn có thể xem các lựa chọn trong video.

Hỗ trợ Puppeteer

Kể từ Puppeteer phiên bản 5.3.1, bạn có thể mô phỏng nhiều trạng thái không hoạt động để kiểm thử theo phương thức lập trình cách thay đổi hành vi của ứng dụng web.

Bản minh hoạ

Bạn có thể xem Idle Detection API hoạt động trong bản minh hoạ Ephemeral Canvas. Bản minh hoạ này sẽ xoá nội dung sau 60 giây không hoạt động. Bạn có thể tưởng tượng rằng công nghệ này được triển khai trong một cửa hàng bách hoá để trẻ em vẽ nguệch ngoạc.

Polyfill

Một số khía cạnh của Idle Detection API có thể được polyfill và các thư viện phát hiện trạng thái rảnh như idle.ts tồn tại, nhưng những phương pháp này bị giới hạn trong vùng nội dung riêng của ứng dụng web: Thư viện chạy trong bối cảnh của ứng dụng web cần thăm dò ý kiến phản hồi về các sự kiện đầu vào hoặc lắng nghe những thay đổi về khả năng hiển thị. Tuy nhiên, các thư viện không thể biết hôm nay khi nào người dùng không hoạt động bên ngoài vùng nội dung của thư viện (ví dụ: khi người dùng đang ở một thẻ khác hoặc đã đăng xuất hoàn toàn khỏi máy tính).

Tính bảo mật và quyền truy cập

Nhóm Chrome đã thiết kế và triển khai Idle Detection API (API phát hiện trạng thái không hoạt động) dựa trên các nguyên tắc cốt lõi được xác định trong Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm quyền kiểm soát của người dùng, tính minh bạch và tính tiện dụng. Khả năng sử dụng API này chịu sự kiểm soát của quyền 'idle-detection'. Để sử dụng API này, ứng dụng cũng phải chạy trong một bối cảnh bảo mật cấp cao nhất.

Quyền kiểm soát và quyền riêng tư của người dùng

Chúng tôi luôn muốn ngăn chặn các đối tượng xấu sử dụng sai mục đích các API mới. Các trang web có vẻ độc lập nhưng thực tế lại do cùng một thực thể kiểm soát, có thể thu thập thông tin về thời gian người dùng không hoạt động và liên kết dữ liệu để xác định người dùng riêng biệt trên các nguồn. Để giảm thiểu các loại tấn công này, Idle Detection API giới hạn độ chi tiết của các sự kiện không hoạt động được báo cáo.

Phản hồi

Có vấn đề gì về API mà không hoạt động như bạn mong đợi không? Hoặc có phương thức hay thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc bình luận về mô hình bảo mật? Báo cáo vấn đề về quy cách trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hoặc việc triển khai có khác với quy cách không? Báo cáo lỗi tại new.crbug.com. Nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện và nhập Blink>Input vào hộp Thành phần.

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng Idle Detection API không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng này.

• Chia sẻ cách bạn dự định sử dụng tính năng này trên chuỗi thảo luận WICG Discourse.
• Gửi một tweet đến @ChromiumDev bằng thẻ bắt đầu bằng #IdleDetection và cho chúng tôi biết bạn đang sử dụng tính năng này ở đâu và như thế nào.

Đường liên kết hữu ích

• Thông tin giải thích công khai
• Quy cách nháp
• Bản minh hoạ Idle Detection API | Nguồn của bản minh hoạ Idle Detection API
• Lỗi theo dõi
• Mục nhập trên ChromeStatus.com
• Thành phần Blink: Blink>Input

Lời cảm ơn

API Phát hiện trạng thái rảnh được Sam Goto triển khai. Maksim Sadym đã thêm tính năng hỗ trợ Công cụ cho nhà phát triển. Cảm ơn Joe Medley, Kayce Basques và Reilly Grant đã xem xét.