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 dinleme

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ıyı yüklemeye teşvik etmelerine 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örünür hale getirin.

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() işlevini çağırın. prompt(), kullanıcı hareketinden çağrılması gerektiğinden yükleme düğmesi tıklama işleyicisinde çağrılır.prompt()

  1. Yükleme düğmesi için bir tıklama etkinliği işleyici ekleyin.
  2. Kayıtlı beforeinstallprompt etkinliğinde prompt()'ü 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 uygulama 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 de 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 Analytics'e 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: