Yüklenebilir hale getirin

Pete LePage

beforeinstallprompt etkinliğini dinleyin

Tarayıcı beforeinstallprompt etkinliğini tetiklediğinde, web uygulamasının yüklenebileceği ve kullanıcıya bir yükleme düğmesi gösterilebileceği anlaşılır. Uygulama, yüklenebilirlik ölçütlerini karşıladığında beforeinstallprompt etkinliği tetiklenir.

Etkinliğin yakalanması, geliştiricilerin yüklemeyi özelleştirmesine ve kullanıcıya en uygun zaman olduğunu düşündüklerinde yükleme istemi göndermesine olanak tanır.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek İçin Remix'i tıklayın.
  2. beforeinstallprompt etkinlik işleyicisini window nesnesine ekleyin.
  3. event değerini genel değişken olarak kaydedin. Bu değeri daha sonra istemi göstermek için kullanacağız.
  4. Yükle düğmesini yeniden gösterin.

Kod:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

Yükle düğmesi tıklamasını işleme

Yükleme istemini göstermek için kaydedilen beforeinstallprompt etkinliğinde prompt() işlevini çağırın. prompt(), kullanıcı hareketiyle çağrılması gerektiğinden prompt() çağrısı yükleme düğmesi tıklama işleyicisinde yapılır.

  1. Yükleme düğmesi için bir tıklama etkinliği işleyicisi ekleyin.
  2. Kaydedilen beforeinstallprompt etkinliğinde prompt() simgesine dokunun.
  3. İstem sonuçlarını kaydedin.
  4. Kaydedilen beforeinstallprompt etkinliğini null olarak ayarlayın.
  5. Yükleme düğmesini gizleyin.

Kod:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

Yükleme etkinliğini izleme

Kullanıcılar, yükleme düğmesi aracılığıyla web uygulaması yüklemenin yanı sıra başka yöntemlerle de yükleme yapabilir. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğundaki bir simgeyi de kullanabilirler. appinstalled etkinliğini dinleyerek bu yükleme yöntemlerinin tümünü izleyebilirsiniz.

  1. window nesnesine appinstalled etkinlik işleyicisi ekleyin.
  2. Yükleme etkinliğini analizlere veya başka bir mekanizmaya kaydedin.

Kod:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Daha fazla bilgi

Tebrikler, uygulamanız artık yüklenebilir!

Yapabileceğiniz diğer işlemler: