Pengelolaan jendela

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

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 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 seluruh layar dan desktop, serta menutupnya kapan saja.

Memindahkan dan mengubah ukuran jendela

Jendela PWA Anda bisa berapa pun dan diposisikan di mana saja pada layar pada 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 berikutnya pengguna membuka aplikasi, 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 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 saat jendela diubah ukurannya menggunakan peristiwa resize dari objek window. Tidak ada peristiwa untuk menangkap pemindahan 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 mengakses URL yang berada di luar cakupan manifes, mesin browser PWA akan merender browser dalam aplikasi dalam konteks jendela.

Beberapa fitur browser dalam aplikasi adalah:

  • Iklan muncul di atas konten Anda.
  • Template tersebut memiliki kolom URL statis yang menampilkan tempat 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.

Browser dalam aplikasi di PWA desktop saat menjelajahi URL yang berada di luar cakupan.

Browser dalam aplikasi di iPhone saat menjelajahi URL yang berada di luar cakupan dalam PWA mandiri.

Browser dalam aplikasi di Android saat menjelajahi URL yang berada di luar cakupan dalam PWA mandiri.

Alur otorisasi

Banyak alur autentikasi dan otorisasi 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 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 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>. 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. 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");
}

PWA terinstal yang sama dengan beberapa jendela terbuka di sistem operasi desktop.

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 Anda—yang biasanya tidak memicu pengalaman penjelajahan eksternal.

Judul jendela

Elemen <title> terutama digunakan untuk tujuan SEO karena ruang dalam tab browser dibatasi. 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, 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 disatukan dalam 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 {i>string<i}. Bagaimana jika kita dapat mendesain kolom 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 selengkapnya tentang kemampuan ini di Menyesuaikan overlay kontrol jendela di panel judul PWA.

Dengan overlay kontrol jendela, Anda bisa merender konten pada bilah judul.

Pengelolaan jendela

Dengan adanya beberapa layar, pengguna ingin menggunakan semua ruang yang tersedia bagi 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 jendela 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 banyak lagi.

Mendapatkan detail layar

Window Management API menambahkan metode baru, window.getScreenDetails(), yang menampilkan objek dengan layar sebagai array yang tidak dapat diubah 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 setiap layar diubah.) Setiap layar, baik window.screen atau layar dalam 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 Anda 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. Anda baru saja selesai menyiapkan bahan-bahannya. Tangan Anda berantakan, dan Anda kembali ke perangkat untuk membaca langkah berikutnya. Gawat! Layarnya jadi hitam! Screen Wake Lock API tersedia untuk Anda dan memungkinkan PWA mencegah layar meredup, tidur, atau mengunci, sehingga pengguna dapat berhenti, memulai, keluar, dan kembali tanpa perlu 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 sehingga pengguna dapat mengetik saat elemen bentuk PWA Anda menjadi 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 menyetel navigator.virtualKeyboard.overlaysContent sama dengan true.
  • Mengetahui kapan keyboard muncul dan menghilang dengan peristiwa geometrychange dari navigator.virtualKeyboard.
  • Menetapkan kebijakan keyboard virtual terkait pengeditan elemen host (menggunakan contenteditable) dengan atribut HTML virtualkeyboardpolicy. Dengan kebijakan, Anda dapat 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