Yüklenebilir hale getirin

Pete LePage

Bu hata, web uygulamasını yüklenebilir hale getirmek için gereken alanlarla birlikte web manifestini içeriyor.

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 bu gösterge web uygulamasının yüklenebileceğini ve bir yükle düğmesi gösterilebilir. kullanıcıya gösterir. beforeinstallprompt etkinliği, uygulama yüklenebilirlik ölçütlerini inceleyin.

Etkinliğin yakalanması, geliştiricilerin yüklemeyi özelleştirmesine ve kullanıcıdan kullanıcıya istem göstermesine olanak tanır. uygulamayı yükleyebilir.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  2. window nesnesine bir beforeinstallprompt etkinlik işleyicisi ekleyin.
  3. event değerini genel değişken olarak kaydedin, daha sonra gerektiğinde tıklayın.
  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ükleme düğmesi tıklamasını işleme

Yükleme istemini göstermek için kayıtlı beforeinstallprompt cihazında prompt() öğesini arayın unutmayın. prompt() çağrısı, yükleme düğmesi tıklama işleyicisinde yapıldığı için: prompt(), kullanıcı hareketiyle çağrılmalıdı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. Kaydedilen 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 Uygulaması yükleme düğmesiyle yükleme, kullanıcıların yükleyebilir. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğunda bir simge ile yazın. Şunları yapabilirsiniz: appinstalled dinleyerek tüm bu yükleme yöntemlerini izleyin unutmayın.

  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 ek işlemlerden bazıları şunlardır: