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 ne zaman doğru 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 kutusu iyileştiriliyor

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

Microsoft Edge yükleme istemi.

description, categories ve screenshots gibi bazı tarayıcılar, manifest dosyasındaki promosyon alanlarını kullanarak yükleme istemi deneyimini iyileştirir. Örneğin, PWA'nız description ve screenshots alanları için değer sağlıyorsa Android'deki Chrome'da yükleme iletişim kutusu deneyimi, küçük bir Ana ekrana ekle bilgi çubuğundan daha büyük ve daha ayrıntılı bir iletişim kutusuna dönüşür. Bu iletişim, uygulama mağazasındaki yükleme istemlerine benzer.

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 uygulamak için uygulamanızın yine de 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ı 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 olacak).
  3. Özelliği kullanıcı arayüzünden tetikleyin.
ziyaret edin.

beforeinstallprompt etkinliği için bir etkinlik işleyici örneği, bunun yakalanması 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 kaydedilmiş olan deferredPrompt'ı kullanın ve prompt() yöntemini çağırın. Çünkü kullanıcının uygulamanızı yüklemek için hâlâ tarayıcının sürecini tamamlaması gerekecektir. Bu aşamada, kullanıcıyı PWA'yı yüklemeye teşvik edecek doğru bağlamı sunana kadar etkinliği ertelemiştiniz.

Etkinliği kaydederek kullanıcılarınızın uygulamanızı yüklemeleri için ipuçları ve teşvikler ekleyebilir, kullanıcıların daha fazla etkileşimde bulunduğunu bildiğinizde yükleme isteminde bulunmayı seçebilirsiniz.

Etkinlik şu durumlarda tetiklenmez:

  • Kullanıcı geçerli 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 nedenlerden dolayı (örneğin, kiosk modundaki veya izni olmayan bir cihaz) mevcut cihaza yüklenemez.
ziyaret edin.

İstenebilecek en iyi yer

İsteneceği yer, uygulamanıza ve kullanıcılarınızın içerik ve hizmetlerinizle en çok ne zaman etkileşimde bulunduğuna bağlıdır. beforeinstallprompt fotoğrafını çektiğinizde, kullanıcılara uygulamanızı kullanmaya devam etmek için nedenleri ve yüklemenin sağlayacağı avantajlar konusunda rehberlik edebilirsiniz. Yükleme ipuçlarını uygulamanızın herhangi bir yerinde görüntülemeyi seçebilirsiniz. Sık karşılaşılan bazı durumlar şunlardır: yan menüde, sipariş tamamlama gibi kritik bir kullanıcı yolculuğundan sonra veya kayıt sayfasından sonra. PWA yüklemesini tanıtmaya yönelik kalıplar bölümünden bu konuda daha fazla bilgi edinebilirsiniz.

Analizler toplanıyor

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 taahhüttü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');
  }
});

İşleyiş şeklini görün

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

Yedek

Tarayıcı beforeinstallprompt özelliğini desteklemiyorsa veya etkinlik etkinleşmezse tarayıcının yükleme istemini tetiklemenin başka bir yolu yoktur. Ancak kullanıcının PWA'ları manuel olarak yüklemesine olanak tanıyan platformlarda (ör. iOS) bu talimatları kullanıcıya gösterebilirsiniz.

Bu talimatları yalnızca tarayıcı modunda görüntülemelisiniz; 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