Pengelolaan jendela

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

Jendela PWA

Berjalan di jendela Anda sendiri, yang dikelola oleh PWA, memiliki semua keuntungan dan tanggung jawab dari setiap jendela dalam sistem operasi tersebut, seperti:

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

Memindahkan dan mengubah ukuran jendela

Jendela PWA Anda dapat berukuran berapa pun dan diposisikan di mana saja di layar pada sistem operasi desktop. Secara default, saat pengguna membuka PWA untuk pertama kalinya setelah penginstalan, PWA akan mendapatkan ukuran jendela default berupa persentase dari 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 berikutnya pengguna membuka aplikasi, jendela akan mempertahankan ukuran dan posisi dari penggunaan sebelumnya.

Tidak ada cara untuk menentukan ukuran dan posisi PWA yang diinginkan dalam manifes. Anda hanya dapat mengubah posisi dan 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 jendela diubah ukurannya menggunakan peristiwa resize dari objek window. Tidak ada peristiwa untuk menangkap perpindahan jendela, jadi opsi Anda adalah sering mengkueri posisi.

Menjelajah ke 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 menjelajahi 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 atas konten Anda.
• Keduanya memiliki kolom URL statis yang menampilkan asal saat ini, judul jendela, dan menu. Biasanya, tema bertema theme_color manifes Anda.
• Dari menu kontekstual, Anda dapat membuka URL tersebut di browser.
• Pengguna dapat menutup browser atau kembali.

Alur otorisasi

Banyak alur otorisasi dan autentikasi web melibatkan pengalihan pengguna ke URL yang berbeda di 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 dalam PWA Anda.
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 akan menutup sendiri saat mendeteksi URL yang merupakan bagian dari cakupan PWA.
6. Mesin mengalihkan navigasi jendela PWA utama ke URL yang dituju server autentikasi saat berada di browser dalam aplikasi.
7. PWA Anda mendapatkan token, menyimpan token, dan merender PWA.

Memaksa navigasi browser

Jika Anda 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 New window, 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 tersebut berada dalam cakupan PWA Anda—yang biasanya tidak memicu pengalaman penjelajahan eksternal.

Judul jendela

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

Anda dapat menentukan konten baris judul:

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

Di PWA desktop, judul sangatlah penting, dan digunakan di panel judul jendela dan terkadang dalam pengelola tugas atau pemilihan beberapa tugas. Jika memiliki aplikasi web satu halaman, sebaiknya perbarui 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 disatukan dalam jendela sistem operasi yang sama, seperti yang dapat Anda lihat di video berikut:

Anda dapat membaca lebih lanjut kemampuan eksperimental ini di Mode aplikasi dengan tab untuk PWA.

Overlay kontrol jendela

Kita telah menyebutkan bahwa Anda dapat mengubah judul jendela dengan menentukan nilai elemen <title> atau properti document.title. Namun, nilainya selalu berupa string. Bagaimana jika kita dapat mendesain panel judul sesuai keinginan, dengan HTML, CSS, dan gambar? Di sinilah Overlay Kontrol Jendela berperan, kemampuan eksperimental baru di Microsoft Edge dan PWA Google Chrome untuk desktop.

Anda dapat membaca lebih lanjut kemampuan ini di Menyesuaikan overlay kontrol jendela di panel judul PWA.

Pengelolaan jendela

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

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

Window Management API memungkinkan PWA melakukan hal itu dan banyak lagi.

Mendapatkan detail layar

Window Management API menambahkan metode baru, window.getScreenDetails(), yang menampilkan objek dengan layar sebagai array layar terlampir yang tidak dapat diubah. 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 setiap layar diubah.) Setiap layar, baik window.screen maupun layar dalam array screens, juga memicu 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].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 Anda dari satu layar ke layar lainnya, peristiwa currentscreenchange juga akan diaktifkan dari objek detail layar.

Kunci layar saat aktif

Bayangkan ini: Anda berada di dapur dan mengikuti resep di tablet. Anda baru saja selesai menyiapkan bahan-bahan. Tangan Anda berantakan, dan Anda kembali ke perangkat untuk membaca langkah berikutnya. Gawat! Layar menjadi hitam! Screen Wake Lock API hadir untuk Anda dan memungkinkan PWA mencegah layar diredupkan, dinonaktifkan, atau dikunci, sehingga pengguna dapat 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 formulir PWA Anda berada dalam fokus.

Berkat VirtualKeyboard API, PWA Anda kini dapat memiliki kontrol keyboard yang lebih besar di 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 akan menutup keyboard virtual sendiri dengan menetapkan 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 Anda 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 selengkapnya tentang API ini di Kontrol penuh dengan VirtualKeyboard API.

Resource

• Mengelola beberapa layar dengan Window Management API
• MDN: Window Management API
• Mode aplikasi dengan tab untuk PWA
• Tetap aktif dengan Screen Wake Lock API
• Kontrol penuh dengan VirtualKeyboard API
• Menyesuaikan overlay kontrol jendela di panel judul PWA Anda
• Menampilkan konten di panel judul