Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri

Pete LePage

Dipublikasikan: 14 Februari 2020

Banyak browser memungkinkan Anda mengaktifkan dan mempromosikan penginstalan Progressive Web App (PWA) langsung dalam antarmuka penggunanya. Penginstalan (sebelumnya disebut sebagai Tambahkan ke Layar Utama) memungkinkan pengguna menambahkan PWA Anda ke perangkat seluler atau desktop mereka. Menginstal PWA akan menambahkannya ke peluncur pengguna, sehingga PWA dapat berjalan seperti aplikasi terinstal lainnya.

Selain pengalaman penginstalan yang disediakan browser, Anda dapat menyediakan alur penginstalan kustom sendiri langsung dalam aplikasi.

Tombol "Instal Aplikasi" yang disediakan di PWA Spotify.

Saat mempertimbangkan apakah akan mempromosikan penginstalan, pertimbangkan cara pengguna biasanya menggunakan PWA Anda. Misalnya, jika ada sekumpulan pengguna yang menggunakan PWA Anda beberapa kali dalam seminggu, pengguna ini mungkin mendapatkan manfaat dari kemudahan tambahan untuk meluncurkan aplikasi Anda dari layar utama ponsel atau dari menu Start di sistem operasi desktop. Beberapa aplikasi produktivitas dan hiburan juga mendapatkan manfaat dari ruang layar tambahan yang dibuat dengan menghapus toolbar browser dari jendela dalam mode standalone, minimal-ui, atau window-control-overlay yang diinstal.

Prasyarat

Sebelum memulai, pastikan PWA Anda memenuhi persyaratan kemampuan penginstalan, yang biasanya mencakup kepemilikan manifest aplikasi web.

Mempromosikan penginstalan

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

  1. Dengarkan peristiwa beforeinstallprompt.
  2. Simpan peristiwa beforeinstallprompt sehingga dapat memicu alur penginstalan nanti.
  3. Memberi tahu pengguna bahwa PWA Anda dapat diinstal, dan menyediakan tombol atau elemen lain untuk memulai alur penginstalan dalam aplikasi.

Memproses peristiwa beforeinstallprompt

Jika Progressive Web App Anda memenuhi kriteria penginstalan yang diperlukan, browser akan memicu peristiwa beforeinstallprompt. Simpan referensi ke peristiwa, dan perbarui antarmuka pengguna Anda 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, berikan tombol atau elemen antarmuka lain yang dapat diklik atau diketuk pengguna untuk menginstal aplikasi Anda. Saat elemen diklik atau diketuk, panggil prompt() pada peristiwa beforeinstallprompt yang disimpan (disimpan dalam variabel deferredPrompt). Hal ini akan menampilkan dialog penginstalan modal kepada pengguna, 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 janji 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 dipicu lagi, biasanya segera setelah properti userChoice di-resolve.

Mendeteksi saat PWA berhasil diinstal

Anda dapat menggunakan properti userChoice untuk menentukan apakah pengguna menginstal aplikasi Anda dari dalam antarmuka pengguna Anda. Namun, jika pengguna menginstal PWA Anda dari kolom URL atau komponen browser lain, userChoice tidak akan membantu. Sebagai gantinya, Anda harus memproses peristiwa appinstalled, yang diaktifkan setiap kali PWA Anda 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 CSS display-mode menunjukkan cara PWA diluncurkan, baik di tab browser, atau sebagai PWA yang diinstal. Dengan demikian, Anda dapat menerapkan gaya yang berbeda, bergantung pada cara aplikasi diluncurkan. Misalnya, Anda dapat mengonfigurasinya agar selalu menyembunyikan tombol instal dan menyediakan tombol kembali saat diluncurkan sebagai PWA yang diinstal.

Melacak cara PWA diluncurkan

Untuk melacak cara pengguna meluncurkan PWA Anda, gunakan matchMedia() untuk menguji kueri media display-mode.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

Melacak saat mode tampilan berubah

Untuk melacak apakah pengguna beralih antara browser dan mode tampilan lainnya, dengarkan perubahan pada kueri media display-mode.

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

Mengupdate UI berdasarkan mode tampilan saat ini

Untuk menerapkan warna latar belakang yang berbeda untuk PWA saat diluncurkan sebagai PWA yang diinstal, gunakan CSS bersyarat:

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

Memperbarui ikon dan nama aplikasi Anda

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