Anda dapat mendeteksi apakah pengguna menggunakan PWA di browser atau dalam mode mandiri. Di browser berbasis Chromium (Android dan desktop), Anda juga dapat mendeteksi peristiwa berikut:
- Status dan hasil dialog undangan penginstalan.
- Penginstalan selesai.
- Navigasi ditransfer dari browser ke jendela PWA, dan sebaliknya.
- Status penginstalan PWA.
- Aplikasi terkait yang diinstal dari app store.
Anda dapat menggunakan data ini untuk analisis, memahami preferensi pengguna, dan menyesuaikan pengalaman mereka. Untuk merekam peristiwa ini, Anda dapat menggunakan alat seperti kueri media, peristiwa dari window, atau menggunakan API kemampuan yang dapat Anda temukan yang tercantum di sini.
Mendeteksi mode tampilan
Untuk melacak cara pengguna meluncurkan PWA Anda, Anda dapat menggunakan matchMedia() untuk menguji kueri media display-mode.
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
Jika Anda menggunakan contoh ini, jangan lupa untuk mencocokkan mode tampilan dari manifes aplikasi web Anda, misalnya, standalone, minimal-ui, atau fullscreen. Anda juga dapat mencocokkan beberapa kueri di string kueri media menggunakan kondisi yang dipisahkan koma.
Anda juga dapat menambahkan parameter kueri ke start_url manifes yang dapat Anda ambil dengan analisis untuk melacak statistik terkait kapan, dengan cara apa, dan seberapa banyak PWA Anda digunakan.
Penginstalan aplikasi
Saat pengguna menyetujui permintaan penginstalan di browser, peristiwa appinstalled akan diaktifkan di browser berbasis Chromium. Penggunaan tepat untuk pengendali peristiwa ini adalah untuk menghapus promosi penginstalan dalam aplikasi yang telah Anda tambahkan.
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
Ingat, pada perangkat Android dengan WebAPK, peristiwa akan diaktifkan saat pengguna menerima dialog, bukan setelah WebAPK dibuat dan diinstal. Mungkin ada penundaan beberapa detik sebelum aplikasi terinstal sepenuhnya.
Bab Perintah Penginstalan menjelaskan cara mendeteksi apakah permintaan penginstalan tersedia dan pilihan yang dibuat pengguna.
Transfer sesi
Pengguna dapat menggunakan PWA Anda dalam browser dan dalam formulir mandiri yang diinstal. Pada browser desktop, Anda dapat mentransfer navigasi saat ini antar-konteks ini menggunakan badge atau item menu, seperti yang terlihat dalam gambar berikut.
Di Android, ada item menu yang mirip dengan yang ada di desktop dari browser yang mentransfer navigasi ke aplikasi. Dalam hal ini, URL saat ini dibuka, tetapi akan menjadi navigasi halaman baru di aplikasi.
Dalam gambar berikut, Anda dapat melihat item menu di Android saat aplikasi sudah diinstal.
Transfer setelah penginstalan
Dari browser desktop, navigasi saat ini akan langsung ditransfer ke aplikasi saat penginstalan. Tab browser ditutup dan aplikasi yang baru diinstal dibuka, melanjutkan apa yang dilakukan pengguna.
Pada browser seluler, navigasi Anda saat ini tetap berada di browser saat Anda menginstal aplikasi. Jika pengguna ingin berpindah ke aplikasi, mereka perlu membuka aplikasi secara manual, dan itu akan menjadi navigasi baru.
Mendeteksi transfer
Untuk mendeteksi transfer antara browser dan jendela, Anda dapat menggunakan kueri media:
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
window.matchMedia('(display-mode: standalone)')
.addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
});
Isolasi penyimpanan iOS dan iPadOS
Pada iOS dan iPadOS, tidak ada navigasi atau transfer URL antara browser dan ikon yang diinstal. Meskipun itu PWA yang sama, setiap ikon PWA yang diinstal pengguna akan memiliki penyimpanan sendiri, yang terisolasi dari tab Safari dan ikon lainnya. Saat pengguna membuka ikon terinstal, tidak ada penyimpanan yang dibagikan dengan Safari. Jika PWA Anda memerlukan login, pengguna harus login lagi. Jika aplikasi ditambahkan ke layar utama beberapa kali, pengguna akan memiliki sesi yang berbeda untuk setiap instance PWA.
Aplikasi terkait
Situs web menunjukkan hubungan dengan aplikasi melalui manifes. Untuk melakukannya, gunakan anggota related_applications dari spesifikasi Manifes Aplikasi Web.
Kunci related_applications adalah array objek yang mewakili setiap aplikasi terkait. Setiap entri berisi platform, url, dan id opsional.
Berikut adalah kemungkinan nilai platform:
chrome_web_store: Google Chrome Web Store.play: Aplikasi Google Play (Android dan ChromeOS).chromeos_play: ChromeOS Play.webapp: Aplikasi web.windows: Microsoft Store (Windows 10 dan 11).f-droid: F-droid.amazon: Amazon AppStore (FireOS).
Lebih memilih aplikasi terkait
Saat pengguna menginstal aplikasi, Anda dapat mengalihkan pengguna ke aplikasi terkait jika Anda menyetel kolom prefer_related_applications ke true di manifes Anda. Dengan penyiapan ini, di browser yang kompatibel, alur penginstalan tidak akan menginstal PWA; sebagai gantinya, alur penginstalan tersebut memicu penginstalan Play Store dari url atau id yang Anda tentukan di entri related_applications.
Aplikasi terkait dapat berupa PWA Anda dan akan diinstal melalui app store. Salah satu keuntungan dari konfigurasi ini adalah, saat ini, hanya aplikasi yang diinstal melalui app store yang dipulihkan dengan cadangan atau jika Anda beralih ke perangkat baru.
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
Banner Apple Smart App
Safari tidak mendukung anggota related_applications, tetapi menawarkan Banner Aplikasi Cerdas untuk aplikasi di App Store. Jadi, jika Anda ingin mempromosikan PWA atau aplikasi lain yang telah Anda publikasikan di App Store, Anda dapat menyertakan tag meta di HTML PWA Anda untuk mengundang pengguna menginstal aplikasi (lihat link yang baru saja disediakan), atau mentransfer navigasi jika sudah diinstal.
Mendeteksi aplikasi terinstal terkait
Metode getInstalledRelatedApps() memungkinkan situs Anda memeriksa apakah aplikasi iOS/Android/desktop atau PWA diinstal di perangkat pengguna.
Memeriksa apakah aplikasi terkait sudah diinstal membantu Anda menerapkan fitur seperti menyembunyikan perintah yang diinstal khusus atau mengalihkan pengguna langsung ke aplikasi yang terinstal, alih-alih membuka situs tujuan umum.
Untuk menggunakan metode getInstalledRelatedApps(), aplikasi terinstal dan situs harus mengonfigurasi koneksi satu sama lain. Setiap aplikasi, bergantung pada platformnya, menyertakan metadata untuk mengenali situs dan situs menyertakan aplikasi terinstal yang diharapkan di kolom related_applications dalam manifes.
Alat seperti BubbleWrap atau PWA Builder, yang memungkinkan Anda memublikasikan PWA ke app store, sudah menambahkan metadata yang diperlukan sehingga situs Anda dapat langsung menggunakan getInstalledRelatedApps().
Untuk mendeteksi apakah PWA sudah diinstal menggunakan getInstalledRelatedApps(), tentukan webapp di kolom manifes related_applications dengan URL ke manifes Anda:
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps() menampilkan array objek aplikasi. Jika array kosong, aplikasi terkait tidak akan diinstal.
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
Mendeteksi penginstalan dari luar cakupan PWA
Dari Chrome di Android 89, Anda dapat mendeteksi apakah PWA diinstal, bahkan dari luar cakupan PWA. PWA Anda harus menetapkan file JSON dalam folder /.well-known/, yang memberikan izin ke cakupan lain, seperti yang dijelaskan dalam artikel ini.