Perintah Instal Aplikasi Native

Perintah instal aplikasi asli memberi Anda kemampuan untuk memungkinkan pengguna dengan cepat dan menginstal aplikasi asli Anda dengan lancar di perangkat mereka langsung dari {i>app store<i}, tanpa meninggalkan 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:
  • short_name
  • name (digunakan di perintah banner)
  • icons termasuk versi 192 px dan 512 px
  • prefer_related_applications adalah true
  • Objek related_applications dengan informasi tentang aplikasi
• Ditayangkan melalui HTTPS

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

Catatan: Chrome hanya mendukung perintah penginstalan aplikasi native dalam rilis stabil saat ini. Di saluran Chrome lainnya (Beta/Dev/Canary), peristiwa beforeinstallprompt tidak akan diaktifkan, meskipun kriteria di atas terpenuhi.

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"
    }
]

prefer_related_applications

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

related_applications

related_applications adalah array dengan daftar objek yang memberi tahu browser tentang aplikasi asli yang Anda sukai. 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() di beforeinstallprompt yang disimpan peristiwa.

Mendengarkan beforeinstallprompt

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

Saat peristiwa beforeinstallprompt diaktifkan, simpan referensi ke peristiwa tersebut. dan memperbarui 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';
});

Berhasil: Anda mungkin ingin menunggu sebelum menampilkan perintah kepada pengguna, sehingga Anda tidak mengalihkan perhatian mereka dari apa yang mereka lakukan. Misalnya, jika pengguna sedang dalam proses check out, atau membuat akun, biarkan mereka sebelum menyela mereka dengan perintah.

Tampilkan perintah

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

Kemudian, proses 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 menolak Anda harus menunggu hingga peristiwa beforeinstallprompt diaktifkan 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. Penting dapat mempersempitnya dengan proses debug jarak jauh perangkat Android untuk menentukan URL ikon aplikasi.