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 rảnh để tìm hiểu thời điểm người dùng không chủ động sử dụng thiết bị.

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ư thiếu 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. Một 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 API Phát hiện trạng thái rảnh

Sau đây là 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 lạc với người liên hệ của mình hay không.
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 chế độ xem "trang chủ" nếu không còn ai tương tác với kiosk nữa.
Các ứ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 video giải thích	Hoàn tất
2. Tạo bản nháp ban đầu của quy cách	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. Chạy	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 ở hai chiều:

Trạng thái rảnh 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ế độ rảnh: locked hoặc unlocked: hệ thống có một màn hình khoá đang hoạt động (chẳng hạn như trình bảo vệ màn hình) ngăn chặn việc 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à ngưỡng tương đối thô (xem phần Bảo mật và quyền).

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), toàn bộ tác nhân người dùng hoặc hệ điều hành; định nghĩa này được để 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 bạn đã cấp quyền 'idle-detection'. Nếu quyền này chưa được cấp, bạn cần yêu cầu quyền đó thông qua IdleDetector.requestPermission(). Xin lưu ý rằng việc gọi phương thức này yêu cầu một 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.');
}

Sau đó, bước thứ hai là tạo bản sao của 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. Phương thứ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ỷ tính năng phát hiện trạng thái rảnh 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

Kể từ Chromium 94, bạn có thể mô phỏng các sự kiện rảnh trong DevTools mà không cần thực sự rảnh. 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 bên dưới.

Mô phỏng trạng thái của 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ừ Puppeteer phiên bản 5.3.1, bạn có thể mô phỏng nhiều trạng thái rảnh để kiểm thử bằng cách lập trình cách hành vi của ứng dụng web thay đổi.

Bản minh hoạ

Bạn có thể xem API Phát hiện trạng thái rảnh đang hoạt động với màn hình minh hoạ Ephemeral Canvas (Canvas tạm thời) xoá nội dung sau 60 giây không hoạt động. Bạn có thể tưởng tượng việc triển khai ứng dụng này trong một cửa hàng bách hóa để trẻ em có thể vẽ nguệch ngoạc.

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

Tự động bổ sung tính năng

Một số khía cạnh của API Phát hiện trạng thái rảnh có thể được polyfill và thư viện phát hiện trạng thái rảnh như idle.ts tồn tại, nhưng các phương pháp này bị hạn chế ở khu vực nội dung 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 nghe các thay đổi về chế độ hiển thị. Tuy nhiên, nghiêm ngặt hơn, thư viện hiện không thể cho biết thời điểm người dùng ở trạng thái rảnh bên ngoài khu vực 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 API Phát hiện trạng thái rảnh bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong bài viết 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 cả quyền kiểm soát của người dùng, tính minh bạch và tính công thái học. Khả năng sử dụng API này được kiểm soát bằng quyền 'idle-detection'. Để sử dụng API, ứ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 và quyền riêng tư của người dùng

Chúng tôi luôn muốn ngăn chặn những đối tượng độc hại lợi dụng 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 pháp nhân kiểm soát có thể thu thập thông tin về trạng thái rảnh của người dù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 gốc. Để giảm thiểu những loại tấn công này, API Phát hiện trạng thái rảnh sẽ giới hạn mức độ chi tiết của các sự kiện rảnh được báo cáo.

Phản hồi

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

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc 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 nhận xét về mô hình bảo mật? Gửi 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 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 lỗi khi 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? Gửi 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, hướng dẫn đơn giản để tái hiện lỗi và nhập Blink>Input vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có dự định sử dụng API Phát hiện trạng thái rảnh 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 đó.

Hãy chia sẻ cách bạn dự định sử dụng công cụ này trên luồng thảo luận Discourse của WICG.
Gửi một tweet đến @ChromiumDev bằng hashtag #IdleDetection và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

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

Lời cảm ơ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. Cảm ơn Joe Medley, Kayce Basques và Reilly Grant đã xem xét bài viết này. Hình ảnh chính là của Fernando Hernandez trên Unsplash.