😴

画面起動ロック API を使って開発効率を向上させよう！

2024/11/27に公開

ウェブ開発中に、ブラウザがスリープしてしまって開発効率が落ちた経験はありませんか？特にホットモジュールリロード（HMR）を利用しているときに画面がスリープすると、開発の流れが途切れてしまうこともありますよね。
そんな時に便利なのが Screen Wake Lock API です。この API を使うと、画面がスリープしないように制御できるので、HMR を活用したスムーズな開発体験をサポートしてくれます。

 Screen Wake Lock API とは？Screen Wake Lock API は、デバイスが自動的にスリープするのを防ぐためのブラウザ API です。通常、一定時間操作がないとデバイスはスリープしますが、これを防ぐことでアプリの操作性を高めたり、開発中のコードの動作を確認し続けたりすることができます。
公式ドキュメントはこちら：

Screen Wake Lock API - MDN Web Docs

 実装は簡単！数行で完了Screen Wake Lock API は驚くほど簡単に実装できます。以下に基本的なコードを示します。
async function enableWakeLock() {
  try {
    const wakeLock = await navigator.wakeLock.request('screen');
    console.log('Wake Lock is active!');
    return wakeLock;
  } catch (err) {
    console.error(`Wake Lock request failed: ${err.message}`);
  }
}
この関数をユーザーのアクション（クリックやタップなど）に紐づけるだけで動作します。例えば、以下のように設定することで、スリープを防止できます。
document.addEventListener('click', () => {
  enableWakeLock();
});

 開発環境での活用開発中にこの API を使うと、例えば HMR を利用しているときに画面がスリープしないようにできます。以下のコードを開発中のプロジェクトに組み込んでみましょう。
if (import.meta.hot) {
  document.addEventListener('click', () => {
    enableWakeLock();
  });
  console.log('Screen Wake Lock is enabled during HMR!');
}
これで、HMR を使ってコードを更新している間、デバイスがスリープすることはありません。ユーザーのアクションに応じて一度 enableWakeLock を呼び出せば、デバイスがスリープに入らなくなります。

 注意点ユーザーアクションが必須

Screen Wake Lock API は、セキュリティとプライバシーの観点から、ユーザーが明示的に操作を行う場合にのみ動作します（例：クリックやタップ）。
対応ブラウザの確認

おおよそほぼ全ての環境でサポートされています。（iOSでPWAにすると機能しなくなるバグがある）
最新のサポート状況は MDN で確認しましょう。

 まとめScreen Wake Lock API を使えば、画面スリープを防ぎながら開発を効率化できます。HMR を活用している際にもスムーズにコード更新を行えるようになるので、ストレスフリーな開発体験を実現可能です。
もちろんこれを用いたサービス開発もめっちゃ生きるところがあります！読み物サイトはゆっくり読めるようにToggleボタン置いておいてほしいですね。
あなたもぜひ、この便利な API をプロジェクトに取り入れてみてください！
Have a good days!

Screen Wake Lock API とは？

実装は簡単！数行で完了

開発環境での活用

注意点

まとめ

Discussion