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

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

A2HS banner ekran görüntüsü

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

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

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

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

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 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 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.

Çok amaçlı adres çubuğunda yükleme düğmesi ilk olarak verilen kavram.
Çok amaçlı adres çubuğunda yükleme düğmesi ilk başta kullanıma sunuldu
Mini bilgi çubuğu, Android'de Chrome için geçici bir deneyim olarak sunuluyor. Bu deneyim kapsamında, tüm platformlarda çok amaçlı adres çubuğuna yükle düğmesi içeren tutarlı bir deneyim oluşturmak için çalışıyoruz. ## Ana ekrana ekle 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 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 kutusu.
Ana ekrana ekle iletişim kutusuna ekle

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:

  • beforeinstallprompt etkinliğ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