Perintah Instal Aplikasi Native

Perintah 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 perintah penginstalan aplikasi native kepada pengguna, situs Anda harus memenuhi kriteria berikut:

  • Baik aplikasi web maupun aplikasi native saat ini tidak diinstal di perangkat.
  • Menyertakan Manifes Aplikasi Web yang mencakup:
  • Ditayangkan melalui HTTPS

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

Properti manifes yang diperlukan

Untuk meminta pengguna menginstal aplikasi native, Anda harus 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 memberi tahu browser untuk meminta pengguna menggunakan aplikasi native, bukan aplikasi web. Jika Anda membiarkan nilai ini tidak ditetapkan, atau false, browser akan meminta pengguna untuk menginstal aplikasi web.

related_applications adalah array dengan 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.

Setelah peristiwa beforeinstallprompt diaktifkan, simpan referensi ke peristiwa tersebut, lalu perbarui antarmuka pengguna untuk menunjukkan bahwa pengguna 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;
});

Beri 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 menampilkan interstisial satu halaman penuh atau elemen lain yang mungkin mengganggu atau membingungkan.

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';
});

Menampilkan perintah

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

Kemudian, dengarkan promise yang ditampilkan oleh properti userChoice. Promise menampilkan objek dengan properti outcome setelah perintah 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 membatasi, pastikan untuk menambahkan *.googleusercontent.com ke perintah img-src sehingga 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 perangkat Android untuk menentukan URL ikon aplikasi.