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.
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:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- 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:
@angular/pwa
paketini projenize ekleyin.ngsw-config.json
öğesini düzenleyerek Service Worker'ın neleri önbelleğe aldığını kontrol edin.