Permintaan penginstalan

Pengguna mungkin tidak familier dengan proses penginstalan PWA. Sebagai developer, Anda akan memahami kapan saat yang tepat untuk mengundang pengguna menginstal aplikasi. Petunjuk penginstalan browser default juga dapat ditingkatkan. Mari kita lihat {i>tool <i}yang tersedia.

Meningkatkan dialog penginstalan

Browser memberikan perintah penginstalan default saat PWA lulus kriteria penginstalan. Browser menggunakan properti name dan icons dari Manifes Aplikasi Web Anda untuk membuat perintah.

Perintah penginstalan Microsoft Edge.

Beberapa browser meningkatkan pengalaman perintah penginstalan menggunakan kolom promosi dalam manifes, termasuk description, categories, dan screenshots. Misalnya, saat menggunakan Chrome di Android, jika PWA Anda memberikan nilai untuk kolom description dan screenshots, pengalaman dialog penginstalan akan berubah dari panel info Tambahkan ke layar utama yang 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 masih harus memenuhi kriteria penginstalan: saat browser mendeteksi bahwa aplikasi dapat diinstal, browser akan mengaktifkan peristiwa beforeinstallprompt. Anda harus menerapkan pengendali peristiwa ini untuk menyesuaikan pengalaman pengguna. Berikut caranya:

  1. Proses peristiwa beforeinstallprompt.
  2. Simpan (Anda akan memerlukannya nanti).
  3. Picu dari UI Anda.

Periksa kode di bawah guna melihat contoh pemroses peristiwa untuk peristiwa beforeinstallprompt, pengambilannya, dan penggunaan kustom berikutnya.

// 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()-nya, karena pengguna masih harus melalui proses browser untuk menginstal aplikasi Anda. Yang Anda lakukan adalah menunda acara hingga Anda memberikan konteks yang tepat kepada pengguna untuk mendorong mereka menginstal PWA.

Merekam peristiwa akan memberi Anda kesempatan untuk menambahkan petunjuk dan insentif bagi pengguna untuk menginstal aplikasi, dan memilih untuk meminta penginstalan jika Anda mengetahui bahwa pengguna lebih aktif.

Peristiwa tidak akan diaktifkan jika:

  • Pengguna telah menginstal PWA saat ini (hanya valid untuk desktop dan WebAPK di Android).
  • Aplikasi tidak memenuhi kriteria penginstalan PWA.
  • PWA tidak dapat diinstal pada perangkat saat ini karena alasan lain (misalnya, perangkat dalam mode kios atau tanpa izin).

Tempat terbaik untuk meminta perintah

Tempat untuk meminta izin bergantung pada aplikasi dan waktu pengguna paling sering berinteraksi dengan konten dan layanan Anda. Saat mengambil beforeinstallprompt, Anda dapat memandu pengguna mengetahui alasan untuk terus menggunakan aplikasi Anda serta manfaat yang akan mereka dapatkan jika menginstalnya. Anda dapat memilih untuk menampilkan petunjuk penginstalan di mana saja dalam aplikasi. Beberapa pola umumnya: 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 memahami dengan lebih baik tempat dan waktu untuk 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 berikut dalam penerapannya 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, pada platform yang memungkinkan pengguna menginstal PWA secara manual, seperti iOS, Anda dapat menampilkan petunjuk ini kepada pengguna.

Anda sebaiknya hanya 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

Perpustakaan

Lihat library ini untuk mendapatkan bantuan dalam merender prompt penginstalan kustom:

Resource