Trang này được dịch bởi Cloud Translation API.

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

Screen Wake Lock API 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 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à cho đến nay, bạn 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 tạm thời có thể gây hao pin. 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 ở trạng thái bật và gặp phải 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 vào một chuyến tham quan ảo bằng âm thanh ở Rio, 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 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
Một ứng dụng thẻ lên máy bay hoặc vé giữ màn hình 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

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. Chạy	Hoàn tất

Sử dụng Screen Wake Lock API

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.

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

screenKhoá đánh thức 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.

Thận trọng: Phiên bản trước của quy cách cho phép thêm một khoá đánh thức system ngăn CPU của thiết bị chuyển sang chế độ chờ để ứng dụng của bạn có thể tiếp tục chạy. Chúng tôi quyết định tạm thời không tiếp tục loại hình này.

Nhận khoá chế độ thức của 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() trả về một đối tượng WakeLockSentinel. Bạn truyền cho phương thức này loại khoá đánh thức mong muốn dưới dạng một tham số. Hiện tại, tham số này 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 (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ệ sẽ 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ữ một 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ụ bên dưới.

// 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 sentinel đã đượ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 để họ không cần theo dõi khoá này theo cách thủ công. Tính năng này có trong Chrome 87.

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 sẽ nhận 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á chế độ thức của màn hình, hãy theo dõi sự kiện visibilitychange và yêu cầu khoá chế độ thức mới của màn hình khi các sự kiện này 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ể cho ứng dụng của mình để giảm thiểu tác động của ứng dụng lê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 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á đá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

Web Platform Incubator Community Group (WICG) và nhóm Chrome muốn biết ý kiến cũng như trải nghiệm của bạn về Screen Wake Lock API.

Hãy cho chúng tôi biết về thiết kế API

Có vấn đề 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 mà bạn cần triển khai ý tưởng của mình không?

Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub của Screen Wake Lock API hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

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?

Gửi báo cáo lỗi tại https://new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, đưa ra hướng dẫn đơn giản để mô phỏng lỗi và đặt Components (Thành phần) thành Blink>WakeLock.

Thể hiện sự ủng hộ đối với API

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

Chia sẻ cách bạn dự định sử dụng API này trên chuỗi thảo luận WICG.
Gửi một tweet đến @ChromiumDev bằng cách dùng thẻ bắt đầu bằng #WakeLock và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Đườ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ý tác vụ do Henry Lim cung cấp.