Yüklenebilir hale getirin

daha fazla içerik

Bu hata, bir Web Uygulamasını yüklenebilir hale getirmek için gerekli alanların bulunduğu web manifestini içeriyor.

Ayrıca, varsayılan olarak gizlenmiş bir yükleme düğmesi de vardır.

beforeinstallprompt etkinliğini dinleyin

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

Etkinliğin kaydedilmesi, geliştiricilerin yüklemeyi özelleştirmesini ve en uygun zaman olduğunu düşündüğünde kullanıcıdan yükleme yapmasını istemelerini sağlar.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
  2. window nesnesine bir beforeinstallprompt etkinlik işleyicisi ekleyin.
  3. event öğesini genel değişken olarak kaydedin. İstemi göstermek için daha sonra buna ihtiyacımız olacaktır.
  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üğmesi tıklamasını işleme

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

  1. Yükle düğmesi için bir tıklama etkinlik işleyicisi ekleyin.
  2. Kaydedilen beforeinstallprompt etkinliğinde prompt() adlı kişiyi arayın.
  3. İstemin sonuçlarını günlüğe kaydedin.
  4. Kaydedilen beforeinstallprompt etkinliğini boş 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

Bir Web Uygulaması'nı yükleme düğmesiyle yüklemek, kullanıcıların söz konusu uygulamayı yükleyebilmesinin tek yoludur. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğundaki bir simge üzerinden de kullanabilirler. Bu yükleme yöntemlerinin tümünü appinstalled etkinliğini dinleyerek izleyebilirsiniz.

  1. window nesnesine bir appinstalled etkinlik işleyicisi ekleyin.
  2. Yükleme etkinliğini analize veya başka bir sisteme 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: