Angular KSA ile Progresif Web Uygulaması oluşturma

Angular uygulamanızı yüklenebilir hale getirmek mi istiyorsunuz? Artık beklemenize gerek yok.

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ılavuzun kod örneğini GitHub'da bulabilirsiniz.

Yüklenebilir bir PWA oluşturma

Angular uygulamanızı PWA'ya dönüştürmek için tek bir komutu çalıştırmanız yeterlidir:

ng add @angular/pwa

Bu komutla:

• Varsayılan bir önbelleğe alma yapılandırması içeren 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 dosyasına manifest dosyasının bağlantısını ekleyin.
• index.html'e theme-color <meta> etiketini ekleyin.
• src/assets dizininde uygulama simgeleri oluşturun.

Hizmet çalışanınız varsayılan olarak ilk sayfa yüklendikten birkaç saniye sonra kaydedilir. Aksi takdirde registrationStrategy dosyasını değiştirebilirsiniz.

PWA'nızı özelleştirme

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

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 başlıklı makalede, ayarlayabileceğiniz tüm özellikler hakkında bilgi edinin.

Angular KSA 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'teki ilgili değeri değiştirerek bu özelliklerden herhangi birini özelleştirebilirsiniz.

Bir PWA, index.html içindeki link öğesiyle manifest dosyasına referans verir. Tarayıcı referansı bulduğunda Ana ekrana ekle istemini gösterir:

ng-add şemaları, uygulamanızı yüklenebilir hale getirmek 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'yi kullanarak projenize @angular/pwa ekleyin.
2. manifest.webmanifest dosyasındaki seçenekleri projenize uygun şekilde düzenleyin.
3. src/assets/icons dizinindeki simgeleri projenize uygun olacak şekilde güncelleyin.
4. İsteğe bağlı olarak index.html içindeki theme-color öğesini düzenleyin.