Kendi uygulama içi yükleme deneyiminizi sunma

Birçok tarayıcı, Progresif Web Uygulamanızın (PWA) yüklenmesini doğrudan PWA'nızın kullanıcı arayüzünden etkinleştirmenizi ve tanıtmanızı sağlar. Yükleme (eski adıyla Ana Ekrana Ekle) kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemesini kolaylaştırır. PWA yüklendiğinde kullanıcının başlatıcısına eklenir ve diğer yüklü uygulamalar gibi çalıştırılması sağlanır.

Tarayıcının sağladığı yükleme deneyiminin yanı sıra, doğrudan uygulamanızın içinden kendi özel yükleme akışınızı sağlamak da mümkündür.

Spotify PWA'da sunulan Uygulamayı Yükle düğmesi
Spotify PWA'da sunulan "Uygulamayı Yükle" düğmesi

Yüklemeleri teşvik edip etmemeyi düşünürken kullanıcıların PWA'nızı genellikle nasıl kullandıklarını düşünmeniz en iyisidir. Örneğin, PWA'nızı haftada birden çok kez kullanan bir kullanıcı grubu varsa bu kullanıcılar, uygulamanızı bir telefon ana ekranından veya bir masaüstü işletim sistemindeki Başlat menüsünden başlatma kolaylığından yararlanabilir. Bazı verimlilik ve eğlence uygulamaları, yüklü standalone veya minimal-ui modlarında tarayıcı araç çubuklarının pencereden kaldırılmasıyla oluşturulan ekstra ekran alanından da yararlanır.

Ön koşullar

Başlamadan önce, PWA'nızın genellikle bir web uygulaması manifestine sahip olmayı da içeren yüklenebilirlik gereksinimlerini karşıladığından emin olun.

Yüklemeyi teşvik et

Progresif Web Uygulamanızın yüklenebilir olduğunu belirtmek 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 tetiklemek üzere kullanılabilmesi 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 dinle

Progresif Web Uygulamanız gerekli yükleme ölçütlerini karşılıyorsa, tarayıcı bir beforeinstallprompt etkinliği tetikler. Etkinliğe bir 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ıların uygulamanızı yüklemek üzere tıklayabileceği bir düğme veya başka bir arayüz öğesi sağlayın. Öğe tıklandığında, kayıtlı beforeinstallprompt etkinliğinde (deferredPrompt değişkeninde saklanır) prompt() çağrısı yapın. Kullanıcıya, PWA'nızı yüklemek istediğini belirten kalıcı bir 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 özelliği, kullanıcının seçimiyle çözümlenen bir vaattir. Ertelenen etkinlikte yalnızca bir kez prompt() çağırabilirsiniz. Kullanıcı bunu kapatırsa beforeinstallprompt etkinliği tekrar tetiklenene kadar (genellikle userChoice özelliği çözümlendikten hemen sonra) beklemeniz gerekir.

PWA'nın başarıyla yüklendiğini algıla

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 işe yaramaz. Bunun yerine, appinstalled etkinliğini dinlemeniz gerekir. PWA'nızı yüklemek için hangi mekanizma kullanılırsa kullanılsın, PWA'nız her yüklendiğinde tetiklenir.

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 kullanıma sunulma şeklini tespit etme

CSS display-mode medya sorgusu, PWA'nın nasıl başlatıldığını (tarayıcı sekmesinde veya yüklü PWA olarak) belirtir. Bu, uygulamanın lansman şekline bağlı olarak farklı stiller uygulanmasını mümkün kılar. Örneğin, yüklü bir PWA olarak başlatıldığında, yükle düğmesini her zaman gizleyin ve bir geri düğmesi ekleyin.

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() kullanarak display-mode medya sorgusunu test edin. iOS'te Safari henüz bunu desteklememektedir. Bu nedenle, navigator.standalone işaretini işaretlemeniz gerekir. Bu değer, tarayıcının bağımsız modda çalışıp çalışmadığını belirten bir boole değeri döndürür.

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 izleme

Kullanıcının standalone ve browser tab arasında değişiklik yapıp yapmadığını izlemek için display-mode medya sorgusunda yapılan değişiklikleri dinleyin.

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);
});

Mevcut görüntü moduna göre kullanıcı arayüzünü güncelle

Yüklü PWA olarak başlatıldığında PWA'ya farklı bir arka plan rengi uygulamak 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? Bu değişikliklerin Chrome'a ne zaman ve nasıl yansıtıldığını görmek için Chrome'un web uygulaması manifest dosyasındaki güncellemeleri işleme şekli başlıklı makaleye göz atın.