Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

投稿日:2020年8月17日 更新日:

1. Screen Wake Lock API

Google Chrome 84 で、Screen Wake Lock API が実装されました。

1. 機能

この API を使うと、「ブラウザでページを見ている際に、タッチ操作などせず放っておいてもディスプレイをスリープさせない」という動作を実現することができます。

2. 動作

OS の設定には、「○分間操作がなければ、ディスプレイをスリープさせる」といった項目がありますが、Screen Wake Lock API が有効になっていると、常に何かしら操作しているのと同等の扱いになるようです。

そのため、Screen Wake Lock API を有効にしてから無効に戻した場合、すぐにスリープになるのではなく、「無効にしてから○分間が過ぎる」とスリープに入るという動作になります。

3. 仕様

4. ブラウザの対応状況

2. サンプルページ

この API を使ったサンプルページを作ってみました。

サンプルページ

🔗 Screen Wake Lock API を試す

ブラウザでソースコードを表示すると、何をやっているかが分かります。

操作手順

[Screen Wake Lock をスタートする] というボタンを押すと、Screen Wake Lock が有効になります。有効にしておく時間も設定できます。

3. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

WebAssembly を試してみた

2018年10月における WebAssembly の状況を記録するために、現時点での WebAssembly を試してみることにしました。 目次1. WebAssembly とは?WebAssembl …

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。