Document Picture-in-Picture API: Membuat Panel Mini Interaktif di Luar Tab Browser

Jendela Picture-in-Picture (PiP) biasanya identik dengan video kecil yang tetap terlihat saat pengguna membuka aplikasi lain. Namun, kebutuhan aplikasi web tidak selalu berhenti pada video. Pengguna rapat daring mungkin perlu melihat kontrol mikrofon, aplikasi belajar membutuhkan timer, sementara alat produktivitas bisa menampilkan catatan ringkas tanpa menutup halaman utama. Document Picture-in-Picture API membuka kemungkinan tersebut dengan mengizinkan halaman web menampilkan elemen HTML dalam jendela mengambang yang selalu berada di atas jendela lain. Untuk contoh API browser lain yang melengkapi pengalaman web, lihat contoh Web Share Target API untuk PWA dan dokumentasi Document Picture-in-Picture API di MDN.

Apa itu Document Picture-in-Picture API?

Document Picture-in-Picture API memperluas PiP video tradisional. PiP biasa memindahkan elemen <video> ke jendela kecil dengan kontrol yang sebagian besar ditentukan browser. Sebaliknya, Document PiP dapat menampung berbagai elemen HTML, termasuk tombol, teks, formulir, indikator status, dan komponen antarmuka yang dibuat aplikasi.

Jendela tersebut tetap terkait dengan tab pembuka: jendela PiP tidak hidup lebih lama daripada halaman asal, tidak dapat dinavigasi ke alamat lain, dan posisinya tidak bisa dipaksakan oleh situs. Batas ini membantu menjaga pengalaman tetap berada dalam kendali pengguna.

Kapan fitur ini berguna?

Fitur ini cocok ketika satu bagian antarmuka perlu tetap terlihat sementara pengguna beralih ke pekerjaan lain. Contohnya adalah kontrol rapat video, pemutar media dengan tombol khusus, timer Pomodoro, daftar tugas singkat, papan skor langsung, atau panel status untuk proses yang sedang berjalan.

PiP bukan pengganti tata letak responsif. Gunakan hanya untuk informasi yang benar-benar berguna saat pengguna tidak sedang melihat tab utama. Panel yang terus menutupi layar atau menampilkan notifikasi berlebihan justru mengganggu. Sebelum menambahkan fitur, tentukan apakah pengguna perlu terus melihat panel atau hanya sesekali memeriksanya. Pilih konten ringkas dengan satu atau dua tindakan utama, bukan seluruh dashboard. Sinkronkan perubahan penting dengan aplikasi utama melalui state yang jelas, dan pastikan penutupan jendela tidak menghapus pekerjaan pengguna. Untuk aplikasi kolaboratif, tampilkan status koneksi atau indikator jeda agar pengguna memahami apakah data masih diperbarui. Uji juga bagaimana panel berperilaku saat koneksi terputus atau izin browser ditolak.

Persyaratan dan pemeriksaan dukungan

API ini memerlukan konteks aman, umumnya halaman HTTPS, dan pada browser pendukung pembukaan jendela harus dipicu oleh tindakan pengguna seperti klik tombol. Jangan mencoba membuka PiP otomatis ketika halaman baru dimuat; permintaan dapat ditolak karena tidak memiliki aktivasi pengguna.

Dukungan browser belum merata. Sebelum mengandalkannya, periksa tabel kompatibilitas terbaru di dokumentasi MDN. Sediakan antarmuka alternatif jika properti documentPictureInPicture tidak tersedia.

Contoh dasar membuka panel mini

Contoh berikut memindahkan elemen yang sudah ada ke jendela PiP. Memindahkan node yang sama—bukan membuat salinan—membantu mempertahankan status formulir dan event listener yang telah dipasang.

<button id="open-pip">Buka panel mini</button>
<div id="panel-container">
  <section id="mini-panel">
    <h2>Catatan singkat</h2>
    <p>Panel ini tetap bisa digunakan saat tab utama tidak aktif.</p>
    <button id="mark-done">Tandai selesai</button>
  </section>
</div>

<script>
const openButton = document.querySelector('#open-pip');
const container = document.querySelector('#panel-container');
const panel = document.querySelector('#mini-panel');
const doneButton = document.querySelector('#mark-done');
doneButton.addEventListener('click', () => {
  panel.querySelector('p').textContent = 'Selesai ditandai.';
});

openButton.addEventListener('click', async () => {
  if (!('documentPictureInPicture' in window)) {
    alert('Browser ini belum mendukung Document PiP.');
    return;
  }

  try {
    const pipWindow =
      await window.documentPictureInPicture.requestWindow({
        width: 360,
        height: 240
      });

    const style = pipWindow.document.createElement('style');
    style.textContent =
      'body{font:16px system-ui;margin:0;padding:16px}' +
      'section{line-height:1.5}button{padding:8px 12px}';
    pipWindow.document.head.append(style);
    pipWindow.document.body.append(panel);

    pipWindow.addEventListener('pagehide', () => {
      container.append(panel);
    });
  } catch (error) {
    console.error('PiP tidak dapat dibuka:', error);
  }
});
</script>

Letakkan contoh ini pada halaman uji HTTPS dan sesuaikan gaya serta pesan kesalahannya. Event pagehide dipakai untuk mengembalikan panel ke wadah semula ketika pengguna menutup jendela PiP.

Menjaga tampilan dan perilaku tetap konsisten

Dokumen PiP mempunyai konteks tampilan sendiri. CSS dari halaman utama tidak otomatis diterapkan ke jendela baru. Untuk contoh sederhana, buat aturan CSS khusus seperti pada kode di atas. Pada aplikasi lebih besar, salin stylesheet yang relevan atau tambahkan elemen <link rel="stylesheet"> ke dokumen PiP. Perhatikan bahwa stylesheet lintas asal bisa membatasi akses ke aturan CSS-nya.

Pastikan tombol di panel mini tetap memiliki label yang jelas, fokus keyboard yang terlihat, dan ukuran target sentuh yang memadai. Uji juga perubahan ukuran jendela, penutupan PiP, dan kondisi ketika tab utama ditutup.

Keamanan, privasi, dan pengalaman pengguna

Jendela mengambang dapat menampilkan informasi yang mudah terlihat orang lain. Hindari menaruh token autentikasi, data pelanggan, pesan privat, atau informasi sensitif di panel yang mungkin tetap terbuka ketika pengguna berbagi layar. Beri pengguna cara yang mudah untuk menutup panel dan jangan menyamarkan kontrol penutupan.

Jangan menganggap PiP sebagai mekanisme keamanan atau proses latar belakang permanen. Jendela tetap terikat pada halaman pembuka, dan perilakunya dapat berbeda menurut browser serta sistem operasi. Tangani penolakan API secara wajar, tanpa mengulang permintaan terus-menerus.

Checklist sebelum diterapkan

• Gunakan deteksi fitur dan sediakan fallback yang tetap berfungsi.
• Panggil requestWindow() sebagai respons atas tindakan pengguna.
• Tentukan ukuran awal yang nyaman, lalu uji pada layar berbeda.
• Atur stylesheet dan kembalikan elemen saat event pagehide.
• Pastikan panel bisa digunakan dengan keyboard dan teknologi bantu.
• Hindari menampilkan informasi sensitif tanpa kebutuhan yang jelas.

Kesimpulan

Document Picture-in-Picture API memungkinkan pengembang membuat panel web kecil yang lebih interaktif daripada PiP video biasa. Dengan pemindahan elemen DOM, pengelolaan siklus hidup jendela, gaya khusus, dan fallback yang tepat, fitur ini dapat meningkatkan produktivitas tanpa memaksa pengguna tetap berada di satu tab. Karena dukungan browser masih bervariasi, uji implementasi pada perangkat sasaran sebelum menjadikannya bagian penting dari alur kerja.

Referensi: MDN Web Docs: Document Picture-in-Picture API · Chrome for Developers: Picture-in-Picture for any Element.