Mengoptimalkan PWA untuk Berbagai Mode Tampilan

• Progressive Web App (PWA) adalah alat yang kuat untuk membuat aplikasi web terasa seperti aplikasi native, dan pengalaman pengguna dapat dioptimalkan melalui berbagai mode tampilan
• Mode tampilan yang diatur dalam file manifes PWA menyesuaikan visibilitas UI browser, dan antarmuka pengguna dapat disesuaikan menurut tiap mode untuk mengurangi perbedaan antara pengalaman web dan aplikasi
• Dengan memanfaatkan media query CSS dan JavaScript, konten serta fitur dapat disesuaikan untuk tiap mode tampilan, sehingga menghadirkan pengalaman yang dipersonalisasi sesuai kebutuhan pengguna
• Pengguna PWA dan pengunjung situs web biasa memiliki ekspektasi yang berbeda, sehingga navigasi, prompt instalasi, dan konten perlu dioptimalkan berdasarkan mode tampilan
• Optimalisasi per mode tampilan membuat PWA terasa lebih matang dan lebih mirip aplikasi, dan merupakan teknik penting untuk meningkatkan pengalaman aplikasi di web

---

Mode tampilan PWA dan kebutuhan optimalisasi

• PWA adalah teknologi untuk menghadirkan aplikasi web seperti aplikasi native, tetapi saat keluar dari lingkungan browser dapat muncul masalah kegunaan
  • Ada kemungkinan kehilangan fitur yang disediakan browser seperti kembali, muat ulang, dan menyalin URL
  • Elemen yang cocok untuk situs web bisa terasa tidak alami dalam lingkungan aplikasi
• Mode tampilan yang dapat diatur di file manifest adalah sebagai berikut
  • fullscreen: menyembunyikan semua UI browser dan menggunakan layar penuh
  • standalone: menyembunyikan kontrol browser dan tampil seperti aplikasi native
  • minimal-ui: menampilkan elemen UI browser seminimal mungkin
  • browser: menyediakan antarmuka browser standar
• Saat UI browser disembunyikan, hal itu dapat memengaruhi pengalaman pengguna, sehingga optimalisasi untuk tiap mode tampilan menjadi sangat penting

Memanfaatkan media query mode tampilan

• Dengan menggunakan media query, gaya dan fungsi dapat disesuaikan berdasarkan mode tampilan
  • Contoh: @media (display-mode: standalone) hanya diterapkan dalam mode standalone
  • Tersedia query yang masing-masing mendukung mode fullscreen, minimal-ui, dan browser
• Mode eksperimental window-controls-overlay dan tabbed dapat diatur dalam urutan khusus pengguna melalui display_override
  • window-controls-overlay: menampilkan tombol kontrol jendela sebagai overlay di desktop
  • tabbed: mendukung beberapa lingkungan aplikasi dalam satu jendela
• Mode tampilan juga bisa diperiksa dan disesuaikan secara dinamis dengan JavaScript
  • Contoh: mode saat ini dapat diperiksa dengan window.matchMedia("(display-mode: standalone)").matches
  • Saat mode berubah, event dapat dideteksi untuk menyesuaikan UI secara dinamis

Contoh penerapan praktis

• Konten yang disesuaikan untuk pengguna PWA: karena pengguna yang memasang PWA sudah merupakan pengguna yang terkonversi, konten pemasaran dapat dikurangi dan fokus diarahkan ke pengalaman pengguna
  • Elemen yang tidak perlu seperti prompt instalasi dapat disembunyikan
• Menyediakan opsi tambahan: jika tidak ada UI browser, dibutuhkan alternatif di dalam aplikasi seperti pengaturan ukuran font, peralihan mode terang/gelap, dan fitur berbagi
• Fitur yang sesuai platform: bilah navigasi bawah yang umum di aplikasi native seluler cocok untuk PWA, tetapi terasa tidak alami di situs web
  • Fitur seperti tombol cetak sebaiknya disembunyikan dalam mode PWA
• Mengelola prompt instalasi: prompt instalasi harus dikendalikan dengan media query atau JavaScript agar tidak tampil pada PWA yang sudah terpasang
  • Contoh: menyembunyikan elemen dalam mode PWA dengan kelas utilitas .hide-in-pwa
• Strategi scope dan start URL: gunakan scope dan start_url untuk membedakan konten antara lingkungan PWA dan web
  • scope: mendefinisikan jalur tingkat atas PWA; jika keluar dari cakupan, UI browser akan ditampilkan
  • start_url: menentukan halaman yang ditampilkan saat aplikasi dijalankan, misalnya langsung menuju dasbor
• Meningkatkan transisi tampilan: efek transisi tampilan yang umum pada aplikasi native dapat diterapkan khusus untuk PWA
  • Contoh: menetapkan CSS transisi tampilan di dalam @media (display-mode: standalone)

Dukungan browser dan pengujian

• Media query mode tampilan mendapat dukungan luas di sebagian besar browser
  • Firefox tidak mendukung PWA, dan Firefox Android hanya menampilkan mode browser
  • Melalui progressive enhancement, penurunan fungsi yang wajar dapat dijamin pada browser yang tidak didukung
• Karena pengujian dapat berjalan berbeda menurut perangkat dan browser, pengujian harus dilakukan di berbagai lingkungan
  • Browser tidak menyediakan simulasi mode tampilan, sehingga pengujian perlu dilakukan pada kombinasi perangkat dan OS yang nyata

Ringkasan dan implikasi

• Dengan memanfaatkan media query display-mode, PWA dapat menghadirkan pengalaman adaptif sesuai konteks instalasi dan tampilan
  • Memungkinkan penyembunyian prompt instalasi, dukungan navigasi, penyesuaian konten, penguatan nuansa native, dan peningkatan bertahap
• Pengguna PWA memiliki kebutuhan dan ekspektasi yang berbeda dari pengunjung web biasa, sehingga diperlukan penyesuaian yang cermat berdasarkan mode tampilan
• Semakin matang PWA, semakin cermat implementasi dan optimalisasi menjadi kunci untuk menciptakan pengalaman aplikasi yang menarik
• Untuk informasi tambahan, disarankan merujuk ke “Extensive Guide To Progressive Web Applications” dari Smashing Magazine

[ndrgrd]

Firefox juga mulai kembali mendukung PWA di nightly. Sebentar lagi juga akan ditambahkan ke stable.

[draupnir]

Karena harus digunakan melalui perantara bernama browser... saya selalu lebih suka native, tetapi setiap melihat pembahasan tentang PWA selalu terasa menarik.
Sama-sama mengejar optimasi, tetapi arahnya berbeda…