Di Chrome 76, Anda dapat menyembunyikan panel info mini Tambahkan ke Layar utama

Penny McLachlan
Penny McLachlan

Latar belakang Progressive Web App dan infobar mini

Progressive Web App (PWA) adalah pola untuk membuat situs yang mirip aplikasi, pemuatan instan, andal, dan dapat diinstal.

Saat PWA Anda lulus checklist kemampuan penginstalan di Android, dialog sistem Chrome yang disebut infobar mini akan muncul di bagian bawah jendela browser.

Saat ini, infobar mini Tambahkan ke layar Utama ditampilkan bersamaan dengan peristiwa beforeinstallprompt.

Perubahan di Chrome 76

Kami mendengar masukan dari komunitas, dan kami mendengar bahwa developer menginginkan kontrol lebih besar terkait kapan harus meminta pengguna menginstal PWA. Kami mendengar masukan Anda.

Mulai Chrome 76, Anda dapat mencegah infobar mini dengan memanggil preventDefault() pada peristiwa beforeinstallprompt.

Peristiwa beforeinstallprompt dapat membantu Anda mempromosikan penginstalan progressive web app, sehingga memudahkan pengguna untuk menambahkannya ke layar utama mereka. Komunitas kami telah menyampaikan bahwa pengguna yang menginstal PWA ke layar utama memiliki tingkat interaksi yang tinggi, dengan lebih banyak kunjungan berulang, waktu yang dihabiskan dalam aplikasi, dan jika memungkinkan, rasio konversi yang lebih tinggi.

Contoh Pinterest yang menggunakan banner penginstalan untuk mempromosikan kemampuan penginstalan
    PWA mereka.
Contoh Pinterest yang menggunakan banner penginstalan untuk mempromosikan kemampuan penginstalan PWA mereka. Lihat Menambahkan ke Layar Utama untuk mengetahui detail lengkap tentang alur tambahkan ke layar utama, termasuk contoh kode, dan praktik terbaik lainnya.

Untuk mempromosikan aplikasi web Anda tanpa infobar mini, proses peristiwa beforeinstallprompt, lalu simpan peristiwa. Selanjutnya, perbarui antarmuka pengguna untuk menunjukkan bahwa PWA Anda dapat diinstal, misalnya dengan menambahkan tombol instal, menampilkan banner instal, menggunakan promosi dalam feed, atau opsi menu. Saat pengguna mengklik elemen instal, panggil prompt() pada peristiwa beforeinstallprompt yang disimpan untuk menampilkan dialog modal tambahkan ke layar utama.

Masa depan mini infobar Tambahkan ke layar Utama

Penggunaan kolom info tambahkan ke layar utama masih merupakan tindakan sementara. Kami bereksperimen dengan pola UI baru yang akan terus memberi pengguna Progressive Web App kemampuan untuk menginstal, dan melakukannya dengan cara yang mengurangi kekacauan dalam pengalaman penjelajahan.