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 trên màn hình cung cấp một cách để ngăn thiết bị làm mờ hoặc khoá màn hình khi một ứng dụng cần 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 làm tiêu hao pin, hầu hết các thiết bị sẽ nhanh chóng chuyển sang chế độ ngủ khi không hoạt động. Mặc dù hầu như mọi lúc đều ổn, nhưng một số ứng dụng cần giữ màn hình luôn bật để hoàn tất công việc. Ví dụ: ứng dụng nấu ăn hiển thị các bước của một công thức hoặc một trò chơi như Ball Puzzle (Ứng dụng nấu ăn). Ứng dụng này sử dụng API chuyển động của thiết bị để nhập.

API Khoá chế độ thức trên màn hình cung cấp một cách để ngăn thiết bị làm mờ và khoá màn hình. Chức năng này mang lại những trải nghiệm mới mà cho đến nay, cần có ứng dụng dành riêng cho nền tảng.

API Khoá chế độ thức trên màn hình giúp giảm nhu cầu tìm các giải pháp tự động hoặc gây ngốn pin. Phiên bản này giải quyết các thiếu sót của một API cũ (bị giới hạn ở việc chỉ bật màn hình) cũng như gặp 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 trên 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 sẽ đưa bạn vào một chuyến tham quan ảo có âm thanh đến Rio, theo lộ trình của cuộc thi chạy marathon thế vận hội năm 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 khi chuyến tham quan được phát, khiến người dùng khó sử dụng.

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

  • Một ứng dụng công thức nấu ăn luôn bật màn hình 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é luôn bật màn hình cho đến khi quét mã vạch
  • Ứng dụng kiểu kiosk giúp màn hình ở trạng thái bật liên tục
  • Ứng dụng trình bày dựa trên nền tảng 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 thông báo 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.

Sử dụng phương thức khoá chế độ thức trên 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 cho phương thức này loại khoá chế độ thức mong muốn dưới dạng tham số, hiện 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ực hiện được.

Phát hành khoá chế độ thức trên màn hình

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

Nếu muốn tự động huỷ khoá chế độ thức của màn hình sau một khoảng thời gian nhất định, bạn có thể sử dụng window.setTimeout() để gọi release(), như minh hoạ 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 giám sát đã được thả ra hay chưa. Ban đầu, giá trị của lớp này là false và sẽ thay đổi thành true sau khi 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 mở để họ không cần theo dõi việc này theo cách thủ công. Tính năng này đã có trên Chrome 87.

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

Khi xem bản minh hoạ khoá chế độ thức trên màn hình, bạn sẽ nhận thấy khoá chế độ thức trên màn hình nhạy cảm với chế độ hiển thị trang. Điều này có nghĩa là khoá chế độ thức trên màn hình sẽ tự động mở ra khi bạn thu nhỏ một thẻ hoặc cửa sổ, hoặc khi chuyển khỏi một thẻ hoặc cửa sổ đang hoạt động với khoá chế độ thức trên màn hình.

Để có lại khoá chế độ thức màn hình, hãy theo dõi sự kiện visibilitychange và yêu cầu một phương thức khoá chế độ thức màn hình mới khi chúng diễn 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 khóa chế độ 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 phụ thuộc vào nhu cầu của ứng dụng. Dù vậy, bạn nên sử dụng phương pháp gọn nhẹ nhất có thể cho ứng dụng để giảm thiểu tác động đến tài nguyên hệ thống.

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

  • Nếu ứng dụng của bạn đang 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 trong 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ạ

Xem bản minh hoạ về tính năng Khoá chế độ thức trên màn hình và nguồn bản minh hoạ. Hãy lưu ý cách khoá chế độ thức trên màn hình tự động mở ra khi bạn chuyển đổi giữa các thẻ hoặc ứng dụng.

Tính năng Khoá chế độ thức trên màn hình trong trình quản lý tác vụ 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 của bạn chuyển sang chế độ ngủ không. Video dưới đây cho thấy Activity Monitor (Trình theo dõi 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úp hệ thống luôn bật.

Ý kiến phản hồi

Nhóm cộng đồng vườn ươm 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ới API khóa chế độ thức màn hình.

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

Có vấn đề nào về API không hoạt động như 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á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 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 chi tiết nhất có thể, cung cấp hướng dẫn đơn giản để tái tạo lỗi và đặt Thành phần thành Blink>WakeLock. Hiệu ứng nhiễu rất hữu ích trong việc chia sẻ các bản sửa đổi nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API Screen Wake Lock 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ợ họ.

  • Chia sẻ cách bạn dự định sử dụng API này trên chuỗi bài viết WICG Discourse.
  • Hãy gửi một bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag #WakeLock 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

Xác nhận

Hình ảnh chính của Kate Stone Matheson trên Unsplash. Video về Trình quản lý tác vụ của Henry Lim.