Yüklenebilir hale getirin

Pete LePage

Bu hata, bir web uygulamasını yüklenebilir hale getirmek için gereken alanları içeren web manifestini içerir.

Ayrıca, varsayılan olarak gizli olan bir yükle düğmesi de vardır.

beforeinstallprompt etkinliğini dinle

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

Etkinliği yakalamak, geliştiricilerin yüklemeyi özelleştirmesine ve en uygun zamanı düşündükleri anda kullanıcıdan yükleme yapmasını istemelerine olanak tanır.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  2. window nesnesine bir beforeinstallprompt etkinlik işleyicisi ekleyin.
  3. event değerini genel değişken olarak kaydedin. İstem göstermek için daha sonra bu değere ihtiyacımız olacak.
  4. Yükle düğmesini gösterme.

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üğmesinin tıklanmasını işleme

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

  1. Yükle düğmesi için bir tıklama etkinlik işleyicisi ekleyin.
  2. Kayıtlı beforeinstallprompt etkinliğinde prompt() numaralı telefonu arayın.
  3. İstemin sonuçlarını günlüğe kaydedin.
  4. Kayıtlı beforeinstallprompt etkinliğini null olarak ayarlayın.
  5. Yükle 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

Web uygulamalarını yükleme düğmesi aracılığıyla yüklemek, kullanıcıların bu uygulamaları yüklemesinin tek yolu değildir. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğundaki simgeyi kullanabilirler. appinstalled etkinliğini dinleyerek bu kurulum yöntemlerinin tümünü izleyebilirsiniz.

  1. window nesnesine bir 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: