Screen Wake Lock API: Mencegah Layar Mati pada Aplikasi Web

Screen Wake Lock API adalah API web yang memungkinkan aplikasi web untuk mencegah perangkat meredupkan atau mengunci layar. Ini sangat berguna untuk aplikasi di mana visibilitas layar yang berkelanjutan sangat penting, seperti pemutar media, aplikasi navigasi, dan aplikasi yang memerlukan interaksi pengguna untuk periode yang lama.

Mengapa Screen Wake Lock Penting?

Di dunia saat ini, pengguna mengharapkan pengalaman yang mulus. Perangkat yang secara otomatis meredupkan atau mengunci layar dapat mengganggu pengalaman ini, terutama ketika pengguna sedang aktif terlibat dengan aplikasi web. Pertimbangkan skenario berikut:

• Pemutaran Video: Bayangkan sedang menonton film atau mengikuti tutorial memasak, dan layar terus-menerus meredup, memaksa Anda untuk mengetuk layar agar tetap menyala. Ini adalah pengalaman yang membuat frustrasi.
• Aplikasi Navigasi: Saat mengemudi dan menggunakan aplikasi navigasi, layar harus tetap menyala untuk memberikan petunjuk arah secara terus-menerus. Layar yang meredup atau terkunci dapat menyebabkan tikungan terlewat dan potensi bahaya keselamatan.
• Aplikasi Presentasi: Menyajikan slide atau menampilkan informasi penting mengharuskan layar tetap aktif selama presentasi.
• Aplikasi Game: Banyak game membutuhkan visibilitas layar tanpa gangguan untuk gameplay. Layar yang mati dapat mengganggu pengalaman bermain game.
• Papan Tulis Online: Bekerja secara kolaboratif di papan tulis online mengharuskan layar tetap menyala agar pengguna tidak perlu berulang kali mengetuk untuk kembali terlibat.

Screen Wake Lock API memberikan solusi untuk masalah-masalah ini, memungkinkan aplikasi web untuk mengontrol status nyala/mati layar dan memberikan pengalaman yang lebih mulus dan ramah pengguna.

Dukungan Browser

Pada akhir 2024, Screen Wake Lock API memiliki dukungan yang solid di seluruh browser utama. Namun, sangat penting untuk selalu memeriksa informasi kompatibilitas browser terbaru pada sumber daya seperti Mozilla Developer Network (MDN) dan Can I use untuk memastikan kompatibilitas lintas-browser yang optimal. Dukungan browser dapat bervariasi berdasarkan versi browser dan sistem operasi.

Menggunakan Screen Wake Lock API

Screen Wake Lock API relatif mudah digunakan. Berikut adalah rincian langkah-langkah kunci yang terlibat:

1. Periksa Dukungan API

Sebelum mencoba menggunakan API, penting untuk memeriksa apakah browser pengguna mendukungnya. Ini mencegah kesalahan pada browser yang tidak mengimplementasikan API.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API didukung
} else {
  // Screen Wake Lock API tidak didukung
  console.log('Screen Wake Lock API is not supported by this browser.');
}

            

              
                Copy
              
            
          

2. Meminta Wake Lock

Untuk meminta wake lock, gunakan metode navigator.wakeLock.request(). Metode ini mengembalikan Promise yang akan resolve dengan objek WakeLockSentinel jika permintaan berhasil. Objek WakeLockSentinel mewakili wake lock yang aktif.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock aktif!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock telah dilepaskan');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Panggil fungsi ini untuk mengaktifkan wake lock
requestWakeLock();

            

              
                Copy
              
            
          

Dalam contoh ini, fungsi requestWakeLock() mencoba untuk mendapatkan screen wake lock. Argumen 'screen' menentukan bahwa kita ingin mencegah layar meredup atau terkunci. Jika permintaan berhasil, sebuah pesan dicatat ke konsol. Kode ini juga menyertakan penangan kesalahan untuk menangkap pengecualian apa pun yang mungkin terjadi selama permintaan wake lock. Yang terpenting, kode ini menambahkan event listener untuk mendengarkan event "release" yang menunjukkan kapan Wake Lock tidak lagi aktif. Hal ini bisa terjadi jika pengguna secara eksplisit melepaskan kunci atau jika sistem telah mengklaimnya kembali karena tindakan penghematan daya.

3. Melepaskan Wake Lock

Sangat penting untuk melepaskan wake lock ketika tidak lagi diperlukan. Kegagalan untuk melakukannya dapat menguras baterai perangkat dan berdampak negatif pada pengalaman pengguna. Untuk melepaskan wake lock, panggil metode release() pada objek WakeLockSentinel.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock dilepaskan!');
  }
};

// Panggil fungsi ini untuk melepaskan wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

Fungsi ini dengan aman melepaskan wake lock dan mengatur variabel wakeLock menjadi null. Penting untuk memastikan bahwa variabel wakeLock dikelola dengan baik untuk menghindari kesalahan saat melepaskan kunci.

4. Menangani Event Pelepasan Wake Lock

Sistem dapat melepaskan wake lock karena berbagai alasan, seperti ketidakaktifan pengguna atau baterai lemah. Penting untuk mendengarkan event release pada objek WakeLockSentinel untuk menangani situasi ini dengan baik. Ini memungkinkan Anda untuk meminta kembali wake lock atau mengambil tindakan lain yang sesuai.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock telah dilepaskan');
  // Coba untuk meminta kembali wake lock
  // atau ambil tindakan lain yang sesuai
  requestWakeLock(); // Contohnya meminta kembali wakelock
});

            

              
                Copy
              
            
          

Contoh ini menunjukkan cara mendengarkan event release dan berpotensi meminta kembali wake lock. Implementasi sebenarnya akan tergantung pada persyaratan spesifik aplikasi Anda.

Praktik Terbaik dan Pertimbangan

Meskipun Screen Wake Lock API adalah alat yang kuat, penting untuk menggunakannya secara bertanggung jawab dan mempertimbangkan praktik terbaik berikut:

• Hanya Minta Wake Lock Saat Diperlukan: Hindari memperoleh wake lock yang tidak perlu, karena dapat menguras baterai perangkat. Hanya minta wake lock ketika visibilitas layar yang berkelanjutan benar-benar penting untuk pengalaman pengguna.
• Lepaskan Wake Lock Segera: Lepaskan wake lock segera setelah tidak lagi diperlukan. Ini membantu menghemat daya baterai dan mencegah pengurasan yang tidak perlu.
• Tangani Event Pelepasan dengan Baik: Bersiaplah jika sistem melepaskan wake lock secara tak terduga. Dengarkan event release dan ambil tindakan yang sesuai, seperti meminta kembali wake lock atau memberi tahu pengguna.
• Sediakan Kontrol Pengguna: Pertimbangkan untuk menyediakan kontrol bagi pengguna untuk mengaktifkan atau menonaktifkan fitur wake lock. Ini memberi pengguna lebih banyak kontrol atas konsumsi daya perangkat mereka dan memungkinkan mereka untuk menyesuaikan perilaku aplikasi. Misalnya, pemutar media bisa memiliki tombol 'Biarkan Layar Menyala'.
• Pertimbangkan Daya Tahan Baterai: Perhatikan dampaknya terhadap daya tahan baterai. Menjaga layar tetap menyala secara terus-menerus dapat secara signifikan mengurangi daya tahan baterai, terutama pada perangkat seluler. Informasikan kepada pengguna tentang dampak potensial dan berikan opsi untuk menguranginya.
• Izin Pengguna: Meskipun API itu sendiri tidak secara langsung meminta izin pengguna, adalah praktik yang baik untuk memberi tahu pengguna bahwa aplikasi sedang mencegah layar mati, dan mengizinkan mereka untuk menonaktifkan perilaku ini.
• Mekanisme Fallback: Untuk browser yang tidak mendukung API, pertimbangkan untuk mengimplementasikan mekanisme fallback. Ini bisa melibatkan penggunaan JavaScript untuk secara berkala mengirim event palsu ke layar untuk mencegahnya meredup atau terkunci. Namun, sadarilah bahwa pendekatan ini bisa kurang andal dan lebih intensif sumber daya daripada menggunakan Screen Wake Lock API.
• Pengujian: Uji aplikasi Anda secara menyeluruh di berbagai perangkat dan browser untuk memastikan bahwa Screen Wake Lock API berfungsi seperti yang diharapkan. Perhatikan konsumsi baterai dan pengalaman pengguna.
• Aksesibilitas: Sadarilah bahwa menjaga layar selalu menyala mungkin bermasalah bagi sebagian pengguna. Menyediakan cara untuk menonaktifkan screen wake lock membuat aplikasi Anda lebih mudah diakses.

Contoh di Dunia Nyata

Berikut adalah beberapa contoh nyata tentang bagaimana Screen Wake Lock API dapat digunakan dalam berbagai aplikasi:

• Pemutar Media: Aplikasi streaming video dapat menggunakan Screen Wake Lock API untuk mencegah layar meredup selama pemutaran, memberikan pengalaman menonton yang mulus.
• Aplikasi Navigasi: Aplikasi navigasi dapat menggunakan API untuk menjaga layar tetap menyala saat pengguna mengemudi, memastikan bahwa petunjuk arah selalu terlihat.
• Aplikasi Presentasi: Aplikasi presentasi dapat menggunakan API untuk mencegah layar meredup selama presentasi, memastikan bahwa audiens selalu dapat melihat slide.
• Aplikasi Kebugaran: Aplikasi kebugaran yang melacak sesi latihan dapat menjaga layar tetap menyala sehingga pengguna dapat dengan cepat melihat metrik tanpa harus membuka kunci perangkat mereka.
• Aplikasi Resep: Aplikasi resep dapat menggunakan API untuk menjaga layar tetap menyala saat pengguna mengikuti resep, mencegah layar meredup saat pengguna sedang memasak.
• Aplikasi Kios: Aplikasi kios mendapat manfaat dari fitur ini. Misalnya, kios swalayan di bandara atau restoran dapat menggunakan Screen Wake Lock API untuk memastikan bahwa layar tetap aktif dan responsif terhadap interaksi pengguna.
• Aplikasi Telemedicine: Selama janji temu dokter virtual, terutama yang memerlukan observasi, Screen Wake Lock API dapat digunakan untuk memastikan layar tetap menyala selama konsultasi.

Contoh Kode: Pemutar Media dengan Screen Wake Lock

Contoh ini menunjukkan cara mengimplementasikan Screen Wake Lock API dalam aplikasi pemutar media sederhana.

            
<!DOCTYPE html>
<html>
<head>
  <title>Pemutar Media dengan Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Browser Anda tidak mendukung tag video.
  </video>

  <button id="wakeLockBtn">Aktifkan Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock aktif!');
        wakeLockBtn.textContent = 'Nonaktifkan Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock telah dilepaskan');
          wakeLockBtn.textContent = 'Aktifkan Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock dilepaskan!');
        wakeLockBtn.textContent = 'Aktifkan Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Opsional: Secara otomatis meminta wake lock saat video mulai diputar
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Kode ini membuat pemutar media sederhana dengan tombol untuk mengaktifkan atau menonaktifkan screen wake lock. Ketika tombol diklik, kode akan meminta wake lock baru atau melepaskan yang sudah ada. Teks tombol diperbarui untuk mencerminkan status wake lock saat ini. Contoh ini juga menyertakan event listener opsional yang secara otomatis meminta wake lock saat video mulai diputar. Catatan: Ganti your-video.mp4 dengan path sebenarnya ke file video Anda.

Pertimbangan Keamanan

Screen Wake Lock API dirancang dengan mempertimbangkan keamanan. Browser menerapkan berbagai langkah keamanan untuk mencegah penyalahgunaan API. Misalnya, browser dapat membatasi durasi wake lock dapat ditahan atau memerlukan interaksi pengguna sebelum memberikan wake lock. Selalu ikuti praktik terbaik yang diuraikan sebelumnya dalam artikel ini untuk memastikan Anda menggunakan API secara bertanggung jawab dan etis.

Alternatif untuk Screen Wake Lock API

Sebelum adanya Screen Wake Lock API, pengembang sering menggunakan "trik" untuk mencegah layar mati. Metode-metode ini umumnya tidak dapat diandalkan dan tidak direkomendasikan.

• Elemen Video No-Op: Memasukkan elemen video kecil dan senyap ke dalam halaman dan memutarnya secara terus-menerus. Ini mengelabui sistem agar berpikir media sedang diputar, sehingga mencegah layar mati. Ini sangat boros sumber daya.
• Permintaan AJAX Dummy: Secara berkala mengirim permintaan AJAX ke server untuk menjaga perangkat tetap "aktif". Ini adalah pengganti yang buruk, karena boros jaringan dan tidak dapat diandalkan.

Metode-metode ini tidak direkomendasikan, karena tidak dapat diandalkan dan dapat berdampak negatif pada kinerja dan daya tahan baterai. Screen Wake Lock API adalah solusi yang direkomendasikan untuk mencegah layar mati pada aplikasi web.

Kesimpulan

Screen Wake Lock API adalah alat yang berharga bagi pengembang web yang ingin menciptakan pengalaman pengguna yang mulus dan menarik. Dengan mencegah perangkat meredupkan atau mengunci layar, Anda dapat memastikan bahwa aplikasi Anda tetap terlihat dan responsif, bahkan selama periode tidak aktif yang lama. Ingatlah untuk menggunakan API secara bertanggung jawab dan mengikuti praktik terbaik yang diuraikan dalam artikel ini untuk menghindari pengurasan baterai perangkat dan dampak negatif pada pengalaman pengguna. Seiring dengan semakin luasnya adopsi API ini, tidak diragukan lagi ia akan menjadi bagian penting dari perangkat pengembangan web. Manfaatkan kekuatan Screen Wake Lock API untuk meningkatkan aplikasi web Anda dan memberikan pengalaman yang lebih menyenangkan bagi pengguna Anda di seluruh dunia.