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

公開日: 2024 年 5 月 14 日

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

次の 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 の普遍的な採用は、ウェブ開発コミュニティにとって前進です。さまざまなアプリケーションと幅広いサポートにより、より信頼性が高く洗練されたウェブ エクスペリエンスを作成でき、最終的にはさまざまなブラウザのユーザーにメリットをもたらします。中断のないスムーズなウェブをぜひご利用ください。