Permintaan penginstalan

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.

Perintah penginstalan Microsoft Edge.

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:

  1. Proses peristiwa beforeinstallprompt.
  2. Simpan (Anda akan membutuhkannya nanti).
  3. 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:

Referensi