Không khoá màn hình bằng API Khoá chế độ thức trên màn hình

Pete LePage

Thomas Steiner

Xuất bản: Ngày 18 tháng 12 năm 2018

Browser Support

API Khoá chế độ thức trên màn hình là gì?

Để tránh tiêu hao pin, hầu hết các thiết bị đều nhanh chóng chuyển sang chế độ ngủ khi không hoạt động. Mặc dù điều này thường không có vấn đề gì, nhưng một số ứng dụng cần giữ màn hình ở trạng thái bật để hoàn tất công việc. Ví dụ: ứng dụng nấu ăn cho thấy các bước của một công thức hoặc một trò chơi như Ball Puzzle (Câu đố về quả bóng) sử dụng API chuyển động của thiết bị để nhập dữ liệu.

Screen Wake Lock API cung cấp một cách để ngăn thiết bị giảm độ sáng và khoá màn hình. Tính năng này cho phép tạo ra những trải nghiệm mới mà trước đây cần có một ứng dụng dành riêng cho nền tảng.

Screen Wake Lock API giúp giảm nhu cầu về các giải pháp thay thế có thể gây ra lỗi và tiêu tốn nhiều năng lượng. API này khắc phục những thiếu sót của một API cũ (chỉ có thể giữ màn hình luôn bật và có một số vấn đề về bảo mật và quyền riêng tư).

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

RioRun, một ứng dụng web do The Guardian phát triển, là một trường hợp sử dụng hoàn hảo (mặc dù ứng dụng này hiện không còn hoạt động). Ứng dụng này sẽ đưa bạn đi tham quan Rio bằng âm thanh ảo, theo tuyến đường của cuộc thi chạy marathon tại Thế vận hội 2016. Nếu không có khoá đánh thức, màn hình của người dùng sẽ thường xuyên tắt trong khi chuyến tham quan đang phát, khiến người dùng khó sử dụng.

Tất nhiên, còn nhiều trường hợp sử dụng khác:

Một ứng dụng công thức giữ màn hình luôn bật trong khi bạn nướng bánh hoặc nấu bữa tối
Một ứng dụng thẻ lên máy bay hoặc vé giữ màn hình bật cho đến khi mã vạch được quét
Ứng dụng kiểu ki-ốt luôn bật màn hình
Một ứng dụng trình bày dựa trên web giúp màn hình luôn bật trong khi trình bày

Sử dụng Screen Wake Lock API

API Khoá chế độ thức trên màn hình chỉ cung cấp một loại khoá chế độ thức: screen.

`screen` khoá chế độ thức

Khoá đánh thức screen ngăn màn hình của thiết bị tắt để người dùng có thể xem thông tin hiển thị trên màn hình.

Nhận khoá đánh thức màn hình

Để yêu cầu khoá đánh thức màn hình, bạn cần gọi phương thức navigator.wakeLock.request(). Phương thức này sẽ trả về một đối tượng WakeLockSentinel. Bạn có thể truyền loại screen dưới dạng một tham số (không bắt buộc). Trình duyệt có thể từ chối yêu cầu vì nhiều lý do (ví dụ: vì mức pin quá thấp), vì vậy, bạn nên bao bọc lệnh gọi trong một câu lệnh try...catch. Thông báo của ngoại lệ chứa thêm thông tin chi tiết trong trường hợp thất bại.

Giải phóng khoá chế độ thức của màn hình

Bạn cũng cần có cách để giải phóng khoá đánh thức màn hình bằng cách gọi phương thức release() của đối tượng WakeLockSentinel. Nếu không lưu trữ thông tin tham chiếu đến WakeLockSentinel, bạn sẽ không thể giải phóng khoá theo cách thủ công, nhưng khoá sẽ được giải phóng khi thẻ hiện tại không hiển thị.

Nếu muốn tự động giải phóng khoá đánh thức màn hình sau một khoảng thời gian nhất định, bạn có thể dùng window.setTimeout() để gọi release(), như trong ví dụ.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Đối tượng WakeLockSentinel có một thuộc tính tên là released. Thuộc tính này cho biết liệu một tín hiệu kết thúc đã được phát hành hay chưa. Giá trị ban đầu của biến này là false và thay đổi thành true sau khi một sự kiện "release" được gửi đi. Thuộc tính này giúp nhà phát triển web biết thời điểm khoá được phát hành mà không cần theo dõi thủ công.

Vòng đời của khoá chế độ thức của màn hình

Khi chơi với bản minh hoạ khoá đánh thức màn hình, bạn có thể thấy rằng khoá đánh thức màn hình nhạy cảm với khả năng hiển thị trang. Điều này có nghĩa là khoá chế độ thức của màn hình sẽ tự động được giải phóng khi bạn thu nhỏ một thẻ hoặc cửa sổ, hoặc chuyển khỏi một thẻ hoặc cửa sổ mà khoá chế độ thức của màn hình đang hoạt động.

Để lấy lại khoá đánh thức màn hình, hãy theo dõi sự kiện visibilitychange và yêu cầu khoá đánh thức màn hình mới khi sự kiện đó xảy ra:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Giảm thiểu tác động của bạn đến tài nguyên hệ thống

Bạn có nên sử dụng khoá đánh thức màn hình trong ứng dụng của mình không? Phương pháp bạn áp dụng sẽ tuỳ thuộc vào nhu cầu của ứng dụng. Bất kể phương pháp nào, bạn cũng nên sử dụng phương pháp đơn giản nhất có thể để ứng dụng của bạn giảm thiểu tác động đến tài nguyên hệ thống.

Trước khi thêm khoá đánh thức màn hình vào ứng dụng, hãy cân nhắc xem bạn có thể giải quyết các trường hợp sử dụng của mình bằng một trong những giải pháp thay thế sau đây hay không:

Nếu ứng dụng của bạn đang thực hiện các lượt tải xuống trong thời gian dài, hãy cân nhắc sử dụng tính năng tìm nạp ở chế độ nền.
Nếu ứng dụng của bạn đang đồng bộ hoá dữ liệu từ một máy chủ bên ngoài, hãy cân nhắc sử dụng tính năng đồng bộ hoá trong nền.

Bản minh hoạ

Hãy xem bản minh hoạ Screen Wake Lock và nguồn minh hoạ. Lưu ý cách khoá đánh thức màn hình tự động được giải phóng khi bạn chuyển đổi thẻ hoặc ứng dụng.

Khoá chế độ thức của màn hình trong trình quản lý tác vụ của hệ điều hành

Bạn có thể sử dụng trình quản lý tác vụ của hệ điều hành để xem có ứng dụng nào đang ngăn máy tính chuyển sang chế độ ngủ hay không. Video cho thấy Trình giám sát hoạt động của macOS cho biết Chrome có một khoá đánh thức màn hình đang hoạt động giúp hệ thống luôn ở trạng thái hoạt động.

Phản hồi

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hay việc triển khai có khác với quy cách không?

Báo cáo lỗi. Hãy cung cấp càng nhiều thông tin chi tiết càng tốt. Đưa ra hướng dẫn rõ ràng để tái hiện lỗi và đặt Components (Thành phần) thành Blink>WakeLock.

Tài nguyên

Lời cảm ơn

Video về trình quản lý tác vụ do Henry Lim cung cấp.