Kendi uygulama içi yükleme deneyiminizi sunma

Pete LePage

Birçok tarayıcı, Progresif Web Uygulamanızın (PWA) yüklenmesini doğrudan kullanıcı arayüzünden 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üklemesine olanak tanır. PWA yüklendiğinde kullanıcının başlatıcısına eklenir ve diğer yüklü uygulamalar gibi çalışabilir.

Tarayıcı tarafından sağlanan yükleme deneyiminin yanı sıra, doğrudan uygulamanızdan kendi özel yükleme akışınızı da sağlayabilirsiniz.

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

Yüklemeyi teşvik edip etmemeyi düşünürken kullanıcıların PWA'nızı genellikle nasıl kullandığını göz önünde bulundurun. Ö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 rahatlığından yararlanabilir. Bazı üretkenlik 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 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.

Not: beforeinstallprompt etkinliği ve appinstalled etkinliği, web uygulaması manifest spesifikasyonundan kendi kuluçka makinesine taşındı. Chrome ekibi bunları desteklemeye devam etmektedir ve desteği kaldırmayı veya kullanımdan kaldırmayı planlamamaktadır. Google'ın Web DevRel ekibi, özelleştirilmiş bir yükleme deneyimi sağlamak için bunları kullanmanızı önermeye devam etmektedir.

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

Not: Kullanıcıyı uygulamanızın yüklenebileceğini bildirmek ve uygulama içi yükleme akışı sağlamak için kullanabileceğiniz birçok farklı kalıp vardır. Bunlar başlıktaki bir düğmeyi, gezinme menüsündeki bir öğeyi veya içerik feed'inizdeki bir öğeyi içerebilir.

Uygulama içi yükleme akışı

Uygulama içi yükleme sağlamak için kullanıcıları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 öğeye dokunulduğunda, kaydedilen 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 onaylamasını isteyen 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ı etkinliği kapatırsa beforeinstallprompt etkinliğinin tekrar etkinleşmesini beklemeniz gerekir (genellikle userChoice özelliği çözümlendikten hemen sonra).

Deneyin: beforeinstallprompt etkinliğini kullanarak bir siteyi yüklenebilir hale getirin.

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

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 bir tarayıcı sekmesinde veya yüklü bir PWA olarak nasıl başlatıldığını gösterir. Bu, uygulamanın lansman şekline bağlı olarak farklı stiller uygulanmasını mümkün kılar. Örneğin, uygulamayı, PWA yüklü bir PWA olarak başlatıldığında, yükle düğmesini her zaman gizleyecek ve 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() kullanarak display-mode medya sorgusunu test edin. iOS'te Safari henüz bunu desteklememektedir. Bu nedenle, bunun yerine tarayıcının bağımsız modda çalışıp çalışmadığını belirten bir boole değeri döndüren navigator.standalone öğesini işaretlemeniz gerekir.

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.