Screen Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan atau mengunci layar saat aplikasi perlu terus berjalan.
Apa itu Screen Wake Lock API?
Agar baterai tidak habis, sebagian besar perangkat akan beralih ke mode tidur dengan cepat saat tidak ada aktivitas. Meskipun hal ini tidak masalah sebagian besar waktu, beberapa aplikasi perlu menjaga layar tetap aktif untuk menyelesaikan tugasnya. Contohnya mencakup aplikasi memasak yang menampilkan langkah-langkah resep atau game seperti Ball Puzzle, yang menggunakan API gerakan perangkat untuk input.
Screen Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan dan mengunci layar. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi khusus platform.
Screen Wake Lock API mengurangi kebutuhan untuk solusi yang tidak aman dan berpotensi menggunakan daya yang besar. Fitur ini mengatasi kekurangan API lama yang hanya menyebabkan layar tetap aktif serta memiliki sejumlah masalah keamanan dan privasi.
Kasus penggunaan yang disarankan untuk Screen Wake Lock API
RioRun, aplikasi web yang dikembangkan oleh The Guardian, adalah kasus penggunaan yang sempurna (meskipun sudah tidak tersedia lagi). Aplikasi ini mengajak Anda melakukan tur audio virtual di Rio, mengikuti rute maraton Olimpiade 2016. Tanpa penguncian layar saat aktif, layar pengguna akan sering dinonaktifkan saat tur diputar, sehingga sulit digunakan.
Tentu saja, ada banyak kasus penggunaan lainnya:
- Aplikasi resep yang membuat layar tetap menyala saat Anda memanggang kue atau memasak makan malam
- Aplikasi boarding pass atau tiket yang membuat layar tetap menyala hingga kode batang dipindai
- Aplikasi bergaya kios yang membuat layar tetap menyala secara terus-menerus
- Aplikasi presentasi berbasis web yang membuat layar tetap menyala selama presentasi
Status saat ini
Langkah | Status |
---|---|
1. Membuat penjelasan | T/A |
2. Membuat draf awal spesifikasi | Selesai |
3. Mengumpulkan masukan dan melakukan iterasi desain | Selesai |
4. Uji coba origin | Selesai |
5. Luncurkan | Selesai |
Menggunakan Screen Wake Lock API
Jenis penguncian layar saat aktif
Screen Wake Lock API saat ini hanya menyediakan satu jenis wake lock: screen
.
screen
penguncian layar saat aktif
Kunci layar aktif screen
mencegah layar perangkat dinonaktifkan
sehingga pengguna dapat melihat informasi yang ditampilkan di layar.
Mendapatkan kunci layar saat aktif
Untuk meminta penguncian layar saat aktif, Anda perlu memanggil metode navigator.wakeLock.request()
yang menampilkan objek WakeLockSentinel
.
Anda meneruskan jenis wake lock yang diinginkan ke metode ini sebagai parameter,
yang saat ini hanya terbatas pada 'screen'
dan karenanya bersifat opsional.
Browser dapat menolak permintaan karena berbagai alasan (misalnya,
karena level pengisian daya baterai terlalu rendah),
jadi sebaiknya gabungkan panggilan dalam pernyataan try…catch
.
Pesan pengecualian akan berisi detail selengkapnya jika terjadi kegagalan.
Melepas kunci layar saat aktif
Anda juga memerlukan cara untuk melepaskan kunci layar yang aktif, yang dicapai dengan memanggil
metode release()
dari objek WakeLockSentinel
.
Jika Anda tidak menyimpan referensi ke WakeLockSentinel
, tidak ada cara
untuk melepaskan kunci secara manual, tetapi kunci akan dilepaskan setelah tab saat ini tidak terlihat.
Jika ingin otomatis melepaskan kunci layar yang aktif
setelah jangka waktu tertentu berlalu,
Anda dapat menggunakan window.setTimeout()
untuk memanggil release()
, seperti yang ditunjukkan dalam contoh di bawah.
// 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);
Objek WakeLockSentinel
memiliki properti yang disebut released
yang
menunjukkan apakah sentinel telah dirilis.
Nilainya awalnya false
, dan berubah menjadi true
setelah peristiwa "release"
dikirim. Properti ini membantu developer web mengetahui kapan kunci
telah dilepaskan sehingga mereka tidak perlu melacaknya secara manual.
Fitur ini tersedia mulai Chrome 87.
Siklus proses kunci layar saat aktif
Saat memutar demo penguncian layar saat aktif, Anda akan melihat bahwa penguncian layar saat aktif sensitif terhadap visibilitas halaman. Artinya, penguncian layar saat aktif akan otomatis dilepaskan saat Anda meminimalkan tab atau jendela, atau beralih dari tab atau jendela tempat penguncian layar saat aktif aktif.
Untuk mendapatkan kembali penguncian layar saat aktif,
simak peristiwa visibilitychange
dan minta penguncian layar saat aktif baru saat peristiwa tersebut terjadi:
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
Meminimalkan dampak pada sumber daya sistem
Haruskah Anda menggunakan kunci layar aktif di aplikasi? Pendekatan yang diambil bergantung pada kebutuhan aplikasi. Apa pun pendekatannya, Anda harus menggunakan pendekatan yang paling ringan untuk aplikasi guna meminimalkan dampaknya terhadap resource sistem.
Sebelum menambahkan fitur penguncian layar saat aktif ke aplikasi, pertimbangkan apakah kasus penggunaan Anda dapat diselesaikan dengan salah satu solusi alternatif berikut:
- Jika aplikasi Anda melakukan download yang berjalan lama, pertimbangkan untuk menggunakan pengambilan latar belakang.
- Jika aplikasi Anda menyinkronkan data dari server eksternal, pertimbangkan untuk menggunakan sinkronisasi latar belakang.
Demo
Lihat demo Screen Wake Lock dan sumber demo. Perhatikan cara kunci layar diaktifkan secara otomatis saat Anda beralih tab atau aplikasi.
Screen Wake Locks di pengelola tugas OS
Anda dapat menggunakan pengelola tugas sistem operasi untuk melihat apakah aplikasi mencegah komputer Anda tidur. Video di bawah menampilkan Activity Monitor macOS yang menunjukkan bahwa Chrome memiliki penguncian layar saat aktif yang membuat sistem tetap aktif.
Masukan
Web Platform Incubator Community Group (WICG) dan tim Chrome ingin mengetahui pendapat dan pengalaman Anda dengan Screen Wake Lock API.
Ceritakan kepada kami tentang desain API
Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang diharapkan? Atau adakah metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda?
- Ajukan masalah spesifikasi di repositori GitHub Screen Wake Lock API atau tambahkan pendapat Anda ke masalah yang ada.
Laporkan masalah terkait penerapan
Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah penerapannya berbeda dengan spesifikasinya?
- Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail
sebanyak mungkin, berikan petunjuk sederhana untuk mereproduksi bug, dan
tetapkan Components ke
Blink>WakeLock
. Glitch sangat cocok untuk berbagi repro yang cepat dan mudah.
Menampilkan dukungan untuk API
Anda berencana menggunakan Screen Wake Lock API? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.
- Bagikan rencana Anda menggunakan API di rangkaian pesan Discourse WICG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#WakeLock
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.
Link bermanfaat
- Spesifikasi Rekomendasi Kandidat | Draf Editor
- Demo Screen Wake Lock | Sumber Demo Screen Wake Lock
- Melacak bug
- Entri ChromeStatus.com
- Bereksperimen dengan Wake Lock API
- Komponen Kedipan:
Blink>WakeLock
Ucapan terima kasih
Banner besar oleh Kate Stone Matheson di Unsplash. Video pengelola tugas atas izin Henry Lim.