Glitch ini berisi manifes web dengan kolom wajib diisi agar Aplikasi Web dapat diinstal.
Alat ini juga memiliki tombol instal yang disembunyikan secara default.
Memproses peristiwa beforeinstallprompt
Saat browser mengaktifkan peristiwa beforeinstallprompt
, itu adalah indikasi bahwa Aplikasi Web dapat diinstal dan tombol instal dapat ditampilkan kepada pengguna. Peristiwa beforeinstallprompt
diaktifkan saat aplikasi memenuhi kriteria penginstalan.
Dengan menangkap peristiwa tersebut, developer dapat menyesuaikan penginstalan dan meminta pengguna untuk menginstal saat yang mereka anggap adalah waktu yang terbaik.
- Klik Remix untuk Mengedit agar project dapat diedit.
- Tambahkan pengendali peristiwa
beforeinstallprompt
ke objekwindow
. - Simpan
event
sebagai variabel global; kita akan membutuhkannya nanti untuk menampilkan perintahnya. - Perlihatkan tombol instal.
Kode:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
Menangani klik tombol instal
Untuk menampilkan perintah penginstalan, panggil prompt()
pada peristiwa beforeinstallprompt
yang disimpan. Memanggil prompt()
dilakukan di pengendali klik tombol instal karena
prompt()
harus dipanggil dari gestur pengguna.
- Menambahkan pengendali peristiwa klik untuk tombol instal.
- Panggil
prompt()
pada peristiwabeforeinstallprompt
yang tersimpan. - Catat hasil perintah.
- Tetapkan peristiwa
beforeinstallprompt
tersimpan ke null. - Sembunyikan tombol instal.
Kode:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
Melacak peristiwa instal
Menginstal Aplikasi Web melalui tombol instal hanyalah salah satu cara agar pengguna dapat menginstalnya. Mereka juga dapat menggunakan menu Chrome, infobar mini, dan
melalui ikon di omnibox. Anda dapat
melacak semua cara penginstalan ini dengan memproses peristiwa
appinstalled
.
- Tambahkan pengendali peristiwa
appinstalled
ke objekwindow
. - Catat peristiwa penginstalan ke analisis atau mekanisme lainnya.
Kode:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Bacaan lebih lanjut
Selamat, aplikasi Anda sekarang dapat diinstal!
Berikut beberapa hal lain yang dapat Anda lakukan: