Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri

Pete LePage

Banyak browser memungkinkan Anda mengaktifkan dan mempromosikan penginstalan Progressive Web App (PWA) Anda secara langsung dari antarmuka penggunanya. Penginstalan (terkadang sebelumnya disebut sebagai Add to Home Screen) memungkinkan pengguna menginstal PWA Anda di perangkat seluler atau desktop mereka. Menginstal PWA akan menambahkannya ke peluncur sehingga dapat berjalan seperti aplikasi terinstal lainnya.

Selain pengalaman penginstalan yang disediakan browser, Anda bisa menyediakan alur penginstalan kustom secara langsung di dalam aplikasi.

Saat mempertimbangkan apakah akan mempromosikan pemasangan, pertimbangkan bagaimana pengguna biasanya menggunakan PWA Anda. Misalnya, jika ada sekelompok pengguna yang menggunakan beberapa PWA Anda kali dalam seminggu, para pengguna ini mungkin mendapat manfaat dari kenyamanan tambahan meluncurkan aplikasi Anda dari layar utama ponsel atau dari menu Start di desktop sistem operasi seluler. Beberapa aplikasi produktivitas dan hiburan juga dapat memanfaatkan dari ruang layar ekstra yang dibuat dengan menghapus bilah alat browser dari jendela dalam mode standalone atau minimal-ui yang terinstal.

Prasyarat

Sebelum memulai, pastikan PWA Anda memenuhi persyaratan kemampuan penginstalan, yang biasanya termasuk memiliki manifes aplikasi web.

Mempromosikan penginstalan

Untuk menunjukkan bahwa Progressive Web App Anda dapat diinstal, dan untuk memberikan alur penginstalan dalam aplikasi:

1. Proses peristiwa beforeinstallprompt.
2. Simpan peristiwa beforeinstallprompt agar dapat memicu alur penginstalan nanti.
3. Beri tahu pengguna bahwa PWA Anda dapat diinstal, dan berikan tombol atau untuk memulai alur penginstalan dalam aplikasi.

Memproses peristiwa beforeinstallprompt

Jika Progressive Web App Anda memenuhi kriteria penginstalan yang diperlukan, browser mengaktifkan peristiwa beforeinstallprompt. Simpan referensi ke peristiwa, dan memperbarui antarmuka pengguna untuk menunjukkan bahwa pengguna dapat menginstal PWA Anda.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

Alur penginstalan dalam aplikasi

Untuk menyediakan penginstalan dalam aplikasi, sediakan tombol atau elemen antarmuka lainnya yang dapat diklik atau diketuk oleh pengguna untuk menginstal aplikasi Anda. Ketika elemen diklik atau diketuk, panggil prompt() pada peristiwa beforeinstallprompt yang disimpan (disimpan di variabel deferredPrompt). Ini menunjukkan kepada pengguna dialog penginstalan modal, yang meminta mereka untuk mengonfirmasi bahwa mereka ingin menginstal PWA Anda.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

Properti userChoice adalah promise yang diselesaikan dengan pilihan pengguna. Anda hanya dapat memanggil prompt() pada peristiwa yang ditangguhkan satu kali. Jika pengguna menutupnya, Anda harus menunggu hingga peristiwa beforeinstallprompt diaktifkan kembali, biasanya tepat setelah properti userChoice telah diselesaikan.

Mendeteksi kapan PWA berhasil diinstal

Anda dapat menggunakan properti userChoice untuk menentukan apakah pengguna telah menginstal aplikasi Anda dari dalam antarmuka pengguna. Namun, jika pengguna menginstal PWA Anda dari kolom URL atau komponen browser lainnya, userChoice tidak akan membantu. Sebagai gantinya, Anda harus memproses peristiwa appinstalled, yang diaktifkan setiap kali PWA Anda sudah diinstal, apa pun mekanisme yang digunakan untuk menginstalnya.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

Mendeteksi cara PWA diluncurkan

Kueri media display-mode CSS menunjukkan cara PWA diluncurkan, baik dalam tab browser, atau sebagai PWA yang diinstal. Hal ini memungkinkan untuk menerapkan berbagai {i>style<i} tergantung pada cara aplikasi diluncurkan. Misalnya, Anda dapat mengonfigurasi agar selalu menyembunyikan tombol {i>install<i} dan menyediakan tombol kembali ketika diluncurkan sebagai PWA yang telah diinstal.

Melacak cara PWA diluncurkan

Untuk melacak cara pengguna meluncurkan PWA Anda, gunakan matchMedia() untuk menguji Kueri media display-mode. Safari di iOS belum mendukung fitur ini, jadi Anda harus sebagai gantinya, periksa navigator.standalone, yang menampilkan boolean yang menunjukkan apakah browser berjalan dalam mode mandiri.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

Lacak saat mode tampilan berubah

Untuk melacak apakah pengguna berubah antara standalone dan browser tab, proses perubahan pada kueri media display-mode.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Mengupdate UI berdasarkan mode tampilan saat ini

Untuk menerapkan warna latar belakang yang berbeda bagi PWA saat diluncurkan sebagai aplikasi terinstal PWA, gunakan CSS bersyarat:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Memperbarui ikon dan nama aplikasi

Bagaimana jika Anda perlu memperbarui nama aplikasi, atau memberikan ikon baru? Lihat Cara Chrome menangani update untuk manifes aplikasi web untuk melihat kapan dan bagaimana perubahan tersebut diterapkan di Chrome.