Perubahan untuk ditambahkan ke perilaku layar utama

Sejak pertama kali meluncurkan banner tambahkan ke layar utama, kami telah berupaya memberi label Progressive Web App dengan lebih jelas dan menyederhanakan cara menginstalnya. Tujuan akhirnya adalah menyediakan tombol instal di omnibox di semua platform, dan di Chrome 68, kami membuat perubahan untuk sasaran tersebut.

Apa yang berubah?

Mulai Chrome 68 di Android (Stabil pada Juli 2018), Chrome tidak akan lagi menampilkan banner tambahkan ke layar utama. Jika situs memenuhi kriteria tambahkan ke layar utama, Chrome akan menampilkan infobar mini. Kemudian, jika pengguna mengklik mini-infobar, atau Anda memanggil prompt() pada peristiwa beforeinstallprompt dari dalam gestur pengguna, Chrome akan menampilkan dialog tambahkan ke layar utama modal.

Infobar mini

Infobar mini adalah komponen UI Chrome dan tidak dapat dikontrol oleh situs, tetapi dapat ditutup dengan mudah oleh pengguna. Setelah ditutup oleh pengguna, langganan tidak akan muncul lagi hingga periode waktu yang memadai telah berlalu (saat ini 3 bulan). Infobar mini akan muncul saat situs memenuhi kriteria tambahkan ke layar utama, terlepas dari apakah Anda melakukan preventDefault() pada peristiwa beforeinstallprompt atau tidak.

Infobar mini adalah pengalaman sementara untuk Chrome di Android saat kami berupaya menciptakan pengalaman yang konsisten di semua platform yang menyertakan tombol instal ke dalam omnibox. ## Memicu dialog tambahkan ke layar utama

Daripada meminta pengguna saat pemuatan halaman (anti-pola untuk permintaan izin), Anda dapat menunjukkan bahwa aplikasi Anda dapat diinstal dengan beberapa UI, yang kemudian akan menampilkan perintah penginstalan modal. Misalnya, PWA desktop ini menambahkan tombol 'Instal Aplikasi' tepat di atas nama profil pengguna.

Meminta untuk menginstal aplikasi Anda pada gestur pengguna terasa tidak terlalu berisi spam bagi pengguna dan meningkatkan kemungkinan mereka mengklik 'Tambahkan', bukan 'Batal'. Menyertakan tombol Instal ke dalam aplikasi Anda berarti bahwa meskipun pengguna memilih untuk tidak menginstal aplikasi Anda hari ini, tombol tersebut akan tetap ada di besok, atau setiap kali mereka siap untuk menginstal.

Memproses peristiwa beforeinstallprompt

Jika situs Anda memenuhi kriteria tambahkan ke layar utama, Chrome akan mengaktifkan peristiwa beforeinstallprompt, menyimpan referensi ke peristiwa, dan mengupdate antarmuka pengguna untuk menunjukkan bahwa pengguna dapat menambahkan aplikasi Anda ke layar utama.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Peristiwa beforeinstallprompt tidak akan diaktifkan jika aplikasi sudah diinstal (lihat kriteria tambahkan ke layar utama). Namun, jika pengguna kemudian meng-uninstal aplikasi, peristiwa beforeinstallprompt akan diaktifkan lagi di setiap navigasi halaman.

Menampilkan dialog dengan prompt()

Untuk menampilkan dialog tambahkan ke layar utama, panggil prompt() pada peristiwa tersimpan dari dalam gestur pengguna. Chrome akan menampilkan dialog modal, yang meminta pengguna untuk menambahkan aplikasi Anda ke layar utama. Kemudian, proses promise yang ditampilkan oleh properti userChoice dari peristiwa beforeinstallprompt. Promise menampilkan objek dengan properti outcome setelah perintah ditampilkan dan pengguna meresponsnya.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

Anda hanya dapat memanggil prompt() pada peristiwa yang ditangguhkan satu kali, jika pengguna mengklik batalkan pada dialog, Anda harus menunggu hingga peristiwa beforeinstallprompt diaktifkan pada navigasi halaman berikutnya. Tidak seperti permintaan izin tradisional, mengklik batal tidak akan memblokir panggilan di masa mendatang ke prompt() karena panggilan tersebut harus dipanggil dalam gestur pengguna.

Referensi Tambahan

Lihat Banner Penginstalan Aplikasi untuk informasi selengkapnya, termasuk:

• Detail tentang peristiwa beforeinstallprompt
• Melacak respons pengguna terhadap perintah tambahkan layar utama
• Melacak apakah aplikasi telah diinstal
• Menentukan apakah aplikasi Anda berjalan sebagai aplikasi terinstal