Banyak browser yang memungkinkan Anda mengaktifkan dan mempromosikan penginstalan Progressive Web App (PWA) langsung dalam antarmuka penggunanya. Penginstalan (terkadang sebelumnya disebut sebagai Tambahkan ke Layar Utama) memungkinkan pengguna menginstal PWA Anda di perangkat seluler atau desktop mereka. Menginstal PWA akan menambahkannya ke peluncur pengguna sehingga dapat berjalan seperti aplikasi terinstal lainnya.
Selain pengalaman penginstalan yang disediakan browser, Anda dapat menyediakan alur penginstalan kustom Anda sendiri langsung dalam aplikasi.
Saat mempertimbangkan apakah akan mempromosikan pemasangan, pertimbangkan bagaimana pengguna biasanya
menggunakan PWA Anda. Misalnya, jika ada sekelompok pengguna yang menggunakan PWA Anda beberapa kali
dalam seminggu, pengguna ini mungkin mendapatkan manfaat dari kemudahan tambahan
meluncurkan aplikasi Anda dari layar utama ponsel atau dari menu Mulai di sistem operasi
desktop. Beberapa aplikasi produktivitas dan hiburan juga mendapatkan manfaat
dari ruang layar tambahan yang dibuat dengan menghapus toolbar browser dari
jendela dalam mode standalone
, minimal-ui
, atau window-control-overlay
yang diinstal.
Prasyarat
Sebelum memulai, pastikan PWA Anda memenuhi persyaratan kemampuan penginstalan, yang biasanya termasuk memiliki manifes aplikasi web.
Mempromosikan penginstalan
Untuk menunjukkan bahwa Progressive Web App Anda dapat diinstal, dan untuk menyediakan alur penginstalan dalam aplikasi kustom:
- Proses peristiwa
beforeinstallprompt
. - Simpan peristiwa
beforeinstallprompt
agar dapat memicu alur penginstalan nanti. - Beri tahu pengguna bahwa PWA Anda dapat diinstal, dan berikan tombol atau elemen lain untuk memulai alur penginstalan dalam aplikasi.
Memproses peristiwa beforeinstallprompt
Jika Progressive Web App Anda memenuhi kriteria penginstalan yang diperlukan,
browser mengaktifkan peristiwa beforeinstallprompt
. Simpan referensi ke peristiwa,
dan memperbarui antarmuka pengguna untuk menunjukkan bahwa pengguna dapat menginstal PWA Anda.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Alur penginstalan dalam aplikasi
Untuk menyediakan penginstalan dalam aplikasi, sediakan tombol atau elemen antarmuka lainnya
yang dapat diklik atau diketuk oleh pengguna untuk menginstal aplikasi Anda. Ketika elemen diklik atau
diketuk, panggil prompt()
pada peristiwa beforeinstallprompt
yang disimpan (disimpan di
variabel deferredPrompt
). Ini menunjukkan kepada pengguna dialog
penginstalan modal, yang meminta
mereka untuk mengonfirmasi bahwa
mereka ingin menginstal PWA Anda.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
Properti userChoice
adalah promise yang diselesaikan dengan pilihan pengguna.
Anda hanya dapat memanggil prompt()
pada peristiwa yang ditangguhkan satu kali. Jika pengguna
menutupnya, Anda harus menunggu hingga peristiwa beforeinstallprompt
diaktifkan kembali, biasanya tepat setelah properti userChoice
telah diselesaikan.
Mendeteksi kapan PWA berhasil diinstal
Anda dapat menggunakan properti userChoice
untuk menentukan apakah pengguna menginstal
aplikasi Anda dari dalam antarmuka pengguna. Namun, jika pengguna menginstal PWA Anda
dari kolom URL atau komponen browser lain, userChoice
tidak akan membantu.
Sebagai gantinya, Anda harus memproses peristiwa appinstalled
, yang diaktifkan setiap kali
PWA diinstal, apa pun mekanisme yang digunakan untuk menginstalnya.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Mendeteksi cara PWA diluncurkan
Kueri media display-mode
CSS menunjukkan cara PWA diluncurkan, baik dalam
tab browser, atau sebagai PWA yang diinstal. Hal ini memungkinkan penerapan gaya
yang berbeda, bergantung pada cara aplikasi diluncurkan. Misalnya, Anda dapat mengonfigurasi
agar selalu menyembunyikan tombol {i>install<i} dan menyediakan
tombol kembali ketika diluncurkan sebagai
PWA yang terinstal.
Melacak cara PWA diluncurkan
Untuk melacak cara pengguna meluncurkan PWA Anda, gunakan matchMedia()
untuk menguji
kueri media display-mode
.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
Lacak saat mode tampilan berubah
Untuk melacak apakah pengguna beralih antara browser
dan mode tampilan lainnya,
memproses perubahan
pada kueri media display-mode
.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
Mengupdate UI berdasarkan mode tampilan saat ini
Untuk menerapkan warna latar belakang yang berbeda bagi PWA saat diluncurkan sebagai aplikasi terinstal PWA, gunakan CSS bersyarat:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Memperbarui ikon dan nama aplikasi
Bagaimana jika Anda perlu memperbarui nama aplikasi, atau memberikan ikon baru? Lihat Cara Chrome menangani update untuk manifes aplikasi web untuk melihat kapan dan bagaimana perubahan tersebut diterapkan di Chrome.