Yükleme istemi

Kullanıcılar, PWA yükleme sürecine aşina olmayabilir. Geliştirici olarak, kullanıcıyı uygulamayı yüklemeye davet etmenin doğru zamanının ne zaman olduğunu anlarsınız. Varsayılan tarayıcı yükleme istemleri de geliştirilebilir. Kullanabileceğiniz araçlara göz atalım.

Yükleme iletişim kutusunu geliştirme

PWA'lar yükleme ölçütlerini karşıladığında tarayıcılar varsayılan yükleme istemleri sağlar. Tarayıcı, istemi oluşturmak için Web Uygulaması Manifestinizdeki name ve icons özelliklerini kullanır.

Microsoft Edge yükleme istemi.

Bazı tarayıcılar, description, categories ve screenshots dahil olmak üzere manifestteki tanıtım alanlarını kullanarak yükleme istemi deneyimini iyileştirir. Örneğin, Android'de Chrome'u kullanırken PWA'nız description ve screenshots alanları için değerler sağlıyorsa yükleme iletişim kutusu deneyimi, küçük bir Ana ekrana ekle bilgi çubuğundan uygulama mağazasındaki yükleme istemlerine benzer şekilde daha büyük ve ayrıntılı bir iletişim kutusuna dönüşür.

beforeinstallprompt etkinliği

Tarayıcının yükleme istemleri, kullanıcıların PWA'nızı yüklemesini sağlamanın ilk adımıdır. Kendi yükleme deneyiminizi uygulamak için uygulamanızın yükleme ölçütlerini karşılaması gerekir: Tarayıcı, uygulamanızın yüklenebilir olduğunu algıladığında beforeinstallprompt etkinliğini tetikler. Kullanıcının deneyimini özelleştirmek için bu etkinlik işleyiciyi uygulamanız gerekir. Bunun için uygulamanız gereken adımlar:

  1. beforeinstallprompt etkinliğini dinleyin.
  2. Kaydedin (daha sonra ihtiyacınız olacaktır).
  3. Kullanıcı arayüzünüzden tetikleyin.

beforeinstallprompt etkinliği için etkinlik işleyicinin, yakalamanın ve daha sonra özel kullanımın bir örneği için aşağıdaki kodu inceleyin.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Ardından, kullanıcı özelleştirilmiş yükleme düğmenizi tıkladığında, daha önce kaydedilmiş olan deferredPrompt öğesini kullanın ve prompt() yöntemini çağırın. Çünkü kullanıcının uygulamanızı yüklemek için tarayıcının sürecinden geçmesi gerekir. Yaptığınız işlem, kullanıcıya PWA'yı yüklemeye teşvik edecek doğru bağlamı verene kadar etkinliği ertelemekti.

Etkinliği yakalamak, kullanıcılarınızın uygulamanızı yüklemesi için ipuçları ve teşvikler eklemenize ve kullanıcıların daha fazla etkileşimde bulunduğunu bildiğinizde yükleme istemi göstermeyi seçmenize olanak tanır.

Aşağıdaki durumlarda etkinlik tetiklenmez:

  • Kullanıcı, mevcut PWA'yı zaten yüklemiş (yalnızca masaüstü ve Android'de WebAPK için geçerlidir).
  • Uygulama, PWA yükleme ölçütlerini karşılamıyor.
  • PWA, başka nedenlerle (ör. kiosk modunda olan veya izinleri olmayan bir cihaz) mevcut cihaza yüklenemiyordur.

İstem yazmak için en iyi yer

İstemlerin nerede gösterileceği, uygulamanıza ve kullanıcılarınızın içeriğinizle ve hizmetlerinizle en çok etkileşimde bulunduğu zamana bağlıdır. beforeinstallprompt yakaladığınızda, kullanıcıları uygulamanızı kullanmaya devam etmelerinin nedenleri ve uygulamayı yükleyerek elde edecekleri avantajlar konusunda yönlendirebilirsiniz. Yükleme ipuçlarını uygulamanızın herhangi bir yerinde gösterebilirsiniz. En yaygın kalıplar arasında yan menüde, sipariş tamamlama gibi önemli bir kullanıcı yolculuğundan sonra veya kayıt sayfasından sonra yerleştirme bulunur. Bu konu hakkında daha fazla bilgiyi PWA yüklemesini teşvik etme kalıpları başlıklı makalede bulabilirsiniz.

Analiz toplama

Analizleri kullanmak, istemlerinizi nerede ve ne zaman sunacağınızı daha iyi anlamanıza yardımcı olur. beforeinstallprompt etkinliğindeki userChoice özelliğini kullanabilirsiniz. userChoice, kullanıcının gerçekleştirdiği işlemle çözümlenecek bir sözdür.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Yedek

Tarayıcı beforeinstallprompt öğesini desteklemiyorsa veya etkinlik tetiklenmiyorsa tarayıcının yükleme istemini tetiklemenin başka bir yolu yoktur. Ancak kullanıcının PWA'ları manuel olarak yüklemesine izin veren platformlarda (ör. iOS) bu talimatları kullanıcıya gösterebilirsiniz.

Bu talimatları yalnızca tarayıcı modunda oluşturmalısınız. standalone veya fullscreen gibi diğer görüntüleme seçenekleri, kullanıcının uygulamayı zaten yüklediği anlamına gelir.

Öğeyi yalnızca tarayıcı modunda oluşturmak için display-mode medya sorgusunu kullanın:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

Kütüphaneler

Özel yükleme istemi oluşturma konusunda yardım almak için aşağıdaki kitaplıklara göz atın:

Kaynaklar