Tetap terjaga dengan Screen Wake Lock API

Screen Wake Lock API memberikan cara untuk mencegah perangkat meredup 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 masuk ke mode tidur dengan cepat saat ditinggalkan tidak ada aktivitas. Meskipun sering kali tidak apa-apa, beberapa aplikasi perlu mempertahankan layar tetap terbangun untuk menyelesaikan pekerjaan mereka. Contohnya mencakup aplikasi memasak yang menunjukkan langkah-langkah resep atau game seperti Ball Puzzle, yang menggunakan perangkat motion API untuk input.

Screen Wake Lock API memberikan cara untuk mencegah peredupan perangkat dan mengunci layar. Ini memungkinkan pengalaman baru yang, hingga sekarang, memerlukan aplikasi khusus platform.

Screen Wake Lock API mengurangi kebutuhan akan peretasan dan kemungkinan solusi yang boros listrik. Ini mengatasi kekurangan API yang lebih lama itu hanya sekadar membuat layar tetap aktif dan memiliki sejumlah keamanan dan privasi data.

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). Aplikasi ini membawa Anda dalam tur audio virtual Rio, mengikuti rute tahun 2016 Maraton olimpiade. Tanpa penguncian layar saat aktif, pengguna layar akan sering mati saat tur diputar, sehingga membuatnya sulit untuk digunakan.

Tentu saja, ada banyak kasus penggunaan lainnya:

  • Aplikasi resep yang membuat layar tetap aktif saat Anda memanggang kue atau memasak makan malam
  • Boarding pass atau aplikasi tiket yang menampilkan layar aktif hingga kode batang selesai dipindai
  • Aplikasi bergaya kios yang membuat layar terus aktif
  • Aplikasi presentasi berbasis web yang menjaga layar saat presentasi

Status saat ini

Langkah Status
1. Buat 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 penguncian layar saat aktif: screen.

screen penguncian layar saat aktif

Penguncian layar saat aktif screen mencegah layar perangkat berputar sehingga pengguna dapat melihat informasi yang ditampilkan di layar.

Mendapatkan penguncian layar saat aktif

Untuk meminta penguncian layar saat aktif, Anda perlu memanggil metode navigator.wakeLock.request() yang menampilkan objek WakeLockSentinel. Anda meneruskan 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.

Melepaskan penguncian layar saat aktif

Anda juga memerlukan cara untuk melepaskan penguncian layar saat aktif, yang dilakukan dengan memanggil metode Metode release() dari objek WakeLockSentinel. Jika Anda tidak menyimpan referensi ke WakeLockSentinel, tidak mungkin untuk melepaskan kunci secara manual, tetapi kunci akan dilepas setelah tab saat ini tidak terlihat.

Jika Anda ingin otomatis melepaskan penguncian layar saat 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 bernama released yang menunjukkan apakah sentinel telah dilepaskan. Nilainya awalnya false, dan berubah menjadi true setelah "release" peristiwa tersebut dikirim. Properti ini membantu developer web mengetahui saat kunci telah dirilis sehingga mereka tidak perlu melacak ini 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. Ini berarti bahwa penguncian layar saat aktif akan dilepaskan secara otomatis saat Anda meminimalkan tab atau jendela, atau beralih dari tab atau jendela tempat penguncian layar saat aktif aktif.

Untuk mendapatkan kembali penguncian layar saat aktif, memproses peristiwa visibilitychange dan meminta penguncian layar saat aktif baru bila terjadi:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Meminimalkan dampak pada sumber daya sistem

Haruskah Anda menggunakan penguncian layar saat aktif di aplikasi? Pendekatan yang Anda ambil bergantung pada kebutuhan aplikasi. Apa pun itu, Anda seharusnya gunakan pendekatan yang paling ringan bagi aplikasi Anda untuk meminimalkan terhadap sumber daya sistem.

Sebelum menambahkan penguncian layar saat aktif ke aplikasi, pertimbangkan apakah kasus penggunaan Anda diselesaikan dengan salah satu solusi alternatif berikut:

Demo

Lihat demo Penguncian Layar Aktif dan sumber demo. Perhatikan bagaimana penguncian layar saat aktif otomatis dilepaskan saat Anda beralih tab atau aplikasi.

Penguncian Layar Saat Aktif di pengelola tugas OS

Anda dapat menggunakan pengelola tugas sistem operasi Anda untuk melihat apakah aplikasi mencegah komputer Anda dari tidur. Video di bawah menunjukkan macOS Pemantau Aktivitas menunjukkan bahwa Chrome memiliki penguncian layar saat aktif yang aktif yang membuat sistem tetap aktif.

Masukan

Grup Komunitas Inkubator Platform Web (WICG) dan tim Chrome ingin mendengar tentang dan pengalaman dengan Screen Wake Lock API.

Beri tahu kami tentang desain API

Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang diharapkan? Atau apakah ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda?

Laporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Ataukah implementasi berbeda dengan spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan sebanyak mungkin sedetail 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

Anda berencana menggunakan Screen Wake Lock API? Dukungan publik Anda membantu Tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lainnya cara pentingnya mendukung mereka.

Link bermanfaat

Ucapan terima kasih

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