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 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 màn hình là gì?

Để tránh làm tiêu hao pin, hầu hết các thiết bị đều nhanh chóng chuyển sang chế độ ngủ khi bạn không sạc đang rảnh. Mặc dù trong hầu hết trường hợp điều này là bình thường, nhưng một số ứng dụng cần giữ màn hình 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 trong một công thức hoặc một trò chơi như Ball Puzzle (Ghép hình bóng) sử dụng thiết bị Motion API cho đầu vào.

API chế độ thức màn hình đưa ra một cách ngăn việc thiết bị bị giảm độ sáng và khoá màn hình. Chiến dịch này khả năng mang lại các trải nghiệm mới đòi hỏi phải có ứng dụng dành riêng cho nền tảng cho đến nay.

Screen Wake Lock API giúp giảm nhu cầu xâm nhập và giải pháp cho nhu cầu năng lượng. Giải pháp này giải quyết những thiếu sót của một API cũ chỉ đơn giản là 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ù không còn nữa). Ứng dụng sẽ đưa bạn đến với một chuyến tham quan Rio bằng âm thanh ảo, theo lộ trình của năm 2016 Cự ly marathon tại Thế vận hội. Nếu không có khoá chế độ thức, màn hình thường xuyên tắt trong khi chuyến tham quan đang phát, khiến ứng dụng khó sử dụng.

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

  • Một ứng dụng công thức nấu ăn giúp màn hình luôn bật khi bạn nướng bánh hoặc nấu ăn bữa tối
  • Một ứng dụng thẻ lên máy bay hoặc vé giúp giữ màn hình 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
  • Một ứng dụng trình bày dựa trên nền tảng web giúp đảm bảo màn hình 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 thông số kỹ thuật 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 thành
5. Ra mắt Hoàn tất

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

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

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

khoá chế độ thức của screen

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

Thiết lập phương thức khoá chế độ thức 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 chỉ với 'screen', 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 (ví dụ: vì pin quá yếu), 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 ngoại lệ sẽ chứa thêm chi tiết trong trường hợp không thành công.

Phát hành khóa chế độ thức màn hình

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

Nếu bạn muốn tự động mở khóa chế độ thức 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ư 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ị ban đầu là false và thay đổi thành true sau khi "release" sự kiện được gửi đi. Thuộc tính này giúp nhà phát triển web biết khi nào một khóa đã được phát hành để họ không cần theo dõi quá trình 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 khoá chế độ thức của màn hình

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

Cách lấy lại khoá chế độ thức của màn hình: 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 mà bạn thực hiện phụ thuộc vào nhu cầu của ứng dụng. Mặc dù vậy, bạn vẫn nên dùng phương pháp nhẹ nhất có thể để ứng dụng của bạn giảm thiểu đến 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 các trường hợp sử dụng của bạn có thể có thể được giải quyết bằng một trong các giải pháp thay thế sau:

  • Nếu ứng dụng của bạn đang tải xuống lâu dài, hãy cân nhắc sử dụ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 đồng bộ hoá trong nền.

Bản minh hoạ

Xem bản minh hoạ về tính năng Khoá màn hình và nguồn minh hoạ. Lưu ý cách khóa chế độ thức màn hình được tự động phát hành khi bạn chuyển đổi thẻ hoặc ứng dụng.

Khoá chế độ thức 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 ứng dụng có đang ngăn máy tính của bạn chuyển sang chế độ ngủ. Video dưới đây giới thiệu về macOS Giám sát hoạt động cho biết Chrome có khóa chế độ thức màn hình đang hoạt động để giúp hệ thống luôn bật.

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 về những suy nghĩ và trải nghiệm với API chế độ khoá màn hình.

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

Có điều gì về API không 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 để triển khai ý tưởng của mình không?

Báo cáo sự cố về triển khai

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hoặc là triển khai 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ớ bao gồm 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 Components (Thành phần) thành Blink>WakeLock. Đột phá hoạt động rất hiệu quả để chia sẻ các bản chép lời 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ự hỗ trợ công khai của bạn giúp Nhóm Chrome ưu tiên các tính năng và hướng dẫn các nhà cung cấp trình duyệt khác điều quan trọng là cần hỗ trợ họ.

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 cho phép quản lý công việc của Henry Lim.