Panel Alamat Menginstal untuk Progressive Web App di Desktop

Progressive Web App mudah diinstal dengan tombol instal baru di kolom URL Chrome (omnibox).

Di desktop, biasanya tidak ada indikasi kepada pengguna bahwa laman {i>Progressive Web<i} Aplikasi dapat diinstal, dan jika tersedia, alur penginstalan disembunyikan dalam ketiga menu titik.

Di Chrome 76 (versi beta pertengahan Juni 2019), kami akan mempermudah pengguna untuk menginstal Progressive Web App di desktop dengan menambahkan tombol instal ke alamat bilah (omnibox). Jika situs memenuhi Kriteria kemampuan penginstalan Progressive Web App, Chrome akan otomatis menampilkan ikon instal di kolom URL. Mengeklik meminta pengguna untuk menginstal PWA.

Seperti peristiwa penginstalan lainnya, Anda dapat memproses appinstalled peristiwa untuk mendeteksi apakah pengguna menginstal PWA Anda.

Menambahkan perintah penginstalan Anda sendiri

Jika PWA Anda memiliki kasus penggunaan yang berguna bagi pengguna untuk menginstal aplikasi, misalnya, jika Anda memiliki pengguna yang menggunakan aplikasi Anda lebih dari sekali dalam seminggu, harus mempromosikan penginstalan PWA dalam UI web aplikasi Anda.

Untuk menambahkan tombol instal khusus, dengarkan Peristiwa beforeinstallprompt. Saat dinyalakan, menyimpan referensi ke peristiwa, dan memperbarui antarmuka pengguna agar pengguna dapat tahu bahwa mereka dapat menginstal {i>Progressive Web App<i} Anda.

Pola untuk mempromosikan penginstalan PWA Anda

Ada tiga cara utama untuk mempromosikan penginstalan PWA Anda:

  • Promosi browser otomatis, seperti tombol instal kolom URL.
  • Promosi UI aplikasi, tempat elemen UI muncul di aplikasi antarmuka, seperti banner, tombol di header atau menu navigasi, dll.
  • Pola promosi inline menyisipkan promosi dalam konten situs.

Lihat Pola untuk Mempromosikan Penginstalan PWA (seluler) untuk mengetahui detail selengkapnya. Fokusnya adalah seluler, tetapi banyak pola yang dapat diterapkan untuk desktop, atau dapat dengan mudah dimodifikasi agar sesuai untuk pengalaman {i>desktop<i}.