Perintah Instal Aplikasi Native

Permintaan penginstalan aplikasi native memberi Anda kemampuan untuk mengizinkan pengguna menginstal aplikasi native dengan cepat dan mulus di perangkat mereka langsung dari app store, tanpa keluar dari browser, dan tanpa menampilkan interstisial yang mengganggu.

Apa kriterianya?

Untuk menampilkan permintaan penginstalan aplikasi native kepada pengguna, situs Anda harus memenuhi kriteria berikut:

  • Tidak ada aplikasi web maupun aplikasi asli yang saat ini diinstal di perangkat.
  • Mencakup Manifes Aplikasi Web yang menyertakan:
  • Disediakan melalui HTTPS

Peristiwa beforeinstallprompt akan diaktifkan saat Anda memenuhi kriteria ini. Anda dapat menggunakannya untuk meminta pengguna menginstal aplikasi native.

Properti manifes yang diperlukan

Untuk meminta pengguna menginstal aplikasi native, Anda perlu menambahkan dua properti ke manifes aplikasi web, prefer_related_applications dan related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

Properti prefer_related_applications akan memberi tahu browser untuk meminta pengguna dengan aplikasi native Anda, bukan aplikasi web. Jika nilai ini tidak disetel, atau false, browser akan meminta pengguna untuk menginstal aplikasi web.

related_applications adalah array berisi daftar objek yang memberi tahu browser tentang aplikasi native pilihan Anda. Setiap objek harus menyertakan properti platform dan properti id. Dengan platform adalah play dan id adalah ID aplikasi Play Store Anda.

Menampilkan perintah penginstalan

Untuk menampilkan dialog penginstalan, Anda harus:

  1. Proses peristiwa beforeinstallprompt.
  2. Beri tahu pengguna bahwa aplikasi native Anda dapat diinstal dengan tombol atau elemen lain yang akan menghasilkan peristiwa gestur pengguna.
  3. Tampilkan perintah dengan memanggil prompt() pada peristiwa beforeinstallprompt yang disimpan.

Dengarkan bahasa beforeinstallprompt

Jika kriteria terpenuhi, Chrome akan mengaktifkan peristiwa beforeinstallprompt. Anda dapat menggunakannya untuk menunjukkan bahwa aplikasi dapat diinstal, lalu meminta pengguna untuk menginstalnya.

Saat peristiwa beforeinstallprompt telah diaktifkan, simpan referensi ke peristiwa tersebut, dan update antarmuka pengguna untuk menunjukkan bahwa pengguna tersebut dapat menginstal aplikasi Anda.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Memberi tahu pengguna bahwa aplikasi Anda dapat diinstal

Cara terbaik untuk memberi tahu pengguna bahwa aplikasi Anda dapat diinstal adalah dengan menambahkan tombol atau elemen lain ke antarmuka pengguna. Jangan tampilkan interstisial halaman penuh atau elemen lain yang mungkin mengganggu atau mengalihkan perhatian.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Tampilkan dialog

Untuk menampilkan perintah penginstalan, panggil prompt() pada peristiwa tersimpan dari dalam gestur pengguna. Tindakan ini akan menampilkan dialog modal, yang meminta pengguna menambahkan aplikasi Anda ke layar utama.

Kemudian, proses promise yang ditampilkan oleh properti userChoice. Promise menampilkan objek dengan properti outcome setelah dialog ditampilkan dan pengguna meresponsnya.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Anda hanya dapat memanggil prompt() pada peristiwa yang ditangguhkan satu kali. Jika pengguna menutupnya, Anda harus menunggu hingga peristiwa beforeinstallprompt diaktifkan pada navigasi halaman berikutnya.

Pertimbangan khusus saat menggunakan kebijakan keamanan konten

Jika situs Anda memiliki Kebijakan Keamanan Konten yang ketat, pastikan untuk menambahkan *.googleusercontent.com ke perintah img-src agar Chrome dapat mendownload ikon yang terkait dengan aplikasi Anda dari Play Store.

Dalam beberapa kasus, *.googleusercontent.com mungkin lebih panjang dari yang diinginkan. Anda dapat mempersempitnya dengan melakukan proses debug jarak jauh di perangkat Android untuk menentukan URL ikon aplikasi.