Yükleme istemi

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

Yükleme iletişim kutusunu iyileştirme

PWA'lar yükleme ölçütlerini karşıladığında tarayıcılar, varsayılan yükleme istemlerini 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, manifest'teki tanıtım amaçlı alanları (description, categories ve screenshots dahil) kullanarak yükleme istemi deneyimini iyileştirir. Örneğin, Android'de Chrome kullandığınızda PWA'nız description ve screenshots alanları için değer 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 daha ayrıntılı bir iletişim kutusuna dönüşür.

Promosyon alanlarının nasıl çalıştığını görün:

beforeinstallprompt etkinliği

Kullanıcıların PWA'nızı yüklemesini sağlamanın ilk adımı tarayıcının yükleme istemleridir. Kendi yükleme deneyiminizi uygulayabilmeniz için uygulamanızın yine de yükleme ölçütlerini geçmesi gerekir: Tarayıcı, uygulamanızın yüklenebilir olduğunu algıladığında beforeinstallprompt etkinliğini tetikler. Kullanıcı 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. Değişiklikleri kaydedin (Daha sonra ihtiyacınız olacak).
  3. Kullanıcı arayüzünden tetikleyin.

beforeinstallprompt etkinliği için etkinlik işleyici örneği, yakalama ve daha sonra özel kullanım için aşağıdaki kodu kontrol edin.

// 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ıklarsa daha önce kaydedilen deferredPrompt öğesini kullanın ve bu uygulamanın prompt() yöntemini çağırın. Bunun nedeni, kullanıcının uygulamanızı yüklemek için yine de tarayıcı işlemini tamamlaması gerektiğidir. Yaptığınız işlem, kullanıcıya PWA'yı yüklemeye teşvik etmek için doğru bağlamı sağlayana kadar etkinliği ertelemekti.

Etkinliği kaydetmek, kullanıcılarınızın uygulamanızı yüklemeleri için ipuçları ve teşvikler ekleme ve kullanıcıların daha fazla etkileşimde bulunduğunu bildiğinizde yükleme istemini seçme fırsatı sunar.

Etkinlik aşağıdaki durumlarda tetiklenmez:

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

İstem için en iyi yer

İstemin nerede gösterileceği, uygulamanıza ve kullanıcılarınızın içeriğinizle ve hizmetlerinizle en çok ne zaman etkileşime geçtiğine bağlıdır. beforeinstallprompt yakaladığınızda kullanıcılara, uygulamanızı kullanmaya devam etmelerinin nedenleri ve yükleme yoluyla elde edecekleri avantajlar konusunda rehberlik edebilirsiniz. Uygulamanızın her yerinde yükleme ipuçları göstermeyi seçebilirsiniz. Bazı yaygın kalıplar şunlardır: yan menüde, sipariş tamamlama gibi kritik bir kullanıcı yolculuğundan sonra veya bir kayıt sayfasından sonra. PWA yüklemesini teşvik etme kalıpları bölümünden bu konuda daha fazla bilgi edinebilirsiniz.

Analiz toplama

Analizleri kullanmak, istemlerinizi nerede ve ne zaman sunmanız gerektiğini 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 sonuçlanacak bir vaattir.

// 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');
  }
});

İşleyiş şeklini görün

Aşağıdaki örneği Chromium tarayıcıda (masaüstü veya Android) kullanmayı deneyin.

Fallback

Tarayıcı beforeinstallprompt özelliğini desteklemiyorsa veya etkinlik tetiklenmezse 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şturmanız gerekir. 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 şu kitaplıklara göz atın:

Kaynaklar