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), kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemelerine olanak tanır. Yüklenen PWA'lar, kullanıcının başlatıcısına eklenir. Böylece, diğer yüklü uygulamalar gibi çalıştırılabilir.

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.

"Uygulamayı Yükle" düğmesi de mevcuttur.

Kurulumu tanıtıp tanıtmayacağınızı değerlendirirken kullanıcıların PWA'nızı genellikle nasıl kullandığını göz önünde bulundurun. Ö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 açık standalone, minimal-ui veya window-control-overlay modlarında gösteriliyor.

Ö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 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üklenebileceği 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ı manifesti spesifikasyonundan kendi inkübatörüne taşındı. Chrome ekibi onları desteklemeye kararlı ve içeriği kaldırma ya da desteği sonlandırma konusunda herhangi bir planı bulunmuyor. destek. Google'ın Web DevRel ekibi, mobil kullanıcılara en iyi uygulamaları sunmak için özelleştirilmiş bir yükleme deneyimi sunuyoruz.

beforeinstallprompt etkinliğini dinleme

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

Not: Kullanabileceğiniz pek çok farklı kalıp vardır kullanıcıya uygulamanızın yüklenebileceğini bildirmek ve uygulama içi satın alma sağlamak için yükleme akışı anlamına gelir. Bunlar, başlıkta bir düğme, gezinme menüsünü veya içerik feed'inizdeki bir öğeyi seçin.

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, kayıtlı beforeinstallprompt etkinliğinde (deferredPrompt değişkeninde depolanır) prompt() işlevini çağırın. Kullanıcıya, PWA'nızı yüklemek istediklerini onaylamaları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 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.

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

PWA'nın ne zaman başarıyla yüklendiğini 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, PWA'nız yüklendiğinde (yükleme için kullanılan mekanizmadan bağımsız olarak) 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 kullanıma sunulduğunu 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 sayede, uygulamanın nasıl başlatıldığına bağlı olarak farklı stiller uygulayabilirsiniz. Ö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 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ü modu değiştiğinde takip et

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

// 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 ekran moduna göre güncelleme

Yüklü bir PWA olarak başlatıldığında PWA için farklı bir arka plan rengi uygulamak istiyorsanız 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.