Pengelolaan jendela

PWA di luar browser akan mengelola jendelanya sendiri. Dalam bab ini, Anda akan memahami API dan kemampuan untuk mengelola jendela dalam sistem operasi.

Jendela PWA

Menjalankan di jendela Anda sendiri, yang dikelola oleh PWA Anda, memiliki semua keuntungan dan tanggung jawab jendela apa pun di sistem operasi tersebut, seperti:

• Kemampuan untuk mengubah ukuran dan memindahkan jendela pada sistem operasi multi-aplikasi, seperti Windows atau ChromeOS.
• Berbagi layar dengan jendela aplikasi lain, seperti dalam mode terpisah iPadOS atau mode layar terpisah Android.
• Muncul di dok, taskbar, dan di menu tab alternatif di desktop, serta daftar jendela multi-tugas di perangkat seluler.
• Kemampuan untuk meminimalkan, memindahkan jendela di layar dan desktop, serta menutupnya kapan saja.

Memindahkan dan mengubah ukuran jendela

Jendela PWA Anda dapat berukuran apa pun dan diposisikan di mana saja pada layar di sistem operasi desktop. Secara default, saat pengguna membuka PWA untuk pertama kalinya setelah penginstalan, PWA mendapatkan ukuran jendela default sebesar persentase layar saat ini, dengan resolusi maksimum 1920x1080 yang diposisikan di sudut kiri atas layar.

Pengguna dapat memindahkan dan mengubah ukuran jendela, dan browser akan mengingat preferensi terakhir, sehingga saat pengguna membuka aplikasi lagi, jendela akan mempertahankan ukuran dan posisi dari penggunaan sebelumnya.

Tidak ada cara untuk menentukan ukuran dan posisi pilihan PWA Anda dalam manifes. Anda hanya dapat mengubah posisi dan mengubah ukuran jendela menggunakan JavaScript API. Dari kode, Anda dapat memindahkan dan mengubah ukuran jendela PWA Anda sendiri menggunakan fungsi moveTo(x, y) dan resizeTo(x, y) dari objek window.

Misalnya, Anda dapat mengubah ukuran dan memindahkan jendela PWA saat PWA dimuat menggunakan:

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

Anda dapat membuat kueri ukuran dan posisi layar saat ini menggunakan objek window.screen; Anda dapat mendeteksi kapan ukuran jendela diubah menggunakan peristiwa resize dari objek window. Tidak ada peristiwa untuk menangkap pemindahan jendela, jadi opsi Anda adalah sering mengkueri posisi.

Menjelajahi situs lain

Jika ingin mengarahkan pengguna ke situs eksternal yang berada di luar cakupan PWA, Anda dapat melakukannya dengan elemen HTML <a href> standar, menggunakan location.href, atau membuka jendela baru di platform yang kompatibel.

Saat ini di semua browser, jika PWA Anda diinstal, saat Anda mengakses URL yang berada di luar cakupan manifes, mesin browser PWA Anda akan merender browser dalam aplikasi dalam konteks jendela Anda.

Beberapa fitur browser dalam aplikasi adalah:

• Iklan muncul di bagian atas konten.
• Terdapat kolom URL statis yang menampilkan asal saat ini, judul jendela, dan menu. Biasanya, class ini diberi tema dengan theme_color manifes Anda.
• Dari menu kontekstual, Anda dapat membuka URL tersebut di browser.
• Pengguna dapat menutup browser atau kembali.

Alur otorisasi

Banyak alur autentikasi dan otorisasi web melibatkan pengalihan pengguna ke URL yang berbeda dengan asal yang berbeda untuk memperoleh token yang akan kembali ke asal PWA Anda, seperti menggunakan OAuth 2.0.

Dalam kasus ini, browser dalam aplikasi mengikuti proses berikut:

1. Pengguna membuka PWA Anda dan mengklik login.
2. PWA Anda mengalihkan pengguna ke URL yang berada di luar cakupan PWA sehingga mesin rendering akan membuka browser dalam aplikasi di dalam PWA.
3. Pengguna dapat membatalkan browser dalam aplikasi dan kembali ke PWA Anda kapan saja.
4. Pengguna login ke browser dalam aplikasi. Server autentikasi mengalihkan pengguna ke asal PWA Anda, dengan mengirimkan token sebagai argumen.
5. Browser dalam aplikasi menutup sendiri saat mendeteksi URL yang merupakan bagian dari cakupan PWA.
6. Mesin mengalihkan navigasi jendela PWA utama ke URL yang dibuka oleh server autentikasi saat berada di browser dalam aplikasi.
7. PWA Anda akan mendapatkan token, menyimpan token, dan merender PWA.

Memaksa navigasi browser

Jika ingin membuka browser secara paksa dengan URL dan bukan browser dalam aplikasi, Anda dapat menggunakan target _blank dari elemen <a href>. Fitur ini hanya berfungsi di PWA desktop; di perangkat seluler, tidak ada opsi untuk membuka browser dengan URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

Membuka jendela baru

Di desktop, pengguna dapat membuka lebih dari satu jendela PWA yang sama. Setiap jendela akan menjadi navigasi yang berbeda untuk start_url yang sama, seolah-olah Anda membuka dua tab browser dari URL yang sama. Dari menu di PWA, pengguna dapat memilih File, lalu Jendela baru, dan dari kode PWA, Anda dapat membuka jendela baru dengan fungsi open(). Lihat dokumentasi untuk mengetahui detailnya.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

Memanggil open() dalam jendela PWA di iOS atau iPadOS akan menampilkan null dan tidak membuka jendela. Membuka jendela baru di Android akan membuat browser dalam aplikasi baru untuk URL—meskipun URL berada dalam cakupan PWA—yang biasanya tidak memicu pengalaman penjelajahan eksternal.

Judul jendela

Elemen <title> terutama digunakan untuk tujuan SEO karena ruang dalam tab browser terbatas. Saat berpindah dari browser ke jendela di PWA, semua ruang kolom judul tersedia untuk Anda.

Anda dapat menentukan konten panel judul:

• Secara statis di elemen <title> HTML Anda.
• Mengubah properti string document.title secara dinamis kapan saja.

Pada PWA desktop, judul sangatlah penting, dan digunakan di panel judul jendela dan terkadang di pengelola tugas atau pemilihan multi-tugas. Jika memiliki aplikasi web satu halaman, Anda mungkin ingin memperbarui judul di setiap rute.

Mode tab

Kemampuan eksperimental, yang dikenal sebagai mode tab akan memungkinkan PWA Anda memiliki desain berbasis tab yang mirip dengan browser web. Dalam hal ini, pengguna dapat membuka beberapa tab dari PWA yang sama, tetapi semuanya terhubung di jendela sistem operasi yang sama, seperti yang dapat Anda lihat di video berikut:

Anda dapat membaca selengkapnya tentang kemampuan eksperimental ini di Mode aplikasi dengan tab untuk PWA.

Overlay kontrol jendela

Kami telah menyebutkan bahwa Anda dapat mengubah judul jendela dengan menentukan nilai elemen <title> atau properti document.title. Tapi itu selalu berupa nilai string. Bagaimana jika kita dapat mendesain bilah judul sesuai keinginan, dengan HTML, CSS, dan gambar? Di sinilah Window Controls Overlay, kemampuan eksperimental baru di Microsoft Edge dan Google Chrome untuk PWA desktop.

Anda dapat membaca selengkapnya tentang kemampuan ini di Menyesuaikan overlay kontrol jendela di panel judul PWA.

Pengelolaan jendela

Dengan beberapa layar, pengguna ingin menggunakan semua ruang yang tersedia untuk mereka. Contoh:

• Editor grafis multi-aplikasi à la Gimp dapat menempatkan berbagai alat pengeditan di jendela yang diposisikan secara akurat.
• Bagian perdagangan virtual dapat menampilkan tren pasar di beberapa periode yang dapat dilihat dalam mode layar penuh.
• Aplikasi slideshow dapat menampilkan catatan pembicara di layar utama internal dan presentasi di proyektor eksternal.

Window Management API memungkinkan PWA melakukan hal itu dan lainnya.

Mendapatkan detail layar

Window Management API menambahkan metode baru, window.getScreenDetails(), yang menampilkan objek dengan layar sebagai array tetap dari layar yang terpasang. Ada juga objek live yang dapat diakses dari ScreenDetails.currentScreen, yang sesuai dengan window.screen saat ini.

Objek yang ditampilkan juga mengaktifkan peristiwa screenschange saat array screens berubah. (Hal ini tidak terjadi jika atribut pada masing-masing layar diubah.) Setiap layar, baik window.screen atau layar di array screens, juga mengaktifkan peristiwa change saat atributnya berubah.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

Jika pengguna atau sistem operasi memindahkan jendela PWA dari satu layar ke layar lainnya, peristiwa currentscreenchange juga akan diaktifkan dari objek detail layar.

Penguncian layar saat aktif

Bayangkan ini: Anda berada di dapur mengikuti resep di tablet. Anda baru saja selesai menyiapkan bahan-bahannya. Tangan Anda berantakan, dan Anda kembali ke perangkat untuk membaca langkah berikutnya. Gawat! Layarnya menjadi hitam! Screen Wake Lock API tersedia untuk Anda dan memungkinkan PWA mencegah layar meredup, tidur, atau terkunci, sehingga memungkinkan pengguna berhenti, memulai, keluar, dan kembali tanpa khawatir.

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

Keyboard virtual

Perangkat berbasis sentuh, seperti ponsel dan tablet, menawarkan keyboard virtual di layar sehingga pengguna dapat mengetik saat elemen bentuk PWA Anda menjadi fokus.

Berkat VirtualKeyboard API, PWA Anda kini dapat memiliki lebih banyak kontrol atas keyboard pada platform yang kompatibel menggunakan antarmuka navigator.virtualKeyboard, termasuk:

• Menampilkan dan menyembunyikan keyboard virtual dengan fungsi navigator.virtualKeyboard.show() dan navigator.virtualKeyboard.hide().
• Memberi tahu browser bahwa Anda menangani sendiri keyboard virtual dengan menyetel navigator.virtualKeyboard.overlaysContent sama dengan true.
• Mengetahui kapan keyboard muncul dan menghilang dengan peristiwa geometrychange dari navigator.virtualKeyboard.
• Menetapkan kebijakan keyboard virtual pada pengeditan elemen host (menggunakan contenteditable) dengan atribut HTML virtualkeyboardpolicy. Kebijakan memungkinkan Anda memutuskan apakah Anda ingin keyboard virtual ditangani secara otomatis oleh browser menggunakan nilai auto, atau ditangani oleh skrip menggunakan nilai manual.
• Menggunakan variabel lingkungan CSS untuk mendapatkan informasi tentang tampilan keyboard virtual, seperti keyboard-inset-height dan keyboard-inset-top.

Anda dapat membaca API ini lebih lanjut di bagian Kontrol penuh dengan VirtualKeyboard API.

Referensi

• Mengelola beberapa tampilan dengan Multi-Screen Window Placement API
• Mode aplikasi dengan tab untuk PWA
• Tetap terjaga dengan Screen Wake Lock API
• Kontrol penuh dengan VirtualKeyboard API
• Menyesuaikan overlay kontrol jendela di panel judul PWA Anda
• Menampilkan konten di kolom judul