Screen Wake Lock API を使用すると、アプリを継続的に実行する必要がある場合にデバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。
Screen Wake Lock API とは何ですか?
ほとんどのデバイスは、バッテリーの消耗を防ぐために、アイドル状態になるとすぐにスリープ状態になります。ほとんどの場合はこれで問題ありませんが、一部のアプリでは、処理を完了するために画面をスリープ状態に保つ必要があります。たとえば、レシピの手順を示す料理アプリや、デバイスのモーション API を入力に使用する Ball Puzzle などのゲームがあります。
Screen Wake Lock API を使用すると、デバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。この機能により、これまでプラットフォーム固有のアプリが必要だった新しいエクスペリエンスを実現できます。
Screen Wake Lock API を使用すると、ハッキングや電力消費の多い回避策の必要性が軽減されます。これは、画面のオン保持のみに限定され、セキュリティとプライバシーに関する多くの問題があった古い API の欠点を解消します。
Screen Wake Lock API の推奨ユースケース
The Guardian が開発したウェブアプリ RioRun は、まさにそのユースケースでした(現在は利用できません)。アプリを使って、2016 年オリンピック マラソンのルートをたどるリオのバーチャル オーディオ ツアーを体験できます。ウェイクロックがないと、ツアーの再生中にユーザーの画面が頻繁にオフになり、使いづらくなります。
もちろん、他にも多くのユースケースがあります。
- ケーキを焼いたり夕食を作ったりする間、画面をオンに保つレシピ アプリ
- バーコードがスキャンされるまで画面をオンに保つ搭乗券アプリやチケット アプリ
- 画面を常にオンにするキオスク スタイルのアプリ
- プレゼンテーション中に画面をオンのままにするウェブベースのプレゼンテーション アプリ
現在のステータス
ステップ | ステータス |
---|---|
1. 説明を作成する | なし |
2. 仕様の最初の下書きを作成する | 完了 |
3. フィードバックを収集してデザインを反復する | 完了 |
4. オリジン トライアル | 完了 |
5. リリース | 完了 |
Screen Wake Lock API を使用する
wake lock の種類
現在、Screen Wake Lock API で提供されているウェイクロックは screen
の 1 種類のみです。
screen
wake lock
screen
ウェイクロックは、デバイスの画面がオフにならないようにし、ユーザーが画面に表示される情報を確認できるようにします。
画面の wake lock
画面ウェイクロックをリクエストするには、WakeLockSentinel
オブジェクトを返す navigator.wakeLock.request()
メソッドを呼び出す必要があります。このメソッドには、目的のウェイクロック タイプをパラメータとして渡します。現在は 'screen'
のみに制限されているため、省略可能です。ブラウザはさまざまな理由(バッテリー残量が低すぎるなど)でリクエストを拒否する可能性があるため、呼び出しを try…catch
ステートメントでラップすることをおすすめします。失敗した場合、例外のメッセージに詳細が含まれます。
画面の wake lock を解除する
また、WakeLockSentinel
オブジェクトの release()
メソッドを呼び出すことで画面の wake lock を解除する方法も必要です。WakeLockSentinel
への参照を保存しない場合、ロックを手動で解除することはできませんが、現在のタブが非表示になると解除されます。
一定の時間が経過した後に画面ウェイクロックを自動的に解除するには、次の例に示すように、window.setTimeout()
を使用して release()
を呼び出します。
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request();
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock released:', wakeLock.released);
});
console.log('Screen Wake Lock released:', wakeLock.released);
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
WakeLockSentinel
オブジェクトには、センチネルがすでにリリースされているかどうかを示す released
というプロパティがあります。値は最初は false
で、"release"
イベントがディスパッチされると true
に変わります。このプロパティは、ロックが解除されたタイミングをウェブ デベロッパーが把握するのに役立ちます。これにより、デベロッパーはロックの解除を手動で追跡する必要がなくなります。この機能は Chrome 87 以降で利用できます。
画面の wake lock のライフサイクル
画面ウェイクロックのデモを試すと、画面ウェイクロックはページの可視性に敏感であることがわかります。つまり、タブまたはウィンドウを最小化するか、画面の wake lock が有効になっているタブまたはウィンドウから切り替えると、画面の wake lock は自動的に解除されます。
画面の wake lock を再取得するには、visibilitychange
イベントをリッスンし、発生時に新しい画面の wake lock をリクエストします。
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
システム リソースへの影響を最小限に抑える
アプリで画面の wake lock を使用する必要はありますか? アプリのニーズは、デベロッパーが採用するアプローチによって決まります。ただし、アプリにとってできる限り軽量なアプローチを採用し、アプリがシステム リソースに及ぼす影響を最小限に抑える必要があります。
画面の wake lock をアプリに追加する前に、ユースケースを次のいずれかの代替ソリューションで解決できるかどうかを検討してください。
- アプリで長時間実行されるダウンロードを実行している場合は、バックグラウンド フェッチの使用を検討してください。
- アプリが外部サーバーからデータを同期している場合は、バックグラウンド同期の使用を検討してください。
デモ
Screen Wake Lock のデモとデモソースをご覧ください。タブまたはアプリを切り替えると、画面のウェイクロックが自動的に解除されます。
OS タスク マネージャーの画面の wake lock
オペレーティング システムのタスク マネージャーを使用して、コンピュータがスリープ状態にならないようにアプリケーションがあるかどうかを確認できます。次の動画は、macOS のアクティビティ モニタで、Chrome がシステムをスリープ状態にしないアクティブな画面ウェイクロックを持っていることを示しています。
フィードバック
Web Platform Incubator Community Group(WICG)と Chrome チームは、Screen Wake Lock API に関するご意見やご感想をお聞かせください。
API 設計について
API が想定どおりに機能していない点はありますか?または、アイデアを実装するために不足しているメソッドやプロパティがないかどうか。
- Screen Wake Lock API GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にコメントを追加します。
実装に関する問題を報告する
Chrome の実装にバグが見つかりましたか?あるいは、実装が仕様と異なっているのでしょうか?
- https://new.crbug.com でバグを報告します。できる限り詳細に説明し、バグを再現するための簡単な手順を示して、[Components] を
Blink>WakeLock
に設定します。Glitch は、すばやく簡単に再現を共有するのに最適です。
API のサポートを表示する
Screen Wake Lock API を使用する予定ですか?皆様の公開サポートは、Chrome チームが機能に優先順位を付ける際に役立ちます。また、他のブラウザ ベンダーがサポートすることの重要性についても説明できます。
- API の使用方法を WICG のディスカッション スレッドで共有してください。
- ハッシュタグ
#WakeLock
を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。
関連情報
- 仕様候補候補 | 編集者によるドラフト
- Screen Wake Lock のデモ | Screen Wake Lock のデモソース
- バグのトラッキング
- ChromeStatus.com のエントリ
- Wake Lock API をテストする
- 点滅コンポーネント:
Blink>WakeLock
謝辞
ヒーロー画像: Kate Stone Matheson、Unsplash。タスク マネージャーの動画は Henry Lim 提供。