Buat agar mudah diinstal

Pete LePage

Memproses peristiwa beforeinstallprompt

Saat browser memicu peristiwa beforeinstallprompt, hal itu menunjukkan bahwa Aplikasi Web dapat diinstal dan tombol instal dapat ditampilkan kepada pengguna. Peristiwa beforeinstallprompt diaktifkan saat aplikasi memenuhi kriteria dapat diinstal.

Dengan merekam peristiwa ini, developer dapat menyesuaikan penginstalan dan meminta pengguna untuk menginstal saat mereka menganggapnya sebagai waktu terbaik.

  1. Klik Remix to Edit untuk membuat project dapat diedit.
  2. Tambahkan pengendali peristiwa beforeinstallprompt ke objek window.
  3. Simpan event sebagai variabel global; kita akan membutuhkannya nanti untuk menampilkan perintah.
  4. Tampilkan tombol penginstalan.

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 beforeinstallprompt peristiwa yang disimpan. Panggilan prompt() dilakukan di pengendali klik tombol instal karena prompt() harus dipanggil dari gestur pengguna.

  1. Tambahkan pengendali peristiwa klik untuk tombol instal.
  2. Panggil prompt() pada acara beforeinstallprompt yang disimpan.
  3. Mencatat hasil perintah.
  4. Tetapkan peristiwa beforeinstallprompt yang disimpan ke null.
  5. Menyembunyikan tombol penginstalan.

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 penginstalan

Menginstal Aplikasi Web melalui tombol instal hanya salah satu cara pengguna dapat menginstalnya. Pengguna juga dapat menggunakan menu Chrome, infobar mini, dan ikon di omnibox. Anda dapat melacak semua cara penginstalan ini dengan memproses peristiwa appinstalled.

  1. Tambahkan pengendali peristiwa appinstalled ke objek window.
  2. Mencatat peristiwa penginstalan ke Analytics 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 kini dapat diinstal.

Berikut beberapa hal tambahan yang dapat Anda lakukan: