Angular KSA ile Progresif Web Uygulaması oluşturma

Angular uygulamanızın yüklenebilir olmasını mı istiyorsunuz? Daha fazla beklemeyin.

Minko Gechev

Bu yayında, progresif web uygulaması (PWA) oluşturmak için Angular komut satırı arayüzünü (CLI) nasıl kullanacağınızı öğreneceksiniz.

Bu kılavuzdaki kod örneğini GitHub'da bulabilirsiniz.

Yüklenebilir bir PWA oluşturma

Angular uygulamanızı PWA yapmak için tek bir komut çalıştırmanız yeterlidir:

ng add @angular/pwa

Bu komut:

• Varsayılan önbelleğe alma yapılandırmasına sahip bir hizmet çalışanı oluşturun.
• Tarayıcıya, uygulamanızın kullanıcının cihazına yüklendiğinde nasıl davranması gerektiğini bildiren bir manifest dosyası oluşturun.
• index.html içinde manifest dosyasına bir bağlantı ekleyin.
• index.html öğesine theme-color <meta> etiketini ekleyin.
• src/assets dizininde uygulama simgeleri oluşturun.

Varsayılan olarak, hizmet çalışanınız ilk sayfa yüklemesinden birkaç saniye sonra kaydedilmelidir. Değilse registrationStrategy hizmetini değiştirmeyi düşünebilirsiniz.

PWA'nızı özelleştirme

Angular hizmet çalışanı ile önbelleğe alma başlıklı yayında, Angular hizmet çalışanının nasıl yapılandırılacağı açıklanmaktadır. Burada, hizmet çalışanının hangi kaynakları önbelleğe almasını istediğinizi ve bunu yapmak için hangi stratejiyi kullanması gerektiğini nasıl belirleyeceğinizi öğrenebilirsiniz.

Uygulamanızın manifest dosyası, uygulamanızın adını, kısa adını, simgelerini, tema rengini ve diğer ayrıntılarını belirtmenize olanak tanır. Web uygulaması manifesti ekleme gönderisinde ayarlayabileceğiniz tüm özellikler hakkında bilgi edinin.

Angular CLI tarafından oluşturulan manifest dosyasına göz atın:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

manifest.webmanifest bölümünde ilgili değeri değiştirerek bu özelliklerden herhangi birini özelleştirebilirsiniz.

PWA'lar, manifest dosyalarına index.html içinde link öğesiyle referans verir. Tarayıcı referansı bulduğunda Ana ekrana ekle istemini gösterir:

ng-add Şemalar, uygulamanızın yüklenebilir olması için gereken her şeyi eklediğinden, kullanıcı uygulamayı masaüstüne eklediğinde gösterilen bazı kısayol simgeleri oluşturur:

PWA'nızı üretime dağıtmadan önce manifest özelliklerini ve simgelerini özelleştirdiğinizden emin olun.

Sonuç

Yüklenebilir bir Angular uygulaması oluşturmak için:

1. Angular CLI'yı kullanarak projenize @angular/pwa ekleyin.
2. manifest.webmanifest dosyasındaki seçenekleri projenize uyacak şekilde düzenleyin.
3. src/assets/icons dizinindeki simgeleri projenize uygun şekilde güncelleyin.
4. İsteğe bağlı olarak, theme-color içinde index.html öğesini düzenleyin.