Screen Wake Lock API は、すべての主要なブラウザ(Chrome、Safari、Firefox)で正式に導入されました。この API を使用すると、デバイスの画面の起動動作を制御して、ウェブ アプリケーションでの中断のないインタラクションを確保できます。
現在、次の 2 つのユースケースが考えられます。
- シームレスなプレゼンテーション: API により、ウェブベースのプレゼンテーション アプリやスライドショー アプリで画面が暗くなるのを防ぐことができるため、プレゼンターは洗練されたプロフェッショナルなエクスペリエンスを提供できるようになりました。
- レシピサイト: API は画面をオンにしたままにできるため、ユーザーは、お菓子作りのレシピを実践するときに、手が生地で手でいっぱいになっているときに画面がオフになることを心配する必要はありません。
API の使用方法について詳しくは、Screen Wake Lock API で画面をロックするをご覧ください。次のコード スニペットは、最も一般的なインタラクションを示しています。
// 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);
世界各国で Screen Wake Lock API が採用されたことは、ウェブ開発コミュニティにとって前向きな前進となります。多様なアプリケーションと幅広いサポートにより、より信頼性が高く洗練されたウェブ エクスペリエンスを生み出し、最終的には異なるブラウザのユーザーにメリットをもたらします。よりスムーズで中断のないウェブをお楽しみください!