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 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 vấn đề như thiếu tương tác với bàn phím, chuột, màn hình, 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 API Phát hiện trạng thái rảnh

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

Các ứng dụng trong Chat 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 hay không.
Các ứng dụng kiosk được 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ó ai tương tác với kiosk nữa.
Các ứng dụng yêu cầu các phép tính 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ị.

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 quy cách	Hoàn tất
3. Thu thập ý kiến phản hồi và cải tiến thiết kế	Đang tiến hành
4. Bản dùng thử theo nguyên gốc	Ðã kết thúc
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 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 theo hai phương diện:

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 rảnh trên màn hình: locked hoặc unlocked: hệ thống có một phương thức 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 hoạt động tương tác với tác nhân người dùng.

Việc phân biệt active với idle yêu cầu thông tin 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 hợp lý (xem phần Bảo mật và quyền).

Mô hình này 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 hay hệ điều hành; định nghĩa này phụ thuộc vào 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 đã cấp quyền 'idle-detection'. Nếu quyền chưa được cấp, bạn cần yêu cầu cấp quyền qua IdleDetector.requestPermission(). Xin lưu ý rằng việc gọi phương thức này yêu cầu 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 tính năng 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ỷ quá trình 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ỷ quá trình 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 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 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 phát hiện trạng thái rảnh. Bạn có thể thấy các lựa chọn khác nhau trong video dưới đây.

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ợ công cụ điều chỉnh hình ảnh

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

Bản minh hoạ

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

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

Vải polyfilling

Một số khía cạnh của API phát hiện trạng thái rảnh là các thư viện phát hiện ở trạng thái rảnh và có thể điền nhiều lần, chẳng hạn như idle.ts, nhưng các phương pháp này bị hạn chế ở vùng nội dung riêng của ứng dụng web: Thư viện chạy trong bối cảnh ứng dụng web cần thăm dò ý kiến tốn nhiều tài nguyên cho các sự kiện đầu vào hoặc theo dõi các thay đổi về chế độ hiển thị. Tuy nhiên, theo một cách hạn chế hơn, các thư viện hiện không thể biết thời điểm 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 ở 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

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 bài viết Kiểm soát quyền truy cập vào các tính năng của 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à hiệu quả công thái học. 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 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 các đối tượng độc hại sử dụng API mới sai mục đích. Các trang web có vẻ độc lập, nhưng trên thực tế do cùng một thực thể kiểm soát, có thể thu thập thông tin nhàn rỗi 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 giữa các nguồn gốc. Để giảm thiểu các kiểu 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 không hoạt động được báo cáo.

Ý kiến phản hồi

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

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

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có thiếu phương thức hoặc thuộc tính nào mà bạn cần triển khai 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 vào vấn đề hiện tại.

Báo cáo sự cố với quá trình triển khai

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

Hỗ trợ API

Bạn có định sử dụng API Phát hiện trạng thái rảnh 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ính năng này trên chuỗi bài đăng WICG Discourse.
Hãy gửi một bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag #IdleDetection và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.

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

Nội dung giải thích công khai
Quy cách của bản nháp
Bản minh hoạ API phát hiện trạng thái rảnh | Nguồn minh hoạ API phát hiện trạng thái rảnh
Theo dõi lỗi
Mục ChromeStatus.com
Thành phần nhấp nháy: Blink>Input

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