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 pxprefer_related_applications
adalahtrue
- 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.
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:
- Proses peristiwa
beforeinstallprompt
. - Beri tahu pengguna bahwa aplikasi native Anda dapat diinstal dengan tombol atau elemen lain yang akan menghasilkan peristiwa gestur pengguna.
- Tampilkan perintah dengan memanggil
prompt()
dibeforeinstallprompt
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';
});
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.