Angular hizmet çalışanı ile önbelleğe alma

Uygulamanızı bağlantının zayıf olduğu ağlarda daha hızlı ve daha güvenilir hale getirmek için Angular hizmet çalışanını kullanın.

Minko Gechev

Sınırlı bağlantıyla başa çıkma

Kullanıcıların ağ erişimi sınırlı olduğunda (ya da hiç erişim yoksa) web uygulaması işlevleri önemli ölçüde bozulabilir ve genellikle başarısız olabilir. Önbelleğe alma olanağı sağlamak için bir service çalışanı kullanmak, ağ isteklerine müdahale etmenize ve yanıtları ağdan almak yerine doğrudan yerel bir önbellekten dağıtmanıza olanak tanır. Uygulamanızın öğeleri önbelleğe alındıktan sonra bu yaklaşım, uygulamayı gerçekten hızlandırabilir ve kullanıcı çevrimdışıyken çalışmasını sağlayabilir.

Bu yayın, Angular uygulamasında önbelleğe alma özelliğinin nasıl ayarlanacağı konusunda adım adım yol gösterir. Genel olarak önbelleğe alma ve Service Worker'lar hakkında bilgi sahibi olduğunuz varsayılır. Bilgilerinizi tazelemeniz gerekiyorsa Service Workerlar ve Cache Storage API'si başlıklı makaleyi inceleyin.

Angular hizmet çalışanı ile tanışın

Angular ekibi, çerçeve ve Angular komut satırı arayüzü (KSA) ile iyi entegre edilmiş önbelleğe alma işlevine sahip bir Service Worker modülü sunar.

Service Worker'ı eklemek için KSA'da şu komutu çalıştırın:

ng add @angular/pwa

@angular/service-worker ve @angular/pwa artık uygulamaya yüklenmiş olmalı ve package.json konumunda görünecektir. ng-add şematik özelliği projeye, hizmet çalışanını yapılandırmak için kullanabileceğiniz ngsw-config.json adlı bir dosya da ekler. (Dosya, daha sonra özelleştireceğiniz varsayılan bir yapılandırma içerir.)

Şimdi projeyi üretim için derleyin:

ng build --prod

dist/service-worker-web-dev dizininde ngsw.json adında bir dosya sizi bekliyor. Bu dosya, Angular hizmet çalışanına uygulamadaki öğeleri nasıl önbelleğe alacağını bildirir. Dosya, yapılandırma (ngsw-config.json) ve derleme sırasında oluşturulan öğelere göre, derleme işlemi sırasında oluşturulur.

Şimdi, uygulamanızın üretim öğelerini içeren dizinde bir HTTP sunucusu başlatın, herkese açık URL'yi açın ve Chrome Geliştirici Araçları'nda ağ isteklerini kontrol edin:

1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Ağ sekmesini tıklayın.

Ağ sekmesinde, ngsw-worker.js komut dosyası tarafından doğrudan arka planda indirilen birçok statik öğenin bulunduğuna dikkat edin:

Bu, oluşturulan ngsw.json manifest dosyasında belirtilen statik öğeleri önbelleğe alan Angular hizmet çalışanıdır.

Ama önemli bir öğe eksik: nyan.png. Bu resmi önbelleğe almak için, çalışma alanının kök dizininde bulunan ngsw-config.json öğesine resmi içeren bir kalıp eklemeniz gerekir:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

Bu değişiklik, /assets klasöründeki tüm PNG resimlerini app kaynak öğesi grubuna ekler. Bu öğe grubunun installMode öğesi prefetch olarak ayarlandığından hizmet çalışanı, artık PNG resimleri de dahil olmak üzere belirtilen tüm öğeleri önbelleğe alır.

Önbelleğe alınacak diğer öğeleri belirtmek de son derece kolaydır: app kaynak öğesi grubunda kalıpları güncelleyin.

Sonuç

Önbelleğe alma için bir hizmet çalışanı kullanmak, öğeleri yerel bir önbelleğe kaydederek uygulamalarınızın performansını iyileştirebilir. Bu da kötü ağlarda uygulamaların daha güvenilir olmasını sağlar. Angular ve Angular KSA ile önbelleğe almayı kullanmak için:

1. @angular/pwa paketini projenize ekleyin.
2. ngsw-config.json öğesini düzenleyerek Service Worker'ın neleri önbelleğe aldığını kontrol edin.