Kendi uygulama içi yükleme deneyiminizi sunma

Pete LePage

Birçok tarayıcı, yükleme işlemini etkinleştirmenize ve tanıtmanıza progresif web uygulamanızın (PWA) doğrudan kullanıcı arayüzünden görüntülenebilir. Yükleme (eski adıyla Ana Ekrana Ekle) ise kullanıcıların mobil veya masaüstü cihazlarında kullanabilirsiniz. PWA yüklendiğinde, kullanıcının başlatıcıya sahip olmalıdır. Böylece yüklü diğer uygulamalar gibi çalışabilir.

Tarayıcı tarafından sağlanan yükleme deneyimine ek olarak, kendi özel yükleme akışınızı doğrudan uygulamanızın içinde sağlayabilirsiniz.

Kurulumu teşvik edip etmeyeceğinize karar verirken, kullanıcıların uygulamanızı genellikle nasıl PWA'nızı kullanın. Örneğin, PWA'nızı kullanan bir grup kullanıcı varsa bu kullanıcılar, web sitenizi ziyaret etmek için Uygulamanızı telefonun ana ekranından veya masaüstündeki Başlat menüsünden başlatmak işletim sistemi. Bazı verimlilik ve eğlence uygulamaları da kaldırılarak oluşturulan fazladan ekran alanından tarayıcı araç çubuklarının penceresi yüklü standalone veya minimal-ui modlarında.

Ön koşullar

Başlamadan önce PWA'nızın yüklenebilirlik gereksinimleri, web uygulaması manifest'i de dahildir.

Yükleme işlemini tanıtın

Progresif Web Uygulamanızın yüklenebilir olduğunu göstermek ve uygulamanızın Uygulama içi yükleme akışı:

1. beforeinstallprompt etkinliğini dinleyin.
2. Yükleme akışını tetikleyebilmesi için beforeinstallprompt etkinliğini kaydedin daha sonra.
3. Kullanıcıyı PWA'nızın yüklenebilir olduğu konusunda uyarın ve bir düğme ya da başka bir şey sağlayın öğesi kullanabilirsiniz.

beforeinstallprompt etkinliğini dinleyin

Progresif Web Uygulamanız gerekli yükleme ölçütlerini karşılıyorsa tarayıcı bir beforeinstallprompt etkinliği tetikler. Etkinliğe referans vermek ve kullanıcı arayüzünüzü, kullanıcının PWA'nızı yükleyebileceğini belirtecek şekilde güncelleyin.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

Uygulama içi yükleme akışı

Uygulama içi yükleme sağlamak için bir düğme veya başka bir arayüz öğesi sağlayın Kullanıcıların uygulamanızı yüklemek için tıklayabileceği veya dokunabileceği öğeler. Öğe tıklandığında veya dokunulduysa, kayıtlı beforeinstallprompt etkinliğindeki (prompt() deferredPrompt değişkeni). Kullanıcıya kalıcı yükleme iletişim kutusu gösterilir. PWA'nızı yüklemek istediklerini onaylamalarını isteyin.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice özelliği, kullanıcının seçimine bağlı olarak çözülür. prompt() numaralı telefonu, ertelenen etkinlikte yalnızca bir kez arayabilirsiniz. Kullanıcı bu etkinlik kapatılırsa beforeinstallprompt etkinliğine kadar beklemeniz gerekir genellikle userChoice özelliğinden hemen sonra tekrar etkinleşir çözmüştür.

PWA'nın başarıyla yüklendiği zamanı algılama

Kullanıcının uygulamanızı yükleyip yüklemediğini belirlemek için userChoice özelliğini kullanabilirsiniz. uygulamanıza kullanıcı arayüzünden erişebilirsiniz. Ancak kullanıcı PWA'nızı yüklerse userChoice yardımcı olmaz. Bunun yerine, her etkinleştiğinde tetiklenen appinstalled etkinliğini dinlemeniz gerekir yüklemek için kullanılan mekanizmadan bağımsız olarak PWA'nızın yüklü olması gerekir.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

PWA'nın nasıl kullanıma sunulduğunu tespit etme

CSS display-mode medya sorgusu, PWA'nın yüklü bir PWA olarak kullanabilirsiniz. Bu sayede, farklı süreçlerde stillerini uygulamaya geçirmenize yardımcı olur. Örneğin, Google Etiket Yöneticisi'ni kullanarak yükle düğmesini her zaman gizlemek ve PWA'yı yükleyebilirsiniz.

PWA'nın nasıl kullanıma sunulduğunu takip etme

Kullanıcıların PWA'nızı nasıl başlattığını izlemek için matchMedia() öğesini kullanarak display-mode medya sorgusu. iOS'te Safari henüz desteklemediğinden bunun yerine, kontrol edin: navigator.standalone; bu işlem, tarayıcı bağımsız modda çalışıyor.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

Görüntü modu değiştiğinde takip et

Kullanıcının standalone ile browser tab arasında değişip değişmediğini izlemek için şunları dinleyin: display-mode medya sorgusunda yapılan değişikliklerdir.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Kullanıcı arayüzünü mevcut görüntü moduna göre güncelleyin

Yüklü olarak başlatıldığında PWA için farklı bir arka plan rengi uygulamak PWA (progresif web uygulaması) için koşullu CSS kullanın:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Uygulamanızın simgesini ve adını güncelleme

Uygulamanızın adını güncellemeniz veya yeni simgeler sağlamanız gerekirse ne olur? Chrome'un, web uygulaması manifest dosyasındaki güncellemeleri nasıl ele aldığı başlıklı makaleyi inceleyin. görebilirsiniz.