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 cepat 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 termasuk 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 hanya 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 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

Status saat ini

Langkah Status
1. Membuat penjelasan T/A
2. Buat 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 tetap aktif screen mencegah layar perangkat nonaktif sehingga pengguna dapat melihat informasi yang ditampilkan di layar.

Mendapatkan penguncian layar saat aktif

Untuk meminta kunci tetap aktif layar, Anda perlu memanggil metode navigator.wakeLock.request() yang menampilkan objek WakeLockSentinel. Anda meneruskan jenis kunci tetap aktif yang diinginkan sebagai parameter ke metode ini, yang saat ini hanya terbatas pada 'screen' dan oleh karena itu bersifat opsional. Browser dapat menolak permintaan karena berbagai alasan (misalnya, karena level pengisian daya baterai terlalu rendah), jadi sebaiknya sertakan 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 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 otomatis melepaskan kunci tetap aktif layar 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 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 sehingga mereka tidak perlu melacaknya secara manual. Fitur ini tersedia mulai Chrome 87.

Siklus proses penguncian layar saat aktif

Saat Anda bermain dengan demo kunci tetap aktif layar, Anda akan melihat bahwa kunci tetap aktif 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 yang 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 diambil 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 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 di bawah menunjukkan Monitor Aktivitas macOS yang menunjukkan bahwa Chrome memiliki kunci tetap aktif layar yang aktif yang membuat sistem tetap aktif.

Masukan

Web Platform Incubator Community Group (WICG) dan tim Chrome ingin mengetahui pendapat dan pengalaman Anda terkait Screen Wake Lock API.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang diharapkan? Atau apakah ada metode atau properti yang tidak ada yang perlu Anda terapkan untuk mewujudkan ide Anda?

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dari 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.

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 dukungan untuk fitur tersebut.

Link bermanfaat

Ucapan terima kasih

Gambar utama oleh Kate Stone Matheson di Unsplash. Video pengelola tugas disediakan oleh Henry Lim.