Trang này được dịch bởi Cloud Translation API.

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

Sử dụng API Phát hiện trạng thái không hoạt động để tìm hiểu khi nào người dùng không sử dụng thiết bị của họ.

Thomas Steiner

API Phát hiện trạng thái rảnh là gì?

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 điều như vậy 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 đến một 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 đề xuất cho API Phát hiện trạng thái rảnh

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

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 danh bạ của họ hiện có thể truy cập được.
Các ứng dụng kiosk hiển thị công khai, chẳng hạn như trong bảo tàng, có thể sử dụng API này để quay lại "trang chủ" chế độ xem nếu không có ai tương tác với kiosk nữa.
Những ứng dụng yêu cầu tính toán tốn kém, chẳng hạn như 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ọ.

Trạng thái hiện tại

Bước	Trạng thái
1. Tạo thông báo giải thích	Hoàn tất
2. Tạo bản nháp ban đầu của thông số kỹ thuật	Hoàn tất
3. Thu thập ý kiến phản hồi và lặp lại thiết kế	Đang tiến hành
4. Bản dùng thử theo nguyên gốc	Ðã hoàn tất
5. Ra mắt	Chromium 94

Cách sử dụng API Phát hiện trạng thái rảnh

Phát hiện tính năng

Để kiểm tra xem API Phát hiện trạng thái rảnh 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 Phát hiện trạng thái rảnh

API Phát hiện trạng thái rảnh giả định rằng có một mức độ tương tác nào đó 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 dưới hai chiều:

Trạng thái rảnh của người dùng: active hoặc idle: người dùng có 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 ở trạng thái rảnh: locked hoặc unlocked: hệ thống có một phương thức khoá màn hình đang hoạt động (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ó 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 tương đối (xem bài viết Bảo mật và quyền).

Mô hình này có chủ đích 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), toàn bộ tác nhân người dùng hoặc hệ điều hành; định nghĩa này được để lại cho tác nhân người dùng.

Sử dụng API Phát hiện trạng thái rảnh

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

// 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ể cho 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 rảnh bằng cách gọi Phương thức start() của IdleDetector. Thao tác này sẽ lấy một đối tượng có threshold ở trạng thái rảnh mong muốn 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 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);
}

Bạn có thể huỷ phát hiện trạng thái rảnh bằng cách gọi hàm Điều khoản dịch vụ và Chính sách quyền riêng tư của AbortController abort() .

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

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

Kể từ Chromium 94, bạn có thể mô phỏng các sự kiện ở trạng thái rảnh trong Công cụ cho nhà phát triển mà không thực sự ở trạng thái rảnh. Trong Công cụ cho nhà phát triển, hãy mở thẻ Cảm biến rồi tìm Mô phỏng trạng thái Trình phát hiện trạng thái rảnh. Bạn có thể thấy nhiều lựa chọn trong video dưới đây.

Mô phỏng trạng thái Trình phát hiện trạng thái rảnh trong Công cụ cho nhà phát triển.

Hỗ trợ Puppeteer

Kể từ phiên bản Puppeteer 5.3.1, bạn có thể mô phỏng các trạng thái rảnh để kiểm thử bằng cách lập trình xem hành vi của ứng dụng web thay đổi như thế nào.

Bản minh hoạ

Bạn có thể xem cách API Phát hiện trạng thái rảnh trong thực tế qua bản minh hoạ Canvas tạm thời sẽ xoá API sau 60 giây không hoạt động. Bạn có thể hình dung việc này được triển khai trong một phòng ban để trẻ em vẽ hình tượng trưng.

Bản minh hoạ Canvas tạm thời

Polyfilling

Một số khía cạnh của API Phát hiện trạng thái rảnh là có thể điền bằng 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ị hạn chế với vùng nội dung riêng của ứng dụng web: Thư viện chạy trong ngữ cảnh của ứng dụng web cần thăm dò ý kiến tốn kém cho các sự kiện đầu vào hoặc theo dõi những thay đổi về mức độ hiển thị. Tuy nhiên, hạn chế hơn là ngày hôm nay, các thư viện không thể biết thời điểm người dùng chuyển sang trạng thái rảnh bên ngoài vùng nội dung của quảng cáo (ví dụ: khi người dùng đang ở trên 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 API Phát hiện trạng thái rảnh theo các nguyên tắc cốt lõi nêu trong phần Kiểm soát quyền truy cập vào các tính năng nền tảng web mạnh mẽ, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và công thái học. Khả năng sử dụng API này do Quyền 'idle-detection'. Để sử dụng API này, ứng dụng cũng phải chạy trong ngữ cảnh bảo mật cấp cao nhất.

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

Chúng tôi luôn muốn ngăn chặn đối tượng xấu sử dụng API mới sai mục đích. Các trang web có vẻ độc lập, nhưng thực tế là do cùng một pháp nhân kiểm soát, có thể lấy thông tin về trạng thái rảnh của người dùng và tương quan dữ liệu với nhau để xác định người dùng riêng biệt trên các nguồn gốc. Để giảm thiểu những cuộc tấn công này, API Phát hiện trạng thái rảnh giới hạn mức độ chi tiết của các sự kiện ở trạng thái rảnh được báo cáo.

Phản hồi

Nhóm Chrome muốn tìm hiểu về trải nghiệm của bạn với API Phát hiện trạng thái rảnh.

Cho chúng tôi biết về thiết kế API

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

Báo cáo sự cố về triển khai

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không? Báo cáo lỗi tại new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, các hướng dẫn đơn giản để tái tạo rồi nhập Blink>Input vào hộp Components (Thành phần). Glitch rất hữu ích khi chia sẻ các bản dựng lại nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

Bạn có định dùng API Phát hiện trạng thái không hoạt động không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ các tính năng đó.

Chia sẻ cách bạn dự định sử dụng tài khoản này trên chuỗi bài thuyết trình về WICG.
Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #IdleDetection đồng thời cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Các đường liên kết hữu ích

Xác nhận

Sam Goto triển khai API Phát hiện trạng thái rảnh. Maksim Sadym đã thêm tính năng hỗ trợ Công cụ cho nhà phát triển. Nhờ có Joe Medley, Kayce Basques và Reilly Grant cho biết các bài đánh giá của họ về bài viết này. Hình ảnh chính là của Fernando Hernandez trên Không hiển thị màn hình.