Kendi uygulama içi yükleme deneyiminizi sunma

Pete LePage

Yayınlanma tarihi: 14 Şubat 2020

Birçok tarayıcı, kullanıcı arayüzünde doğrudan Aşamalı Web Uygulamanızın (PWA) yüklenmesini etkinleştirmenize ve tanıtmanıza olanak tanır. Yükleme (eski adıyla Ana Ekrana Ekleme), kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına eklemesine olanak tanır. PWA'lar yüklendiğinde kullanıcının başlatıcısına eklenir ve diğer yüklü uygulamalar gibi çalıştırılabilir.

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

Yüklemeyi tanıtıp tanıtmayacağınızı 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ı telefonun ana ekranından veya masaüstü işletim sistemindeki Başlat menüsünden başlatmanın getirdiği 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üklenebilirlik şartlarını karşıladığından emin olun. Bu şartlar genellikle web uygulaması manifest dosyası içermeyi gerektirir.

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 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ının uygulamanızı yüklemek üzere 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, kaydedilen beforeinstallprompt etkinliğinde (deferredPrompt değişkeninde depolanır) prompt() işlevini çağırın. Kullanıcıya, PWA'nızı yüklemek istediğini onaylamasını isteyen bir modal 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 tercihiyle çözülen bir sözdür. Ertelenen etkinlikte prompt() işlevini yalnızca bir kez çağırabilirsiniz. Kullanıcı bunu kapatırsa genellikle userChoice özelliği çözümlendikten hemen sonra beforeinstallprompt etkinliği tekrar tetiklenene kadar beklemeniz gerekir.

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

Kullanıcının uygulamanızı kullanıcı arayüzünüzden 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, PWA'nız hangi mekanizma kullanılarak yüklenirse yüklensin 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 nasıl başlatıldığını (tarayıcı sekmesinde veya yüklü bir PWA olarak) gösterir. Bu sayede, uygulamanın nasıl başlatıldığına bağlı olarak farklı stiller uygulanabilir. Örneğin, yüklü bir PWA olarak başlatıldığında yükleme düğmesini her zaman gizleyecek ve geri düğmesi sağlayacak şekilde yapılandırabilirsiniz.

PWA'nın nasıl başlatıldığını izleme

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üleme modu değiştiğinde izleme

Kullanıcının browser ile diğer görüntüleme modları arasında geçiş yapıp yapmadığını izlemek için display-mode medya sorgusundaki 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üleme moduna göre güncelleme

Yüklü bir 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

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, web uygulaması manifestindeki güncellemeleri nasıl işler? başlıklı makaleyi inceleyin.