Tetap terjaga dengan Screen Wake Lock API

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:

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?

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.

Link bermanfaat

Ucapan terima kasih

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