Ana ekrana ekleme banner'ını ilk kullanıma sunduğumuzdan beri, progresif web uygulamalarını daha net bir şekilde etiketlemek ve kullanıcıların bunları yükleme şeklini basitleştirmek için çalışıyoruz. Nihai hedefimiz, tüm platformlarda adres çubuğuna bir yükleme düğmesi eklemektir. Chrome 68'de bu hedef doğrultusunda değişiklikler yapıyoruz.
Neler değişiyor?
Android'de Chrome 68'den (Temmuz 2018'de kararlı sürüm) itibaren Chrome artık ana ekrana ekleme banner'ını göstermeyecek. Site, ana ekrana ekleme ölçütlerini karşılıyorsa Chrome mini bilgi çubuğunu gösterir. Ardından, kullanıcı mini bilgi çubuğunu tıkladığında veya kullanıcı hareketi içinden beforeinstallprompt etkinliğinde prompt() işlevini çağırdığınızda Chrome, ana ekrana ekleme iletişim kutusu gösterir.
A2HS banner'ı Chrome 67 ve önceki sürümler
Site, ana ekrana ekleme ölçütlerini karşıladığında ve beforeinstallprompt etkinliğinde preventDefault() işlevini çağırmadığında otomatik olarak gösterilir.
VEYA
beforeinstallprompt etkinliğinde prompt() aranarak gösterilir.
Mini bilgi çubuğu Chrome 68 ve sonraki sürümler
Bir kullanıcı tarafından kapatılırsa yeterli bir süre (~3 ay) geçene kadar gösterilmez.
preventDefault(), beforeinstallprompt etkinliğinde çağrılıp çağrılmadığına bakılmaksızın gösterilir.
Bu kullanıcı arayüzü uygulaması, çok amaçlı adres çubuğu yükleme düğmesi kullanıma sunulduğunda Chrome'un gelecekteki bir sürümünde kaldırılacaktır.
A2HS Dialog
Chrome 68 ve sonraki sürümlerdeki beforeinstallprompt etkinliğinde prompt(), kullanıcı hareketi içinden çağrılarak gösterilir.
VEYA
Kullanıcı Chrome 68 ve sonraki sürümlerde mini bilgi çubuğuna dokunduğunda gösterilir.
VEYA
Tüm Chrome sürümlerinde, kullanıcı Chrome menüsünden "Ana ekrana ekle"yi tıkladıktan sonra gösterilir.
Mini bilgi çubuğu
Mini bilgi çubuğu bir Chrome kullanıcı arayüzü bileşenidir ve site tarafından kontrol edilemez ancak kullanıcı tarafından kolayca kapatılabilir. Kullanıcı tarafından kapatıldıktan sonra yeterli süre geçene kadar (şu anda 3 ay) tekrar gösterilmez. Site, ana ekrana ekleme ölçütlerini karşıladığında, beforeinstallprompt etkinliğinde preventDefault() yapıp yapmadığınıza bakılmaksızın mini bilgi çubuğu gösterilir.
Sayfa yüklenirken kullanıcıya istem göstermek yerine (izin istekleri için bir anti-pattern) uygulamanızın bazı kullanıcı arayüzleriyle yüklenebileceğini belirtebilirsiniz. Bu durumda, modal yükleme istemi gösterilir. Örneğin, bu masaüstü PWA, kullanıcının profil adının hemen üstüne bir "Uygulamayı yükle" düğmesi ekler.
Kullanıcı hareketine göre uygulamanızı yüklemeyi istemek, kullanıcıya daha az spam gibi gelir ve "İptal" yerine "Ekle"yi tıklama olasılığını artırır. Uygulamanıza bir yükleme düğmesi eklediğinizde, kullanıcı uygulamanızı bugün yüklememeyi seçse bile düğme yarın veya yüklemeye hazır olduğunda orada kalır.
beforeinstallprompt etkinliği dinleniyor
Siteniz ana ekrana ekleme ölçütlerini karşılıyorsa Chrome, beforeinstallprompt etkinliğini tetikler, etkinliğe bir referans kaydeder ve kullanıcı arayüzünüzü güncelleyerek kullanıcının uygulamanızı ana ekranına ekleyebileceğini belirtir.
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;
});
Uygulama zaten yüklüyse beforeinstallprompt etkinliği tetiklenmez (ana ekrana ekleme ölçütleri bölümüne bakın).
Ancak kullanıcı daha sonra uygulamayı kaldırırsa beforeinstallprompt etkinliği her sayfa gezinmesinde tekrar tetiklenir.
prompt() ile iletişim kutusunu gösterme
Ana ekrana ekle iletişim kutusunu göstermek için kullanıcı hareketi içinde kaydedilen etkinlikte prompt() işlevini çağırın. Chrome, kullanıcının uygulamanızı ana ekranına eklemesini isteyen bir modal iletişim kutusu gösterir. Ardından, beforeinstallprompt etkinliğinin userChoice özelliği tarafından döndürülen sözü dinleyin. Promise, istem gösterildikten ve kullanıcı buna yanıt verdikten sonra outcome özelliği olan bir nesne döndürür.
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;
});
});
Kullanıcı iletişim kutusunda iptal'i tıklarsa ertelenen etkinlikte prompt() işlevini yalnızca bir kez çağırabilirsiniz. Bu durumda, beforeinstallprompt etkinliği bir sonraki sayfa gezinmesinde tetiklenene kadar beklemeniz gerekir. Geleneksel izin isteklerinin aksine, iptal düğmesini tıklamak gelecekteki prompt() çağrılarını engellemez. Çünkü bu çağrının bir kullanıcı hareketi içinde yapılması gerekir.
Ek Kaynaklar
Aşağıdakiler de dahil olmak üzere daha fazla bilgi için Uygulama Yükleme Banner'ları başlıklı makaleyi inceleyin:
beforeinstallpromptetkinliğiyle ilgili ayrıntılar- Kullanıcının ana ekrana ekleme istemine verdiği yanıtı izleme
- Uygulamanın yüklenip yüklenmediğini izleme
- Uygulamanızın yüklü bir uygulama olarak çalışıp çalışmadığını belirleme