Pengguna mungkin tidak terbiasa dengan proses penginstalan PWA. Sebagai developer, Anda akan memahami kapan waktu yang tepat untuk mengundang pengguna menginstal aplikasi. Permintaan penginstalan browser default juga dapat ditingkatkan. Mari kita lihat alat yang tersedia.
Meningkatkan dialog penginstalan
Browser memberikan perintah penginstalan default saat PWA memenuhi kriteria penginstalan. Browser menggunakan properti name
dan icons
dari Manifes Aplikasi Web Anda untuk membuat perintah.
Beberapa browser meningkatkan pengalaman penginstalan yang cepat menggunakan kolom promosi dalam manifes, termasuk description
, categories
, dan screenshots
. Misalnya, dengan menggunakan Chrome di Android, jika PWA Anda memberikan nilai untuk kolom description
dan screenshots
, pengalaman dialog penginstalan akan berubah dari kolom info Tambahkan ke layar utama kecil menjadi dialog yang lebih besar dan lebih mendetail, mirip dengan perintah penginstalan dari app store.
Lihat cara kerja kolom promosi:
Peristiwa beforeinstallprompt
Perintah penginstalan browser adalah langkah pertama untuk membuat pengguna menginstal PWA Anda. Untuk menerapkan pengalaman penginstalan Anda sendiri, aplikasi Anda masih harus lulus kriteria penginstalan: saat browser mendeteksi bahwa aplikasi Anda dapat diinstal, browser akan mengaktifkan peristiwa beforeinstallprompt
. Anda perlu menerapkan pengendali peristiwa ini untuk menyesuaikan pengalaman pengguna. Berikut caranya:
- Proses peristiwa
beforeinstallprompt
. - Simpan (Anda akan membutuhkannya nanti).
- Picu dari UI Anda.
Periksa kode di bawah untuk mengetahui contoh pemroses peristiwa untuk peristiwa beforeinstallprompt
, perekamannya, dan penggunaan kustom selanjutnya.
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
Kemudian, jika pengguna mengklik tombol instal yang disesuaikan, gunakan deferredPrompt
yang sebelumnya telah disimpan dan panggil metode prompt()
, karena pengguna masih harus melalui proses browser untuk menginstal aplikasi Anda. Yang Anda lakukan adalah menunda peristiwa hingga Anda memberikan konteks yang tepat kepada pengguna untuk mendorong mereka menginstal PWA.
Menangkap peristiwa tersebut memberi Anda kesempatan untuk menambahkan petunjuk dan insentif bagi pengguna untuk menginstal aplikasi Anda, dan memilih untuk meminta penginstalan saat Anda tahu bahwa pengguna lebih aktif berinteraksi.
Peristiwa tidak akan diaktifkan jika:
- Pengguna telah menginstal PWA saat ini (hanya valid untuk desktop dan WebAPK di Android).
- Aplikasi tidak lulus kriteria penginstalan PWA.
- PWA tidak dapat diinstal di perangkat saat ini karena alasan lain (misalnya, perangkat dalam mode kios atau tanpa izin).
Tempat terbaik untuk meminta izin
Tempat meminta izin bergantung pada aplikasi dan kapan pengguna paling sering berinteraksi dengan konten dan layanan Anda. Saat merekam beforeinstallprompt
, Anda dapat memandu pengguna untuk mengetahui alasan untuk terus menggunakan aplikasi Anda dan keuntungan yang akan mereka dapatkan jika menginstalnya.
Anda dapat memilih untuk menampilkan petunjuk penginstalan di mana saja dalam aplikasi Anda. Beberapa pola umum adalah: di menu samping, setelah perjalanan penting pengguna seperti menyelesaikan pesanan, atau setelah halaman pendaftaran. Anda dapat membaca hal ini lebih lanjut di Pola untuk mempromosikan penginstalan PWA.
Mengumpulkan analisis
Menggunakan analisis akan membantu Anda lebih memahami di mana dan kapan harus mempresentasikan perintah Anda. Anda dapat menggunakan properti userChoice
dari peristiwa beforeinstallprompt
; userChoice
adalah promise yang akan diselesaikan dengan tindakan yang diambil pengguna.
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
// deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
deferredPrompt.prompt();
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else if (outcome === 'dismissed') {
console.log('User dismissed the install prompt');
}
});
Lihat penerapannya
Coba contoh tindakan berikut di browser Chromium (desktop atau Android).
Pengganti
Jika browser tidak mendukung beforeinstallprompt
atau peristiwa tidak diaktifkan, tidak ada cara lain untuk memicu perintah penginstalan browser. Namun, di platform yang memungkinkan pengguna menginstal PWA secara manual, seperti iOS, Anda dapat menampilkan petunjuk ini kepada pengguna.
Anda hanya boleh merender petunjuk ini dalam mode browser; opsi tampilan lainnya, seperti standalone
atau fullscreen
berarti pengguna telah menginstal aplikasi.
Untuk merender elemen hanya dalam mode browser, gunakan kueri media display-mode
:
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
Codelab
Library
Lihat library ini untuk mendapatkan bantuan dalam merender permintaan penginstalan kustom:
- Pembuat PWA
- Perintah Installer PWA untuk React
- Penginstalan PWA Bereaksi
- Penginstalan PWA Vue
- Tambahkan ke Layar Utama