Kendi uygulama içi yükleme deneyiminizi sunma

Pete LePage

Birçok tarayıcı, progresif web uygulamanızın (PWA) yüklemesini doğrudan kullanıcı arayüzünde etkinleştirmenize ve tanıtmanıza olanak tanır. Yükleme (eski adıyla Ana Ekrana Ekle), kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemelerine olanak tanır. PWA yüklendiğinde kullanıcının başlatıcısına eklenir ve böylece diğer yüklü uygulamalar gibi çalışabilir.

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

Yükleme tanıtımı yapıp yapmayacağınıza karar verirken kullanıcıların PWA'nızı genellikle nasıl kullandığını düşünün. Örneğin, PWA'nızı haftada birden fazla kez kullanan bir kullanıcı grubu varsa bu kullanıcılar, uygulamanızı bir telefon ana ekranından veya masaüstü işletim sistemindeki Başlat menüsünden başlatmanın sunduğu ek kolaylıktan yararlanabilir. Bazı üretkenlik ve eğlence uygulamaları da yüklü standalone, minimal-ui veya window-control-overlay modlarında tarayıcı araç çubuklarının pencereden kaldırılmasıyla oluşturulan ekstra ekran alanından yararlanır.

Ön koşullar

Başlamadan önce, PWA'nızın yüklenebilir olma şartlarını karşıladığından emin olun. Bu şartlar genellikle web uygulaması manifest dosyasına sahip olmayı içerir.

Yüklemeyi teşvik etme

Progresif web uygulamanızın yüklenebilir olduğunu göstermek ve özel bir uygulama içi yükleme akışı sağlamak için:

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

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 kaydedin 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 kullanıcının uygulamanızı yüklemek için tıklayabileceği veya dokunabileceği bir düğme ya da başka bir arayüz öğesi sağlayın. Öğe tıklandığında veya dokunulduğunda, kayıtlı beforeinstallprompt etkinliğinde (deferredPrompt değişkeninde depolanır) prompt() yöntemini çağırın. Kullanıcıya, PWA'nızı yüklemek istediğini onaylamasını isteyen bir kalıcı yükleme iletişim kutusu gösterilir.

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 mülkü, kullanıcının seçimiyle çözülen bir sözdür. Ertelenen etkinlikte prompt() işlevini yalnızca bir kez çağırabilirsiniz. Kullanıcı bunu kapatırsa beforeinstallprompt etkinliğinin tekrar tetiklenmesini (genellikle userChoice mülkü çözüldükten hemen sonra) beklemeniz gerekir.

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

Kullanıcının uygulamanızı kullanıcı arayüzünden yükleyip yüklemediğini belirlemek için userChoice özelliğini kullanabilirsiniz. Ancak kullanıcı PWA'nızı adres çubuğundan veya başka bir tarayıcı bileşeninden yüklerse userChoice yardımcı olmaz. Bunun yerine, yüklemek için hangi mekanizma kullanılırsa kullanılsın, PWA'nız her yüklendiğinde tetiklenen appinstalled etkinliğini dinlemeniz 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 başlatıldığını algılama

CSS display-mode medya sorgusu, PWA'nın tarayıcı sekmesinde veya yüklü bir PWA olarak nasıl başlatıldığını gösterir. Bu, uygulamanın nasıl kullanıma sunulduğuna bağlı olarak farklı stiller uygulamayı mümkün kılar. Örneğin, yükle düğmesini her zaman gizleyecek ve yüklü bir PWA olarak başlatıldığında geri düğmesi sağlayacak şekilde yapılandırabilirsiniz.

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() medya sorgusunu test etmek üzere display-mode kullanın.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

Görüntü modunun ne zaman değiştiğini izleme

Kullanıcının browser ve diğer görüntüleme modları arasında değişiklik yapıp yapmadığını izlemek için display-mode medya sorgusunda yapılan değişiklikleri dinleyin.

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

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

Yüklü bir PWA olarak başlatıldığında PWA'ya farklı bir arka plan rengi uygulamak için koşullu CSS'yi kullanın:

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

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

Uygulama adınızı güncellemeniz veya yeni simgeler sağlamanız gerekirse ne olur? Bu değişikliklerin Chrome'a ne zaman ve nasıl yansıtıldığını görmek için Chrome'un web uygulaması manifest'indeki güncellemeleri nasıl işlediğini inceleyin.