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

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

関連記事

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web Vitals

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

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

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Web

フォントサイズに関するCSSクラス名にはどんな名前があるのか調べてみました

目次はじめにCSS Fonts Module Level 3FontawesomeBootstrap (v4)まとめ参考 はじめに フォントサイズを表す CSSクラス名として、どんな名前を使うのがよい …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …