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

Zayıf bağlantıyla ağlarda uygulamanızı 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ı sorunu

Kullanıcıların ağ erişimi sınırlı olduğunda veya hiç ağ erişimi olmadığında, web uygulaması işlevselliği önemli ölçüde azalabilir ve genellikle başarısız olabilir. Ön belleğe alma sağlamak için service Worker kullanmak, ağ isteklerine müdahale etmenize ve yanıtları ağdan almak yerine doğrudan yerel bir önbellekten göndermenize olanak tanır. Uygulamanızın öğeleri önbelleğe alındıktan sonra, bu yaklaşım bir uygulamayı gerçekten hızlandırabilir ve kullanıcı çevrimdışıyken çalışmasını sağlayabilir.

Bu gönderide, bir Angular uygulamasında önceden önbelleğe almanın nasıl ayarlanacağı açıklanmaktadır. Genel olarak, önbelleğe alma ve hizmet çalışanları hakkında bilgi sahibi olduğunuz varsayılır. Bilgilerinizi tazelemek istiyorsanız Hizmet çalışanları ve Cache Storage API başlıklı yayınımızı inceleyin.

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

Angular ekibi, çerçeveyle ve Angular komut satırı arayüzü (KSA) ile iyi entegre edilmiş önbellek işlevine sahip bir hizmet çalışanı modülü sunar.

Hizmet çalışanını eklemek için CLI'de şu komutu çalıştırın:

ng add @angular/pwa

@angular/service-worker ve @angular/pwa artık uygulamada yüklü olmalı ve package.json üzerinde görünecektir. ng-add şematik, projeye ngsw-config.json adlı bir dosya da ekler. Bu dosyayı, hizmet çalışanını yapılandırmak için kullanabilirsiniz. (Dosyada, biraz sonra özelleştireceğiniz varsayılan bir yapılandırma bulunur.)

Şimdi de projeyi üretim için derleyin:

ng build --prod

dist/service-worker-web-dev dizininin içinde ngsw.json adlı bir dosya görürsünüz. Bu dosya, Angular hizmet çalışanına uygulamadaki öğeleri nasıl önbelleğe alacağını söyler. Dosya, derleme işlemi sırasında yapılandırma (ngsw-config.json) ve derleme zamanında oluşturulan öğeler temel alınarak 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+Üst Karakter+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 dizi statik öğe bulunduğunu unutmayın:

Örnek uygulama

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

Ancak ö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 bunu 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 öğe grubuna ekler. Bu öğe grubunun installMode öğesi prefetch olarak ayarlandığından hizmet çalışanı, belirtilen tüm öğeleri önceden önbelleğe alır. Bu öğeler artık PNG resimleri de içerir.

Önceden önbelleğe alınacak diğer öğeleri belirtmek de bir o kadar kolaydır: app kaynak öğe grubundaki kalıpları güncelleyin.

Sonuç

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

  1. @angular/pwa paketini projenize ekleyin.
  2. ngsw-config.json öğesini düzenleyerek hizmet çalışanının neleri önbelleğe alacağını kontrol edin.