Dipublikasikan: 19 Agustus 2025
Pengelolaan navigasi mencakup metode untuk mengontrol cara Progressive Web App (PWA) menangani navigasi pengguna. Komponen penting dari hal ini adalah pengambilan navigasi, proses browser yang menentukan apakah mengklik link harus meluncurkan PWA yang diinstal atau membuka tab browser baru.
Panduan ini membahas versi baru pengambilan navigasi, yang tersedia mulai Chrome 139. Meskipun perilaku default browser cocok untuk sebagian besar kasus, pemahaman yang lebih mendalam tentang teknik pengelolaan ini dan API terkait sangat penting jika Anda ingin menciptakan pengalaman yang paling lancar bagi pengguna.
Bagian Kontrol developer menjelaskan cara menyesuaikan navigasi untuk memberikan pengalaman peluncuran terbaik bagi PWA Anda.
Perilaku default baru
Untuk menyelaraskan dengan preferensi pengguna dan mengurangi hambatan, Chrome menstandardisasi cara menangani link. Sebelumnya, perilaku ini tidak konsisten di seluruh platform. Perangkat seluler biasanya memprioritaskan peluncuran aplikasi yang diinstal, sementara browser desktop akan membuka link di tab terlebih dahulu sebelum memberi sinyal bahwa aplikasi dapat menanganinya.
Pendekatan baru dan terpadu untuk pengambilan navigasi, otomatis membuka link di PWA terinstal yang sesuai. Link hanya akan kembali ke tab browser jika PWA tidak diinstal atau jika pengguna telah memilih untuk tidak menggunakannya. Perilaku baru ini tersedia mulai Chrome 139 untuk Windows, Mac, dan Linux, dengan dukungan ChromeOS yang akan hadir dalam rilis mendatang.
Proses pengelolaan navigasi
Pengambilan navigasi adalah bagian dari proses pengelolaan navigasi. Proses ini mencakup seluruh alur, mulai dari tindakan awal pengguna hingga keputusan browser dan perilaku yang dihasilkan yang dikonfigurasi oleh developer:
- Tindakan pengguna: Mencakup interaksi seperti mengklik atau mengetuk link.
- Keputusan browser: mencakup tugas dan keputusan yang dikelola oleh browser, seperti perilaku default, seperti pengambilan navigasi.
- Kontrol developer: Mencakup API web yang memungkinkan developer menginstruksikan browser tentang cara menangani tugas tertentu.
Interaksi elemen-elemen ini menentukan apakah PWA terbuka di jendela mandiri atau tab browser.
Kasus penggunaan pengelolaan navigasi yang mendasar adalah saat pengguna mengklik atau mengetuk link ke PWA yang diinstal dari halaman lain di browser. Contoh berikut menjelaskan kasus pengguna yang telah menginstal PWA Google Chat dan mengklik link ke PWA tersebut dari undangan Google Kalender.
calendar.google.com.Tindakan pengguna
Setiap tindakan pengguna terdiri dari tiga elemen utama: peristiwa (seperti klik atau ketuk), permukaan tempat peristiwa terjadi (seperti halaman web atau pintasan desktop), dan jenis link yang diaktifkan (seperti URL HTTPS). Misalnya, tindakan pengguna dapat berupa mengklik link ke
https://chat.google.com/meeting_room_id dalam cakupan PWA Google Chat
dari halaman web di calendar.google.com.
Keputusan browser
Setelah tindakan pengguna, seperti pengguna mengklik di langkah sebelumnya, browser menjalankan proses pengambilan navigasi untuk memutuskan apakah link harus dibuka di tab browser atau di PWA yang terinstal. Proses ini terdiri dari langkah-langkah berikut:
- Tentukan apakah navigasi dapat direkam: Secara umum, navigasi dianggap dapat direkam jika membuat frame baru dan tidak terbuka dalam konteks penjelajahan tambahan.
- Mengidentifikasi PWA pengontrol: Jika navigasi dapat diambil, browser akan mencoba menemukan PWA yang "mengontrol" URL (berada dalam cakupan yang ditentukan dalam Manifes Aplikasi Web-nya).
- Verifikasi preferensi pengguna: Jika PWA yang mengontrol ditemukan, browser akan memeriksa preferensi pengguna. Jika pengguna belum memilih untuk tidak ikut serta di setelan aplikasi, PWA akan diluncurkan; jika tidak, link akan terbuka di tab browser baru.
- Luncurkan PWA: Browser meluncurkan PWA menggunakan Algoritma Penanganan Peluncuran. Anda dapat memengaruhi hal ini menggunakan Launch Handler API, yang akan dibahas berikutnya.
Diagram berikut merangkum proses ini:
Kontrol developer
Meskipun proses navigasi terutama mengandalkan default browser dan setelan pengguna, Anda dapat menggunakan berbagai API untuk mengelola aspek tertentu dari proses tersebut. Setelah pembaruan pengambilan navigasi baru-baru ini, beberapa API web yang sudah lama menjadi lebih relevan.
Launch Handler API
API ini berperan saat browser memutuskan untuk meluncurkan PWA, sehingga Anda dapat mengontrol cara peluncurannya—misalnya, di jendela baru atau yang sudah ada.
Tentukan cara peluncuran PWA melalui anggota launch_handler di Manifes Aplikasi Web, yang mencakup sub-kolom bernama client_mode. Sub-bidang ini
menentukan apakah jendela baru atau yang sudah ada harus digunakan dan apakah jendela tersebut harus
membuka halaman. Nilai yang diizinkan untuk client_mode adalah:
focus-existing: Untuk menangani link di jendela aplikasi yang ada, seperti PWA yang sudah berjalan dalam mode mandiri.navigate-existing: Pada opsi ini, konteks penjelajahan yang paling baru berinteraksi di jendela aplikasi web diarahkan ke URL target peluncuran.navigate-new: Dengan opsi ini, konteks penjelajahan baru dibuat di jendela aplikasi web untuk memuat URL target peluncuran.
Gunakan launchQueue API untuk memberikan parameter tambahan dan menangani kasus khusus.
Launch Handler API tersedia mulai dari Chrome 110, tetapi menjadi jauh lebih
berguna dengan update pengambilan navigasi. Anda dapat mempelajari lebih lanjut di
dokumentasi Launch Handler API.
API terkait lainnya
Selain penanganan peluncuran, API lain juga dapat berperan dalam proses ini, bergantung pada kebutuhan spesifik aplikasi Anda. Ini mencakup
Pengendali Protokol URL,
yang memungkinkan aplikasi web mendaftarkan kemampuannya untuk menangani skema URL di luar
http dan https standar (misalnya, protokol standar seperti mailto: atau
kustom seperti web+music). Selain itu, Web App Scope Extensions API (saat ini
dalam pengembangan) memungkinkan Anda memperluas cakupan PWA untuk mengambil link dari
origin lain, termasuk subdomain, sehingga saat pengguna mengklik link dari
origin terkait, PWA dapat diluncurkan. Membahasnya secara mendalam berada di luar cakupan artikel ini, tetapi Anda dapat membuka link yang sesuai untuk mengetahui lebih lanjut.
Kasus penggunaan: Mengambil link Google Chat di PWA Chat
Sebagai penutup, pelajari cara kerja berbagai bagian dalam contoh mengklik link Google Kalender ke ruang Google Chat, untuk pengguna yang telah menginstal PWA Google Chat.
Sebelum perekaman navigasi
Dalam video berikut, pengguna membuat rapat Google Kalender dan mengundang tiga tamu. Aplikasi Kalender otomatis membuat link Google Chat yang menyertakan semua peserta. Saat pengguna mengklik link ini, ruang chat akan terbuka di tab browser baru. Ikon di kolom URL kemudian menandakan bahwa PWA yang sesuai telah diinstal, tetapi pengguna harus meluncurkannya secara manual. Berikut adalah perilaku sebelum update pengambilan navigasi:
Setelah pengambilan navigasi
Video berikut menunjukkan alur kerja pengguna yang sama, tetapi kini dengan perilaku pengambilan navigasi baru. Pada versi ini, mengklik link Google Chat dari Google Kalender akan membuka ruang chat yang sesuai langsung di PWA yang diinstal. Selain itu, tim Google Chat telah menerapkan Penanganan Peluncuran
dengan menambahkan atribut launch_handler ke Manifes Aplikasi Web. Dengan menyetel
client_mode ke focus-existing, mereka memastikan bahwa link terbuka di instance PWA yang ada, jika sudah ada yang berjalan. Dengan menghilangkan latensi
yang terlibat dalam membuka tab browser baru, lalu memicu pemuatan halaman, 'waktu hingga interaksi pengguna' yang efektif dapat, berdasarkan desain, lebih cepat. Faktanya, Google Chat meningkatkan latensi navigasi secara signifikan dengan menghilangkan kebutuhan untuk peluncuran aplikasi baru.
Kesimpulan dan langkah selanjutnya
Artikel ini membahas perilaku pengambilan navigasi default baru yang tersedia dari Chrome 139, yang berfokus pada kasus penggunaan umum saat pengguna mengklik link HTTPS dalam cakupan PWA yang diinstal. Anda dapat menemukan informasi dan kasus penggunaan selengkapnya di Pengelolaan Navigasi ke PWA yang Terinstal. Diagram berikut menunjukkan perincian lengkap kasus penggunaan, termasuk peristiwa pengguna, platform dan protokol, dengan hasil yang sesuai:
Pengelolaan navigasi adalah aspek penting, tetapi sering diabaikan, dalam UX aplikasi Anda karena mengontrol titik masuknya. Fitur dan link yang dibahas dalam artikel ini dapat membantu Anda mendapatkan pengalaman seperti aplikasi terbaik untuk PWA Anda.