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 Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

highlight.js が引き起こすレイアウト・シフトを防止する方法を紹介します。

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …

Web

本サイトに、ココナラで出品してるサービスのウィジェットを表示しました

ココナラで出品してるサービスのウィジェットを、本サイトに表示しました。

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …