Progresif web uygulamaları: yükleme istemi ve yüklemeyi ölçme

1. Hoş geldiniz

Bu laboratuvarda, mevcut yüklenebilir bir PWA'yı alıp özel bir uygulama içi yükleme düğmesi ekleyeceksiniz. Bu, Progresif Web Uygulaması Atölyesi'nin eşlik eden bir dizi kod laboratuvarının beşincisidir. Önceki codelab'in adı From Tab to Taskbar idi. Bu seride üç codelab daha var.

Neler öğreneceksiniz?

  • Özel bir uygulama içi PWA yükleme düğmesi oluşturma

Bilmeniz gerekenler

  • JavaScript

İhtiyacınız olanlar

2. Hazırlanın

Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:

Depoyu klonlarsanız pwa04--prompt-measure-install dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.

Bu kod tabanı için Node.js 14 veya sonraki bir sürümü gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodunun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:

Önemli Dosyalar

  • js/main.js - Ana uygulama JavaScript dosyası

3. Yükleme düğmesini ayarlama

Yükleme istemlerini eklemeden ve yükleme etkinliklerini yakalamadan önce yapılması gereken bazı kurulum işlemleri vardır. Öncelikle bir dosya oluşturun js/lib/install.js ve aşağıdaki kodu ekleyin:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Ardından, DOMContentLoaded etkinliğinin alt kısmındaki js/main.js bölümüne aşağıdaki kodu ekleyin:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Açıklama

Bu kod, sonraki adımda kullanılacak bir yükleme sınıfı oluşturur ve bunu çalışan uygulamaya ekler.

4. Yükleme istemi dinleyicileri ekleme

Yükleme düğmesi tetikleyicisini kullanarak PWA'nızın yüklenmesini tetiklemek için yükleme istemini yakalamanız gerekir. Yüklendikten sonra yakalanan yükleme istemini sıfırlamanız gerekir. Bunun için js/lib/install.js içindeki Install sınıfında constructor bölümüne aşağıdaki işlemleri yapacak kodu yazın:

Yükleme istemini yakalama

  • window üzerinde beforeinstallprompt etkinliğini dinleyin.
  • Etkinliğin tetiklenmesini önleme
  • İstemi yakalama
  • Yükleme düğmesi tetikleyicisini göster

Yükleme sırasında istemi sıfırlama

  • window üzerinde appinstalled etkinliğini dinleyin.
  • Yakalanan istemi sıfırlama
  • Yükleme düğmesi tetikleyicisini gizleme

5. Uygulama İçi Düğmeden Yüklemeyi Tetikleme

İstem yakalandıktan sonra PWA'nın yükleme düğmesi istemi tetikleyebilmelidir. Bunun için js/lib/install.js içindeki Install sınıfına aşağıdakileri ekleyin:

  • Yüklemeyi tetiklemek için async yöntemi
    • Yükleme istemi için yakalanan istemi kullanır.
    • await kullanıcının istem seçimi
    • İstemi sıfırlama
    • Kullanıcı yükleme istemini kabul ettiyse yükle düğmesini gizleme
  • Sınıfın constructor bölümündeki yükleme düğmesine, yükleme tetikleyicisini çağıran bir click etkinlik işleyici ekleyin.

6. Tebrikler!

Kendi uygulama içi yükleme düğmenizden PWA yüklemesini nasıl tetikleyeceğinizi öğrendiniz.

Serideki bir sonraki codelab Empowering Your PWA'dır.