Perubahan untuk ditambahkan ke perilaku layar utama

Pete LePage

Sejak pertama kali meluncurkan banner tambahkan ke layar utama, kami telah berupaya memberi label Progressive Web App dengan lebih jelas dan menyederhanakan cara pengguna menginstalnya. Tujuan akhir kami adalah menyediakan tombol instal di 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 lagi menampilkan banner tambahkan ke layar utama. Jika situs memenuhi kriteria penambahan ke layar utama, Chrome akan menampilkan infobar mini. Kemudian, jika pengguna mengklik infobar mini, atau Anda memanggil prompt() pada peristiwa beforeinstallprompt dari dalam gestur pengguna, Chrome akan menampilkan dialog tambahkan ke layar utama modal.

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.

Infobar mini Chrome 68 dan yang lebih baru

Ditampilkan saat situs memenuhi kriteria tambahkan ke layar utama

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

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

Pengobatan UI ini akan dihapus di Chrome versi mendatang saat tombol instal omnibox 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.

Mini-infobar

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

Daripada meminta pengguna saat pemuatan halaman (anti-pola untuk permintaan izin), Anda dapat menunjukkan bahwa aplikasi 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.

Permintaan untuk menginstal aplikasi Anda pada gestur pengguna terasa kurang spam bagi pengguna dan meningkatkan kemungkinan mereka akan mengklik 'Tambahkan', bukan 'Batal'. Menyertakan tombol Instal ke dalam aplikasi berarti 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 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 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 mereka. 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 mendatang ke prompt() karena panggilan tersebut harus dipanggil dalam gestur pengguna.

Referensi Tambahan

Lihat Banner Penginstalan Aplikasi untuk mengetahui 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