Yerel Uygulama Yükleme İstemi

Yerel uygulama yükleme istemi, kullanıcıların tarayıcıdan ayrılmadan ve sinir bozucu bir geçiş reklamı göstermeden yerel uygulamanızı doğrudan uygulama mağazasından cihazlarına hızlı ve sorunsuz bir şekilde yüklemelerine olanak tanır.

Ölçütler nelerdir?

Kullanıcıya yerel uygulama yükleme istemini göstermek için sitenizin aşağıdaki ölçütleri karşılaması gerekir:

Bu ölçütleri karşıladığınızda bir beforeinstallprompt etkinliği tetiklenir. Kullanıcıdan yerel uygulamanızı yüklemesini istemek için bunu kullanabilirsiniz.

Gerekli manifest özellikleri

Kullanıcıdan yerel uygulamanızı yüklemesini istemek için web uygulaması manifest dosyanıza iki mülk eklemeniz gerekir: prefer_related_applications ve related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications özelliği, tarayıcıya web uygulaması yerine yerel uygulamanızı kullanarak istemde bulunmasını söyler. Bu değeri ayarlamadan veya false ile bırakırsanız tarayıcı, kullanıcıdan web uygulamasını yüklemesini ister.

related_applications, tarayıcıya tercih ettiğiniz yerel uygulama hakkında bilgi veren nesnelerin listesini içeren bir dizidir. Her nesne bir platform özelliği ve id özelliği içermelidir. Burada platform, play ve id ise Play Store uygulama kimliğinizdir.

Yükleme istemini göster

Yükleme iletişim kutusunu görüntülemek için şunları yapmanız gerekir:

  1. beforeinstallprompt etkinliğini dinleyin.
  2. Kullanıcı hareketi etkinliği oluşturacak bir düğme veya başka bir öğeyle yerel uygulamanızın yüklenebileceğini kullanıcıya bildirin.
  3. Kaydedilen beforeinstallprompt etkinliğinde prompt() yöntemini çağırarak istemi gösterin.

beforeinstallprompt için dinle

Ölçütler karşılanırsa Chrome bir beforeinstallprompt etkinliği tetikler. Uygulamanızın yüklenebileceğini belirtmek ve kullanıcıdan bu uygulamayı yüklemesini istemek için kullanabilirsiniz.

beforeinstallprompt etkinliği tetiklendiğinde, etkinliğe ilişkin bir referans kaydedin ve kullanıcı arayüzünüzü, kullanıcının uygulamanızı yükleyebileceğini belirtecek şekilde güncelleyin.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Kullanıcıya uygulamanızın yüklenebileceğini bildirme

Uygulamanızın yüklenebileceğini kullanıcıya bildirmenin en iyi yolu, kullanıcı arayüzünüze bir düğme veya başka bir öğe eklemektir. Tam sayfa geçiş reklamı veya rahatsız edici ya da dikkat dağıtıcı olabilecek diğer öğeleri göstermeyin.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

İstemi göster

Yükleme istemini göstermek için bir kullanıcı hareketinin içinden kayıtlı etkinlikte prompt() çağrısı yapın. Kullanıcıdan uygulamanızı ana ekranına eklemesini isteyen kalıcı bir iletişim kutusu gösterilir.

Ardından, userChoice mülkü tarafından döndürülen sözü dinleyin. Vaat, istem gösterildikten ve kullanıcı yanıt verdikten sonra outcome özelliğine sahip bir nesne döndürür.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Ertelenen etkinlikte prompt() adlı kişiyi yalnızca bir kez çağırabilirsiniz. Kullanıcı bunu kapatırsa bir sonraki sayfada gezinmede beforeinstallprompt etkinliğinin tetiklenmesini beklemeniz gerekir.

İçerik güvenliği politikasını kullanırken dikkat edilmesi gereken özel noktalar

Sitenizde kısıtlayıcı bir İçerik Güvenliği Politikası varsa Chrome'un uygulamanızla ilişkili simgeyi Play Store'dan indirebilmesi için img-src yönergesine *.googleusercontent.com eklediğinizden emin olun.

Bazı durumlarda *.googleusercontent.com istenenden daha ayrıntılı olabilir. Uygulama simgesinin URL'sini belirlemek için bir Android cihazda uzaktan hata ayıklama yaparak bunu daraltmak mümkündür.