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

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

関連記事

Chrome

Chrome 96 で Lighthouse の検査が終わらない問題が修正されました

Chrome 96で Lighthouse の検査が終わらない問題について書きました。

Web

Webページ上のコピーしずらい文章をコピーする

Webページ上のコピーしずらい文章をコピーする方法を紹介します。

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Web Programming

Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。 目次1. インターネット2. インターネットを土台として存在するプロトコル3. Web とは?4. URL5. HTML2 …

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …