Tetap terjaga dengan Screen Wake Lock API

Screen Wake Lock API menyediakan cara untuk mencegah perangkat meredupkan atau mengunci layar saat aplikasi perlu terus berjalan.

Pete LePage
Thomas Steiner

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 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 menipu dan berpotensi membutuhkan daya. 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 tidak lagi tersedia). Aplikasi ini mengajak Anda melakukan tur audio virtual di Rio, mengikuti rute maraton Olimpiade 2016. Tanpa wake lock, layar pengguna akan sering dinonaktifkan saat 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 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 kunci layar aktif, Anda harus memanggil metode navigator.wakeLock.request() yang menampilkan objek WakeLockSentinel. Anda meneruskan metode ini jenis penguncian layar saat aktif yang diinginkan 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.

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 menciutkan 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 Anda pada resource 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 penguncian layar saat aktif ke aplikasi, pertimbangkan apakah kasus penggunaan Anda dapat diselesaikan dengan salah satu solusi alternatif berikut:

Demo

Lihat demo Screen Wake Lock dan sumber demo. Perhatikan cara penguncian layar saat aktif otomatis dilepaskan 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 tentang API yang tidak berfungsi seperti yang diharapkan? Atau adakah metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda?

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan 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 Components ke Blink>WakeLock. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan 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.

Link bermanfaat

Ucapan terima kasih

Banner besar oleh Kate Stone Matheson di Unsplash. Video pengelola tugas dari Henry Lim.