Screen Wake Lock API menyediakan cara untuk mencegah perangkat meredup atau mengunci layar saat aplikasi perlu tetap 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 sering kali tidak menjadi masalah, beberapa aplikasi perlu menjaga layar tetap aktif untuk menyelesaikan pekerjaannya. 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 meredup dan mengunci layar. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi khusus platform.
Screen Wake Lock API mengurangi kebutuhan akan solusi yang rumit dan berpotensi boros daya. Versi ini mengatasi kekurangan API lama yang terbatas hanya untuk membuat layar tetap aktif dan 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 akan membawa Anda dalam tur audio virtual Rio, mengikuti rute maraton Olimpiade 2016. Tanpa penguncian layar saat aktif, layar pengguna akan sering mati selama tur diputar, sehingga sulit digunakan.
Tentu saja, ada banyak kasus penggunaan lainnya:
- Aplikasi resep yang membuat layar tetap aktif saat Anda memanggang kue atau memasak makan malam
- Aplikasi boarding pass atau tiket yang membuat layar tetap aktif hingga kode batang dipindai
- Aplikasi bergaya kios yang membuat layar terus aktif
- Aplikasi presentasi berbasis web yang membuat layar tetap aktif selama presentasi
Status saat ini
Langkah | Status |
---|---|
1. Buat pesan penjelasan | T/A |
2. Membuat draf awal spesifikasi | Selesai |
3. Mengumpulkan masukan dan mengulangi 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 penguncian layar saat aktif: screen
.
Penguncian layar saat aktif screen
Penguncian layar saat aktif screen
mencegah layar perangkat dinonaktifkan
sehingga pengguna dapat melihat informasi yang ditampilkan di layar.
Mendapatkan penguncian layar saat aktif
Untuk meminta penguncian layar saat aktif, Anda harus memanggil metode navigator.wakeLock.request()
yang menampilkan objek WakeLockSentinel
.
Anda meneruskan jenis penguncian layar saat aktif yang diinginkan ke metode ini sebagai parameter,
yang saat ini dibatasi hanya untuk 'screen'
sehingga 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.
Melepaskan penguncian layar saat aktif
Anda juga memerlukan cara untuk melepaskan penguncian layar saat aktif, yang dilakukan dengan memanggil
metode release()
dari objek WakeLockSentinel
.
Jika Anda tidak menyimpan referensi ke WakeLockSentinel
, tidak ada cara
untuk melepas kunci secara manual, tetapi kunci akan dilepaskan setelah tab saat ini tidak terlihat.
Jika ingin otomatis melepas penguncian layar saat aktif
setelah jangka waktu tertentu berlalu,
Anda dapat menggunakan window.setTimeout()
untuk memanggil release()
, seperti 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 bernama released
yang
menunjukkan apakah sentinel telah dirilis.
Nilainya awalnya false
, dan berubah menjadi true
setelah peristiwa "release"
dikirim. Properti ini membantu developer web mengetahui saat kunci
telah dilepas sehingga mereka tidak perlu melacaknya secara manual.
Fitur ini tersedia mulai Chrome 87.
Siklus proses penguncian 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 memperkecil tab atau jendela, atau beralih dari tab atau jendela tempat penguncian layar saat aktif aktif.
Untuk mendapatkan kembali penguncian layar saat aktif,
proses peristiwa visibilitychange
dan minta penguncian layar saat aktif baru saat terjadi:
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
Meminimalkan dampak terhadap resource sistem
Haruskah Anda menggunakan penguncian layar saat aktif di aplikasi? Pendekatan yang Anda ambil bergantung pada kebutuhan aplikasi. Terlepas dari itu, Anda harus menggunakan pendekatan yang paling ringan mungkin untuk aplikasi Anda guna meminimalkan dampaknya terhadap resource sistem.
Sebelum menambahkan 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 Penguncian Layar Saat Aktif dan sumber demo. Perhatikan bagaimana penguncian layar saat aktif secara otomatis dilepaskan saat Anda beralih tab atau aplikasi.
Penguncian Layar Saat Aktif di pengelola tugas OS
Anda dapat menggunakan pengelola tugas sistem operasi untuk melihat apakah ada aplikasi yang mencegah komputer Anda tidur. Video di bawah menampilkan macOS Activity Monitor yang menunjukkan bahwa Chrome memiliki penguncian layar saat aktif yang aktif, yang membuat sistem tetap aktif.
Masukan
Web Platform Incubator Community Group (WICG) dan tim Chrome ingin mendengar tentang pemikiran dan pengalaman Anda dengan Screen Wake Lock API.
Beri tahu kami tentang desain API
Apakah ada sesuatu pada API yang tidak berfungsi seperti yang diharapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda?
- Laporkan masalah spesifikasi di repo GitHub Screen Wake Lock API atau tambahkan pendapat Anda ke masalah yang sudah ada.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?
- Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan
detail sebanyak mungkin, berikan petunjuk sederhana untuk mereproduksi bug, dan
tetapkan Komponen ke
Blink>WakeLock
. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.
Menunjukkan dukungan untuk API
Apakah 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 untuk menggunakan API ini 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 Penguncian Layar Saat Aktif | Sumber Demo Penguncian Layar Saat Aktif
- Bug pelacakan
- Entri ChromeStatus.com
- Bereksperimen dengan Wake Lock API
- Komponen Blink:
Blink>WakeLock
Ucapan terima kasih
Banner besar oleh Kate Stone Matheson di Unsplash. Video pengelola tugas disediakan oleh Henry Lim.