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

API Khoá chế độ thức của màn hình cung cấp một cách để ngăn thiết bị giảm độ sáng hoặc khoá màn hình khi ứng dụng cần phải tiếp tục chạy.

Pete LePage
Thomas Steiner

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 trạng thái ngủ khi không hoạt động. Mặc dù điều này không gây ra vấn đề gì trong hầu hết trường hợp, nhưng một số ứng dụng cần giữ cho màn hình luôn bật để hoàn tất công việc. Ví dụ: các ứng dụng nấu ăn cho thấy các bước của một công thức nấu ăn hoặc một trò chơi như Ball Puzzle (Trò chơi xếp hình bóng) sử dụng API chuyển động của thiết bị để nhập.

Screen Wake Lock API (API khoá chế độ thức trên màn hình) cung cấp một cách để ngăn thiết bị giảm độ sáng và khoá màn hình. Khả năng này cho phép các trải nghiệm mới mà cho đến nay, bạn cần có một ứng dụng dành riêng cho nền tảng.

API Khoá chế độ thức của màn hình giúp giảm nhu cầu sử dụng các giải pháp lách và có thể tốn nhiều pin. Phiên bản này giải quyết những thiếu sót của một API cũ, bị giới hạn ở việc chỉ 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 đề xuất cho API Khoá chế độ thức màn hình

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 không còn hoạt động nữa). Ứng dụng này đưa bạn tham quan Rio theo âm thanh ảo, đi theo tuyến đường của cuộc đua marathon Olympic 2016. Nếu không có khoá chế độ thức, màn hình của người dùng sẽ thường xuyên tắt trong khi bản trình bày đang phát, khiến họ khó sử dụng.

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

  • Ứng dụng công thức nấu ăn giúp màn hình luôn bật trong khi bạn nướng bánh hoặc nấu bữa tối
  • Ứng dụng thẻ lên máy bay hoặc vé giữ màn hình bật cho đến khi quét mã vạch
  • Một ứng dụng kiểu kiosk luôn bật màn hình liên tục
  • Ứ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

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

Bước Trạng thái
1. Tạo video giải thích Không áp dụng
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ế Hoàn tất
4. Bản dùng thử theo nguyên gốc Hoàn chỉnh
5. Ra mắt Hoàn tất

Sử dụng API Khoá chế độ thức trên màn hình

Các loại khoá chế độ thức

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

Khoá chế độ thức screen

Khoá chế độ 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 trên màn hình.

Nhận khoá chế độ thức của màn hình

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

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

Bạn cũng cần có cách để nhả khoá chế độ thức màn hình. Bạn có thể thực hiện việc này bằng cách gọi phương thức release() của đối tượng WakeLockSentinel. Nếu không lưu trữ tham chiếu đến WakeLockSentinel, bạn sẽ không thể mở khoá theo cách thủ công. Tuy nhiên, khoá này sẽ được huỷ bỏ khi thẻ hiện tại ẩn đi.

Nếu muốn tự động mở khoá chế độ thức màn hình sau khi một khoảng thời gian nhất định đã trôi qua, bạn có thể sử dụng window.setTimeout() để gọi release(), như trong ví dụ dưới đây.

// 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 cho biết liệu một người gửi đã được giải phóng hay chưa. Giá trị của biến này ban đầu 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 một khoá được phát hành để họ không cần theo dõi việc này theo cách thủ công. Phiên bản này được cung cấp kể từ Chrome 87.

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

Khi chơi với bản minh hoạ khoá chế độ thức màn hình, bạn sẽ nhận thấy rằng khoá chế độ 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 nhả 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ổ đang có khoá chế độ thức của màn hình.

Để lấy lại khoá chế độ thức của màn hình, hãy nghe sự kiện visibilitychange và yêu cầu khoá chế độ thức của 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 đến tài nguyên hệ thống

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

Trước khi thêm khoá chế độ 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 các giải pháp thay thế sau 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á ở chế độ nền.

Bản minh hoạ

Hãy xem bản minh hoạ về tính năng Khoá chế độ thức trên màn hình và nguồn minh hoạ. Hãy lưu ý cách khoá chế độ 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.

Khóa 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 liệu có ứng dụng nào đang ngăn máy tính của bạn chuyển sang trạng thái ngủ hay không. Video bên dưới cho thấy Trình giám sát hoạt động của macOS cho biết Chrome có một khoá chế độ thức màn hình đang hoạt động để giữ cho hệ thống thức.

Phản hồi

Nhóm cộng đồng ươm tạo nền tảng web (WICG) và nhóm Chrome muốn biết suy nghĩ và trải nghiệm của bạn về Screen Wake Lock API.

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

API có hoạt động như mong đợi không? Hoặc 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á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?

  • Báo cáo lỗi tại https://new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, cung cấp các hướng dẫn đơn giản để tái tạo lỗi và đặt Thành phần thành Blink>WakeLock. Glitch hoạt động rất hiệu quả để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

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

Bạn có định sử dụng API Khoá chế độ thức màn hì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 đó.

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

Lời cảm ơn

Hình ảnh chính của Kate Stone Matheson trên Unsplash. Video về Trình quản lý công việc của Henry Lim.