Screen Wake Lock API がすべてのブラウザでサポートされるようになりました

Thomas Steiner

Screen Wake Lock API は、すべての主要なブラウザ（Chrome、Safari、Firefox）で正式に導入されました。この API を使用すると、デバイスの画面の起動動作を制御して、ウェブアプリケーションでの中断のないインタラクションを確保できます。

対応ブラウザ

84
84
126
16.4

ソース

現在、次の 2 つのユースケースが考えられます。

シームレスなプレゼンテーション: API により、ウェブベースのプレゼンテーションアプリやスライドショーアプリで画面が暗くなるのを防ぐことができるため、プレゼンターは洗練されたプロフェッショナルなエクスペリエンスを提供できるようになりました。
レシピサイト: API は画面をオンにしたままにできるため、ユーザーは、お菓子作りのレシピを実践するときに、手が生地で手でいっぱいになっているときに画面がオフになることを心配する必要はありません。

API の使用方法について詳しくは、Screen Wake Lock API で画面をロックするをご覧ください。次のコードスニペットは、最も一般的なインタラクションを示しています。

// 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);

世界各国で Screen Wake Lock API が採用されたことは、ウェブ開発コミュニティにとって前向きな前進となります。多様なアプリケーションと幅広いサポートにより、より信頼性が高く洗練されたウェブエクスペリエンスを生み出し、最終的には異なるブラウザのユーザーにメリットをもたらします。よりスムーズで中断のないウェブをお楽しみください！