Buat agar mudah diinstal

Pete LePage

Glitch ini berisi manifes web dengan kolom wajib diisi agar Aplikasi Web dapat diinstal.

Ada juga tombol instal yang secara {i>default<i} disembunyikan.

Memproses peristiwa beforeinstallprompt

Saat browser mengaktifkan peristiwa beforeinstallprompt, itulah indikasi bahwa {i>Web App<i} dapat diinstal dan tombol instal dapat ditampilkan kepada pengguna. Peristiwa beforeinstallprompt diaktifkan saat aplikasi memenuhi kriteria kemampuan penginstalan.

Merekam peristiwa memungkinkan developer menyesuaikan penginstalan dan meminta pengguna untuk menginstal ketika mereka mempertimbangkannya saat itu adalah waktu terbaik.

  1. Klik Remix to Edit agar project dapat diedit.
  2. Tambahkan pengendali peristiwa beforeinstallprompt ke objek window.
  3. Simpan event sebagai variabel global; kita akan membutuhkannya nanti untuk menampilkan .
  4. 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() di beforeinstallprompt yang disimpan peristiwa. Memanggil prompt() dilakukan dalam pengendali klik tombol instal karena prompt() harus dipanggil dari gestur pengguna.

  1. Menambahkan pengendali peristiwa klik untuk tombol instal.
  2. Panggil prompt() pada peristiwa beforeinstallprompt yang disimpan.
  3. Catat hasil perintah.
  4. Tetapkan peristiwa beforeinstallprompt yang disimpan ke null.
  5. 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 penginstalan

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

  1. Tambahkan pengendali peristiwa appinstalled ke objek window.
  2. 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 tambahan yang dapat Anda lakukan: