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 Programming

Import maps の使い方

Import maps の使い方について説明します。

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

Web Vitals

Webページ読み込み高速化に対する<script>タグのdefer/async属性について

Webページ読み込み高速化に対する<script>タグのdefer/async属性について書いています。

Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch を紹介します。

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …