Ana ekrana ekleme banner'ını ilk kullanıma sunduğumuzdan bu yana 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 platformlardaki çok amaçlı adres çubuğuna bir yükleme düğmesi eklemektir. Chrome 68'de bu amaç doğrultusunda değişiklikler yapıyoruz.
Neler değişiyor?
Android'deki Chrome 68 sürümünden (Temmuz 2018 itibarıyla kararlı olacaktır) Chrome, ana ekrana ekle banner'ını artık göstermeyecektir. Site, ana ekrana ekle ölçütlerini karşılıyorsa Chrome mini bilgi çubuğunu gösterir. Ardından, kullanıcı mini bilgi çubuğunu tıklarsa veya bir kullanıcı hareketinin içinden beforeinstallprompt etkinliğinde prompt() öğesini çağırırsanız Chrome, ana ekrana kalıcı ekle iletişim kutusu gösterir.
A2HS banner Chrome 67 ve öncesi
Site, ana ekrana ekle ölçütlerini karşıladığında ve site beforeinstallprompt etkinliğinde preventDefault() yöntemini çağırmadığında otomatik olarak gösterilir.
VEYA
beforeinstallprompt etkinliğinde prompt() çağrıldığında gösterilir.
Mini bilgi çubuğu Chrome 68 ve sonraki sürümler
Kullanıcı tarafından kapatılırsa yeterli bir süre (yaklaşık 3 ay) geçene kadar reklam gösterilmez.
preventDefault(), beforeinstallprompt etkinliğinde çağrılıp çağrılmadığından bağımsız olarak gösterilir.
Bu kullanıcı arayüzü özelliği, Chrome'un gelecekteki bir sürümünde çok amaçlı adres çubuğu yükleme düğmesi kullanıma sunulduğunda kaldırılacaktır.
A2HS İletişim Kutusu
Chrome 68 ve sonraki sürümlerde beforeinstallprompt etkinliğindeki bir kullanıcı hareketinden prompt() çağrılarak gösterilir.
VEYA
Chrome 68 ve sonraki sürümlerde kullanıcı mini bilgi çubuğuna dokunduğunda gösterilir.
VEYA
Tüm Chrome sürümlerinde 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 (şu anda 3 ay) geçene kadar bir daha gösterilmez. beforeinstallprompt etkinliğinde preventDefault() olup olmadığınızdan bağımsız olarak, site ana ekrana ekle ölçütlerini karşıladığında mini bilgi çubuğu görünür.
Sayfa yüklenirken kullanıcıya istem göndermek yerine (izin istekleri için anti kalıp) uygulamanızın bir kullanıcı arayüzüyle yüklenebileceğini belirtebilirsiniz. Bunu yaptığınızda kalıcı yükleme istemi görüntülenir. Örneğin bu masaüstü PWA, kullanıcının profil adının hemen üstüne "Uygulamayı Yükle" düğmesi ekliyor.
Kullanıcı hareketiyle uygulamanızı yükleme istemi, kullanıcıya daha az spam olduğunu hisseder ve kullanıcının "İptal" yerine "Ekle"yi tıklama olasılığını artırır. Uygulamanıza Yükle düğmesi eklemek, kullanıcının uygulamanızı bugün yüklememeyi seçse bile düğmenin yarın veya yüklemeye hazır olduğunda orada bulunacağı anlamına gelir.
beforeinstallprompt etkinliği dinleniyor
Siteniz ana ekrana ekleme ölçütlerini karşılıyorsa Chrome bir beforeinstallprompt etkinliği tetikler, etkinliğe 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çütlerine bakın).
Ancak kullanıcı daha sonra uygulamayı kaldırırsa beforeinstallprompt etkinliği sayfada gezinirken tekrar tetiklenir.
prompt() ile iletişim gösteriliyor
Ana ekrana ekle iletişim kutusunu göstermek için bir kullanıcı hareketinin içinden kaydedilen etkinlikte prompt() öğesini çağırın. Chrome, kullanıcıdan uygulamanızı ana ekranına
eklemesini isteyen kalıcı iletişim kutusunu gösterir. Ardından, beforeinstallprompt etkinliğinin userChoice özelliği tarafından verilen sözü dinleyin. Vade, istem gösterildikten ve kullanıcı yanıt verdikten sonra outcome özelliğine sahip 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;
});
});
Ertelenen etkinlikte prompt() öğesini yalnızca bir kez çağırabilirsiniz. Kullanıcı iletişim kutusunda İptal düğmesini tıklarsa sonraki sayfada gezinme sırasında beforeinstallprompt etkinliğinin tetiklenmesini beklemeniz gerekir. Geleneksel izin isteklerinin aksine iptal seçeneği tıklandığında, çağrının kullanıcı hareketiyle çağrılması gerektiğinden gelecekteki prompt() çağrıları engellenmez.
Ek Kaynaklar
Aşağıdakiler dahil olmak üzere daha fazla bilgi için Uygulama Yükleme Banner'ları bölümüne göz atın:
beforeinstallpromptetkinliğiyle ilgili ayrıntılar- Kullanıcının ana ekrana ekle 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