Tetap terjaga dengan Screen Wake Lock API

Pete LePage
Thomas Steiner

Dipublikasikan: 18 Desember 2018

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Apa itu Screen Wake Lock API?

Agar baterai tidak habis, sebagian besar perangkat akan segera beralih ke mode tidur saat tidak ada aktivitas. Meskipun hal ini 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 meredupkan dan mengunci layar. Kemampuan ini memungkinkan pengalaman baru yang, hingga saat ini, memerlukan aplikasi khusus platform.

Screen Wake Lock API mengurangi kebutuhan akan solusi sementara yang tidak efisien dan berpotensi menguras daya. API ini mengatasi kekurangan API lama yang terbatas pada menjaga 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 tidak lagi tersedia). Aplikasi ini akan membawa Anda dalam tur audio virtual di Rio, mengikuti rute maraton Olimpiade 2016. Tanpa kunci tetap aktif, layar pengguna akan sering dinonaktifkan saat tur diputar, sehingga sulit digunakan.

Tentu saja, ada banyak kasus penggunaan lainnya:

  • Aplikasi resep yang menjaga layar tetap aktif saat Anda membuat kue atau memasak makan malam
  • Aplikasi tiket atau boarding pass yang menjaga layar tetap aktif hingga kode batang dipindai
  • Aplikasi gaya kios yang membuat layar tetap aktif secara terus-menerus
  • Aplikasi presentasi berbasis web yang menjaga layar tetap aktif selama presentasi

Menggunakan Screen Wake Lock API

Screen Wake Lock API hanya menyediakan satu jenis wake lock: screen.

screen penguncian layar saat aktif

Wake lock screen mencegah layar perangkat nonaktif sehingga pengguna dapat melihat informasi yang ditampilkan di layar.

Mendapatkan kunci layar saat aktif

Untuk meminta kunci tetap aktif layar, Anda perlu memanggil metode navigator.wakeLock.request() yang menampilkan objek WakeLockSentinel. Secara opsional, Anda dapat meneruskan jenis, screen, sebagai parameter. Browser dapat menolak permintaan karena berbagai alasan (misalnya, karena level pengisian daya baterai terlalu rendah), jadi sebaiknya bungkus panggilan dalam pernyataan try...catch. Pesan pengecualian berisi detail selengkapnya jika terjadi kegagalan.

Melepaskan penguncian layar saat aktif

Anda juga memerlukan cara untuk melepaskan kunci tetap aktif layar, yang dilakukan dengan memanggil metode release() 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 Anda ingin melepaskan kunci aktivasi layar secara otomatis setelah jangka waktu tertentu berlalu, Anda dapat menggunakan window.setTimeout() untuk memanggil release(), seperti yang ditunjukkan dalam contoh.

// 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 sudah dilepaskan. Nilainya awalnya adalah false, dan berubah menjadi true setelah peristiwa "release" dikirim. Properti ini membantu developer web mengetahui kapan kunci telah dilepaskan, tanpa pelacakan manual.

Siklus proses penguncian layar saat aktif

Saat Anda bermain dengan demo kunci aktivasi layar, Anda dapat melihat bahwa kunci aktivasi layar sensitif terhadap visibilitas halaman. Artinya, fitur penguncian layar saat aktif akan otomatis dilepaskan saat Anda meminimalkan tab atau jendela, atau beralih dari tab atau jendela tempat fitur penguncian layar saat aktif diaktifkan.

Untuk mendapatkan kembali penguncian layar saat aktif, dengarkan 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 aktif layar di aplikasi? Pendekatan yang Anda ambil bergantung pada kebutuhan aplikasi. Namun, Anda harus menggunakan pendekatan yang paling ringan untuk aplikasi guna meminimalkan dampaknya terhadap resource sistem.

Sebelum menambahkan kunci 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 bagaimana kunci tetap aktif layar dilepaskan secara otomatis 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 memasuki mode tidur. Video tersebut menampilkan Monitor Aktivitas macOS yang menunjukkan bahwa Chrome memiliki kunci tetap aktif layar yang aktif sehingga sistem tetap aktif.

Masukan

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dari spesifikasi?

  • Laporkan bug. Berikan detail sebanyak mungkin. Berikan petunjuk yang jelas untuk mereproduksi bug, dan tetapkan Komponen ke Blink>WakeLock.

Resource

Ucapan terima kasih

Video pengelola tugas disediakan oleh Henry Lim.