Ana ekrana ekleme davranışında yapılan değişiklikler

Ana ekrana ekle banner'ını ilk kez kullanıma sunduğumuzdan bu yana Progresif Web Uygulamalarını daha anlaşılır şekilde etiketlemek ve kullanıcıların bu uygulamaları yükleme şeklini basitleştirmek için çalışıyoruz. Nihai hedefimiz, tüm platformlarda çok amaçlı adres çubuğuna bir yükleme düğmesi eklemek. Chrome 68'de bu hedef doğrultusunda değişiklikler yapıyoruz.

Neler değişiyor?

Android'deki Chrome 68 sürümünden itibaren (Temmuz 2018'de kararlı), Chrome artık ana ekrana ekle banner'ını göstermeyecek. Site ana ekrana ekle kriterlerini karşılıyorsa Chrome mini bilgi çubuğunu gösterir. Ardından, kullanıcı mini bilgi çubuğunu tıklarsa veya kullanıcı hareketiyle beforeinstallprompt etkinliğinde prompt() çağırırsanız Chrome, kalıcı bir ana ekrana ekle iletişim kutusu gösterir.

A2HS banner Chrome 67 ve öncesi

A2HS banner ekran görüntüsü

Site ana ekrana ekle kriterlerini karşıladığında ve site beforeinstallprompt etkinliğinde preventDefault() çağrısı yapmadığında otomatik olarak gösterilir

VEYA

beforeinstallprompt etkinliğinde prompt() çağrıldığında gösterilir.

Mini-infobar Chrome 68 ve sonraki sürümler

A2HS bilgi çubuğu ekran görüntüsü
Site, ana ekrana ekle ölçütlerini karşıladığında gösterilir

Kullanıcı tarafından reddedilirse yeterli bir süre (yaklaşık 3 ay) geçene kadar reklam gösterilmez.

preventDefault() öğesinin beforeinstallprompt etkinliğinde çağrılıp çağrılmadığına bakılmaksızın gösterilir.

Bu kullanıcı arayüzü işlemi, ç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 İletişim Kutusu

A2HS iletişim kutusu ekran görüntüsü

Chrome 68 ve sonraki sürümlerde beforeinstallprompt etkinliğindeki bir kullanıcı hareketinin içinden prompt() çağrısı yapılarak gösterilir.

VEYA

Kullanıcı, Chrome 68 ve sonraki sürümlerde mini bilgi çubuğuna dokunduğunda gösterilir.

VEYA

Kullanıcı, 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 ekran görüntüsü.
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 reddedildikten sonra, yeterli süre (şu anda 3 ay) geçene kadar tekrar görünmez. beforeinstallprompt etkinliğinde preventDefault() yapıp yapmadığınıza bakılmaksızın, site ana ekrana ekle kriterlerini karşıladığında mini bilgi çubuğu görünür.

Çok amaçlı adres çubuğundaki yükle düğmesinin ilk kavramı.
Çok amaçlı adres çubuğunda yükle düğmesinin ilk konsepti
Çok amaçlı adres çubuğuna bir yükle düğmesi içeren tüm platformlarda tutarlı bir deneyim oluşturmak için çalışmalarımız devam ederken mini bilgi çubuğu, Android'de Chrome için geçici bir deneyimdir. ## Ana ekrana ekleme iletişim kutusunu tetikleme
Masaüstü progresif web uygulamasında yükle düğmesi.
Masaüstü progresif web uygulamasında yükle düğmesi

Sayfa yüklenirken kullanıcıya soru sormak yerine (izin istekleri için bir karşıt kalıbı) uygulamanızın bazı kullanıcı arayüzleriyle yüklenebileceğini belirtebilirsiniz. Bu durumda, kalıcı yükleme istemi gösterilir. Örneğin, bu masaüstü PWA'da kullanıcının profil adının hemen üst kısmına bir "Uygulamayı Yükle" düğmesi eklenir.

Uygulamanızı bir kullanıcı hareketine yüklemek, kullanıcı açısından daha az spam hissi uyandırır ve "İptal" yerine "Ekle"yi tıklama olasılığını artırır. Uygulamanıza bir Yükle düğmesi dahil etmek, kullanıcı uygulamanızı bugün yüklememeyi seçse bile bu düğmenin yarın veya yüklemeye hazır olduklarında görünmeye devam edeceği anlamına gelir.

beforeinstallprompt etkinliği dinleniyor

Siteniz ana ekrana ekleme ölçütlerini karşılıyorsa Chrome bir beforeinstallprompt etkinliği tetikler, etkinliğe ilişkin bir referans kaydeder ve kullanıcı arayüzünüzü, kullanıcının uygulamanızı ana ekranına ekleyebileceğini belirtecek şekilde günceller.

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üklenmişse beforeinstallprompt etkinliği tetiklenmez (ana ekrana ekleme ölçütlerine bakın). Ancak kullanıcı daha sonra uygulamayı kaldırırsa her sayfada gezinmede beforeinstallprompt etkinliği tekrar tetiklenir.

prompt() adlı katılımcının yer aldığı iletişim kutusu gösteriliyor

Ana ekrana ekle iletişim kutusu.
Ana ekrana ekle iletişim kutusu

Ana ekrana ekle iletişim kutusunu göstermek için kullanıcı hareketinin içinden kayıtlı etkinlikte prompt() çağrısı yapın. Chrome, kalıcı iletişim kutusunu göstererek kullanıcıdan uygulamanızı ana ekranına eklemesini ister. Ardından, beforeinstallprompt etkinliğinin userChoice özelliğinin döndürdüğü sözü dinleyin. Vaat, 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 iptal et seçeneğini tıklarsa bir sonraki sayfada gezinmede beforeinstallprompt etkinliğinin tetiklenmesini beklemeniz gerekir. Geleneksel izin isteklerinden farklı olarak iptal seçeneği tıklandığında, ileride prompt() çağrıları, çağrının kullanıcı hareketi içinde çağrılmaması nedeniyle 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:

  • beforeinstallprompt etkinliğiyle ilgili ayrıntılar
  • Kullanıcının ana ekran 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