Ada banyak browser yang memungkinkan Anda mengaktifkan dan mempromosikan penginstalan Progressive Web App (PWA) langsung dari dalam antarmuka pengguna PWA. Penginstalan (terkadang disebut Tambahkan ke Layar Utama) memudahkan pengguna menginstal PWA Anda di perangkat seluler atau desktop. Menginstal PWA akan menambahkannya ke peluncur pengguna, sehingga dapat berjalan seperti aplikasi terinstal lainnya.
Selain pengalaman penginstalan yang disediakan browser, Anda juga dapat memberikan alur penginstalan kustom sendiri, langsung dari dalam aplikasi.
Saat mempertimbangkan apakah akan mempromosikan penginstalan, sebaiknya pikirkan cara pengguna biasanya menggunakan PWA Anda. Misalnya, jika ada sekelompok pengguna yang
menggunakan PWA beberapa kali dalam seminggu, mereka mungkin diuntungkan oleh
kemudahan tambahan dalam meluncurkan aplikasi dari layar utama ponsel atau
dari menu Start di sistem operasi desktop. Beberapa aplikasi produktivitas dan
hiburan juga dapat memanfaatkan area layar ekstra
yang dibuat dengan menghapus toolbar browser dari jendela dalam mode
standalone
atau minimal-ui
yang diinstal.
Prasyarat
Sebelum memulai, pastikan PWA Anda memenuhi persyaratan penginstalan, yang biasanya mencakup memiliki manifes aplikasi web.
Promosikan penginstalan
Untuk menunjukkan bahwa Progressive Web App Anda dapat diinstal, dan memberikan alur penginstalan dalam aplikasi khusus:
- Proses peristiwa
beforeinstallprompt
. - Simpan peristiwa
beforeinstallprompt
agar dapat digunakan untuk memicu alur penginstalan nanti. - Beri tahu pengguna bahwa PWA dapat diinstal, dan sediakan tombol atau elemen lain untuk memulai alur penginstalan dalam aplikasi.
Memproses peristiwa beforeinstallprompt
Jika Progressive Web App Anda memenuhi kriteria penginstalan yang diperlukan, browser akan mengaktifkan peristiwa beforeinstallprompt
. Simpan referensi ke peristiwa tersebut, dan update antarmuka pengguna Anda 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 lain
yang dapat diklik pengguna untuk menginstal aplikasi Anda. Saat elemen
diklik, panggil prompt()
pada peristiwa beforeinstallprompt
yang disimpan (disimpan
dalam variabel deferredPrompt
). Aplikasi ini menampilkan dialog penginstalan modal kepada pengguna,
yang meminta mereka untuk mengonfirmasi bahwa mereka ingin menginstal PWA.
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 di-resolve dengan pilihan pengguna.
Anda hanya dapat memanggil prompt()
pada peristiwa yang ditangguhkan satu kali. Jika pengguna menutupnya, Anda harus menunggu hingga peristiwa beforeinstallprompt
diaktifkan lagi, biasanya segera setelah properti userChoice
di-resolve.
Mendeteksi saat PWA berhasil diinstal
Anda dapat menggunakan properti userChoice
untuk menentukan apakah pengguna menginstal aplikasi dari dalam antarmuka pengguna. Namun, jika pengguna menginstal
PWA dari kolom URL atau komponen browser lainnya, userChoice
tidak akan
membantu. Sebagai gantinya, Anda harus memproses peristiwa appinstalled
. Fitur ini akan diaktifkan setiap kali PWA Anda diinstal, apa pun mekanisme yang digunakan untuk menginstal PWA Anda.
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 di tab browser maupun sebagai PWA yang diinstal. Hal ini memungkinkan
penerapan gaya yang berbeda bergantung pada cara aplikasi diluncurkan. Misalnya,
selalu sembunyikan tombol instal dan sediakan tombol kembali saat diluncurkan sebagai
PWA yang diinstal.
Melacak bagaimana PWA diluncurkan
Untuk melacak cara pengguna meluncurkan PWA Anda, gunakan matchMedia()
untuk menguji kueri media display-mode
. Safari di iOS belum mendukung fitur ini. Jadi, Anda harus memeriksa navigator.standalone
. Safari akan menampilkan boolean yang menunjukkan apakah browser berjalan dalam mode mandiri.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Melacak kapan mode tampilan berubah
Untuk melacak apakah pengguna berubah antara standalone
, dan browser tab
, proses
perubahan pada kueri media display-mode
.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Mengupdate UI berdasarkan mode tampilan saat ini
Untuk menerapkan warna latar belakang yang berbeda untuk PWA saat diluncurkan sebagai PWA terinstal, gunakan CSS kondisional:
@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 pada manifes aplikasi web untuk mengetahui waktu dan cara perubahan tersebut diterapkan di Chrome.