Perubahan untuk ditambahkan ke perilaku layar utama

Pete LePage

Sejak pertama kali meluncurkan banner tambahkan ke layar utama, kami telah berupaya melabeli Progressive Web App dengan lebih jelas dan menyederhanakan cara pengguna menginstalnya. Tujuan akhir kami adalah menyediakan tombol penginstalan di kotak omnibox di semua platform, dan di Chrome 68 kami melakukan perubahan untuk mencapai tujuan tersebut.

Apa yang berubah?

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

Banner A2HS Chrome 67 dan yang lebih lama

Ditampilkan secara otomatis saat situs memenuhi kriteria tambahkan ke layar utama, dan situs tidak memanggil preventDefault() pada peristiwa beforeinstallprompt

ATAU

Ditampilkan dengan memanggil prompt() pada peristiwa beforeinstallprompt.

Info mini Chrome 68 dan yang lebih baru

Ditampilkan saat situs memenuhi kriteria penambahan ke layar utama

Jika ditutup oleh pengguna, notifikasi tidak akan ditampilkan hingga jangka waktu yang cukup lama (~3 bulan) telah berlalu.

Ditampilkan terlepas dari apakah preventDefault() dipanggil pada peristiwa beforeinstallprompt.

Perubahan UI ini akan dihapus di Chrome versi mendatang saat tombol penginstalan kotak penelusuran diperkenalkan.

Dialog A2HS

Ditampilkan dengan memanggil prompt() dari dalam gestur pengguna pada peristiwa beforeinstallprompt di Chrome 68 dan yang lebih baru.

ATAU

Ditampilkan saat pengguna mengetuk infobar mini di Chrome 68 dan yang lebih baru.

ATAU

Ditampilkan setelah pengguna mengklik 'Tambahkan ke Layar utama' dari menu Chrome di semua versi Chrome.

Infobar mini

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

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

Mendorong pengguna untuk menginstal aplikasi Anda saat gestur pengguna terasa tidak seperti spam bagi pengguna dan meningkatkan kemungkinan mereka akan mengklik 'Tambahkan' daripada 'Batal'. Dengan menyertakan tombol Instal ke dalam aplikasi, meskipun pengguna memilih untuk tidak menginstal aplikasi Anda hari ini, tombol tersebut akan tetap ada besok, atau kapan pun mereka siap menginstal.

Memproses peristiwa beforeinstallprompt

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

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 penambahan ke layar utama). Namun, jika pengguna meng-uninstal aplikasi nanti, peristiwa beforeinstallprompt akan diaktifkan lagi pada setiap navigasi halaman.

Menampilkan dialog dengan prompt()

Untuk menampilkan dialog tambahkan ke layar utama, panggil prompt() pada acara tersimpan dari dalam gestur pengguna. Chrome akan menampilkan dialog modal, yang meminta pengguna untuk menambahkan aplikasi Anda ke layar utama mereka. Kemudian, dengarkan promise yang ditampilkan oleh properti userChoice dari peristiwa beforeinstallprompt. Promise mengembalikan 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 batal pada dialog, Anda harus menunggu hingga peristiwa beforeinstallprompt diaktifkan pada navigasi halaman berikutnya. Berbeda dengan permintaan izin tradisional, mengklik batal tidak akan memblokir panggilan mendatang ke prompt() karena panggilan tersebut harus dilakukan dalam gestur pengguna.

Referensi Tambahan

Lihat Banner Penginstalan Aplikasi untuk mengetahui informasi selengkapnya, termasuk:

• Detail acara beforeinstallprompt
• Melacak respons pengguna terhadap perintah tambahkan ke layar utama
• Melacak apakah aplikasi telah diinstal
• Menentukan apakah aplikasi Anda berjalan sebagai aplikasi yang diinstal