{"id":31523,"date":"2025-10-10T22:41:04","date_gmt":"2025-10-10T19:41:04","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31523"},"modified":"2025-10-10T22:41:04","modified_gmt":"2025-10-10T19:41:04","slug":"angular-service-worker-guncellemelerle-basa-cikmak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-service-worker-guncellemelerle-basa-cikmak\/","title":{"rendered":"Angular Service Worker: G\u00fcncellemelerle Ba\u015fa \u00c7\u0131kmak"},"content":{"rendered":"
<\/p>\n
Angular Service Worker: G\u00fcncellemelerle Ba\u015fa \u00c7\u0131kmak<\/h2>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131lara masa\u00fcst\u00fc uygulamalar\u0131na benzer bir deneyim sunmay\u0131 hedefler. Bu hedefe ula\u015fmada Progressive Web App (PWA) teknolojileri ve \u00f6zellikle Service Worker’lar kilit rol oynar. Angular, PWA yeteneklerini projelere entegre etmeyi basitle\u015ftiren @angular\/pwa<\/code> paketi ile bu alanda g\u00fc\u00e7l\u00fc bir destek sunar. Ancak, bir Service Worker’\u0131n temel i\u015flevi olan kaynaklar\u0131 \u00f6nbelle\u011fe almak, uygulaman\u0131n yeni s\u00fcr\u00fcmlerinin kullan\u0131c\u0131lara sorunsuz bir \u015fekilde ula\u015fmas\u0131 gerekti\u011finde karma\u015f\u0131k bir durum yaratabilir. “Angular Service Worker: G\u00fcncellemelerle Ba\u015fa \u00c7\u0131kmak” konusu, bu karma\u015f\u0131kl\u0131\u011f\u0131 anlamay\u0131, Angular’\u0131n g\u00fcncelleme mekanizmas\u0131n\u0131 \u00f6\u011frenmeyi ve kullan\u0131c\u0131 deneyimini bozmadan uygulama g\u00fcncellemelerini y\u00f6netmenin en iyi yollar\u0131n\u0131 ke\u015ffetmeyi ama\u00e7lamaktad\u0131r.<\/p>\n

Service Worker ve Angular Entegrasyonu<\/h3>\nService Worker, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ayr\u0131 \u00e7al\u0131\u015fan, web uygulamas\u0131 ile taray\u0131c\u0131 aras\u0131nda bir proxy g\u00f6revi g\u00f6ren bir JavaScript beti\u011fidir. Temel yetenekleri aras\u0131nda a\u011f isteklerini yakalama, \u00f6nbelle\u011fe alma, push bildirimleri g\u00f6nderme ve arka planda senkronizasyon yapma bulunur. Bu yetenekler, bir web uygulamas\u0131n\u0131 \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilir hale getirme, performans\u0131 art\u0131rma ve bildirimler arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131larla etkile\u015fim kurma potansiyelini sunar.<\/p>\n
Angular, ng add @angular\/pwa<\/code> komutuyla projeye kolayca bir Service Worker eklemeyi sa\u011flar. Bu komut, a\u015fa\u011f\u0131daki temel de\u011fi\u015fiklikleri yapar:
\n*   @angular\/service-worker<\/code> paketini projenize ekler.
\n*   angular.json<\/code> dosyas\u0131nda serviceWorker: true<\/code> ayar\u0131n\u0131 etkinle\u015ftirir.
\n*   Uygulaman\u0131n k\u00f6k dizinine ngsw-config.json<\/code> ad\u0131nda bir yap\u0131land\u0131rma dosyas\u0131 ekler.
\n*   src\/index.html<\/code> dosyas\u0131na Service Worker’\u0131 kaydetmek i\u00e7in gerekli kodu ekler.
\n*   src\/manifest.webmanifest<\/code> dosyas\u0131n\u0131 olu\u015fturur.<\/p>\n
Uygulama derlendi\u011finde (genellikle ng build --configuration production<\/code> ile), Angular CLI, ngsw-config.json<\/code> dosyas\u0131ndaki kurallara g\u00f6re uygulaman\u0131n t\u00fcm statik varl\u0131klar\u0131n\u0131n (HTML, CSS, JavaScript, resimler vb.) bir listesini ve her birinin i\u00e7erik karmas\u0131n\u0131 (hash) i\u00e7eren bir ngsw.json<\/code> manifest dosyas\u0131 olu\u015fturur. Bu ngsw.json<\/code> dosyas\u0131, Service Worker’\u0131n hangi varl\u0131klar\u0131 \u00f6nbelle\u011fe alaca\u011f\u0131n\u0131 ve hangi s\u00fcr\u00fcmde olduklar\u0131n\u0131 takip etmesini sa\u011flayan anahtard\u0131r.<\/p>\n
G\u00fcncelleme Mekanizmas\u0131n\u0131n Zorluklar\u0131<\/h3>\nService Worker’lar\u0131n sa\u011flad\u0131\u011f\u0131 \u00e7evrimd\u0131\u015f\u0131 yetenekler ve performans art\u0131\u015f\u0131, \u00f6nbelle\u011fe alma mekanizmalar\u0131na dayan\u0131r. Ancak, bu \u00f6nbelle\u011fe alma, uygulaman\u0131n yeni bir s\u00fcr\u00fcm\u00fc yay\u0131nland\u0131\u011f\u0131nda “eski” i\u00e7eri\u011fin kullan\u0131c\u0131lara sunulmas\u0131na neden olabilir. Kullan\u0131c\u0131lar, taray\u0131c\u0131lar\u0131nda uygulaman\u0131n eski bir s\u00fcr\u00fcm\u00fcn\u00fc g\u00f6rmeye devam ederken, sunucuda yeni bir s\u00fcr\u00fcm\u00fcn mevcut olmas\u0131, kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7abilir. Bu durum, \u00f6zellikle API istekleri veya veri yap\u0131lar\u0131 de\u011fi\u015fti\u011finde ciddi sorunlara neden olabilir.<\/p>\n
Geleneksel web uygulamalar\u0131nda, bir sunucu g\u00fcncellemesi genellikle taray\u0131c\u0131n\u0131n bir sonraki sayfay\u0131 y\u00fcklemesinde veya tam bir yenileme yapmas\u0131nda otomatik olarak yeni i\u00e7eri\u011fi getirmesini sa\u011flar. Service Worker ile bu durum farkl\u0131d\u0131r; Service Worker, taray\u0131c\u0131n\u0131n a\u011f isteklerini yakalad\u0131\u011f\u0131 i\u00e7in, yeni bir s\u00fcr\u00fcm\u00fcn fark\u0131na varmas\u0131 ve onu etkinle\u015ftirmesi \u00f6zel bir s\u00fcre\u00e7 gerektirir. Kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131, Service Worker taraf\u0131ndan \u00f6nbelle\u011fe al\u0131nm\u0131\u015f eski varl\u0131klar\u0131 kullanmaya devam edebilir ve yeni s\u00fcr\u00fcm\u00fcn varl\u0131\u011f\u0131ndan haberdar olmayabilir. Bu nedenle, Service Worker kullanan uygulamalar\u0131n, yeni s\u00fcr\u00fcmlerin varl\u0131\u011f\u0131n\u0131 tespit etme, indirme ve etkinle\u015ftirme konusunda bilin\u00e7li bir stratejiye sahip olmas\u0131 kritik \u00f6neme sahiptir.<\/p>\n
Angular Service Worker’\u0131n G\u00fcncelleme Y\u00f6netimi<\/h3>\nAngular Service Worker, bu g\u00fcncelleme zorluklar\u0131n\u0131 ele almak i\u00e7in sofistike bir mekanizma sunar. Bu mekanizma, uygulaman\u0131n farkl\u0131 s\u00fcr\u00fcmlerini y\u00f6netmeyi ve kullan\u0131c\u0131ya sorunsuz bir ge\u00e7i\u015f sa\u011flamay\u0131 ama\u00e7lar.<\/p>\n
\u0130\u00e7erik Karmalar\u0131 (Content Hashes) ve ngsw.json<\/code><\/h4>\nAngular CLI, \u00fcretim derlemesi s\u0131ras\u0131nda (ng build --configuration production<\/code>), uygulaman\u0131n t\u00fcm statik varl\u0131klar\u0131 i\u00e7in benzersiz i\u00e7erik karmalar\u0131 (hash) olu\u015fturur. Bu karmalar, dosyan\u0131n i\u00e7eri\u011fi de\u011fi\u015fti\u011finde de\u011fi\u015fir. ngsw.json<\/code> manifest dosyas\u0131, bu varl\u0131klar\u0131n yollar\u0131n\u0131 ve ilgili i\u00e7erik karmalar\u0131n\u0131 i\u00e7erir.
\n\u00d6rnek ngsw.json<\/code> yap\u0131s\u0131 (basitle\u015ftirilmi\u015f):<\/p>\n
{\n  \"configVersion\": 1,\n  \"index\": \"\/index.html\",\n  \"assetGroups\": [\n    {\n      \"name\": \"app\",\n      \"installMode\": \"prefetch\",\n      \"updateMode\": \"prefetch\",\n      \"urls\": [\n        \"\/favicon.ico\",\n        \"\/index.html\",\n        \"\/main.js\",\n        \"\/polyfills.js\",\n        \"\/runtime.js\",\n        \"\/styles.css\"\n      ],\n      \"patterns\": [],\n      \"cacheQueryOptions\": {\n        \"ignoreSearch\": false\n      }\n    }\n  ],\n  \"hashTable\": {\n    \"\/favicon.ico\": \"a2444b02a90e36617807c4568019a3b6899b8705\",\n    \"\/index.html\": \"4e731d1d8a1f6a1e3b5e0c9d7f0a8c2b1e3d4f5g\",\n    \"\/main.js\": \"h9i0j1k2l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8\",\n    \/\/ ... di\u011fer varl\u0131klar ve karmalar\u0131\n  }\n}<\/code><\/pre>\nUygulaman\u0131n yeni bir s\u00fcr\u00fcm\u00fc da\u011f\u0131t\u0131ld\u0131\u011f\u0131nda, yeni ngsw.json<\/code> dosyas\u0131 da sunucuya y\u00fcklenir. E\u011fer herhangi bir dosyan\u0131n i\u00e7eri\u011fi de\u011fi\u015fmi\u015fse, o dosyan\u0131n karmas\u0131 da de\u011fi\u015fir.<\/p>\n
G\u00fcncelleme Kontrolleri<\/h4>\nAngular Service Worker, yeni bir uygulama s\u00fcr\u00fcm\u00fcn\u00fcn varl\u0131\u011f\u0131n\u0131 otomatik olarak veya manuel olarak kontrol edebilir.<\/p>\n
Otomatik Kontroller<\/h5>\n*   Uygulama Ba\u015flang\u0131c\u0131nda:<\/strong> Service Worker, her uygulama ba\u015flang\u0131c\u0131nda (index.html<\/code> y\u00fcklendi\u011finde), sunucudaki ngsw.json<\/code> dosyas\u0131n\u0131 kontrol eder. E\u011fer bu dosya, mevcut Service Worker’\u0131n bildi\u011fi ngsw.json<\/code> dosyas\u0131ndan farkl\u0131 bir i\u00e7erik karmas\u0131na sahipse (yani yeni bir s\u00fcr\u00fcm varsa), Service Worker yeni s\u00fcr\u00fcm\u00fc indirmeye ba\u015flar.
\n*   app.update.versionUpdates<\/code> Ak\u0131\u015f\u0131:<\/strong> Angular’\u0131n SwUpdate<\/code> servisi, uygulaman\u0131n yeni s\u00fcr\u00fcmlerinin durumu hakk\u0131nda bilgi sa\u011flayan bir versionUpdates<\/code> (eski s\u00fcr\u00fcmlerde available<\/code> ve activated<\/code>) ak\u0131\u015f\u0131na sahiptir. Bu ak\u0131\u015fa abone olarak, uygulama i\u00e7inde g\u00fcncellemeleri y\u00f6netebiliriz.<\/p>\n
Manuel Kontroller<\/h5>\nUygulama, SwUpdate<\/code> servisindeki checkForUpdate()<\/code> metodunu \u00e7a\u011f\u0131rarak manuel olarak bir g\u00fcncelleme kontrol\u00fc ba\u015flatabilir. Bu, \u00f6zellikle kullan\u0131c\u0131ya “G\u00fcncellemeleri kontrol et” gibi bir d\u00fc\u011fme sunmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
import { SwUpdate, VersionReadyEvent, VersionDetectedEvent, VersionInstallationFailedEvent } from '@angular\/service-worker';\nimport { Injectable } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UpdateService {\n\n  constructor(private swUpdate: SwUpdate) {\n    if (this.swUpdate.isEnabled) {\n      this.swUpdate.versionUpdates.subscribe(event => {\n        if (event.type === 'VERSION_READY') {\n          console.log(Yeni uygulama s\u00fcr\u00fcm\u00fc haz\u0131r: ${event.latestVersion.hash}<\/code>);\n          \/\/ Kullan\u0131c\u0131ya g\u00fcncelleme bildirimi g\u00f6ster\n          \/\/ this.promptUserForUpdate();\n        } else if (event.type === 'VERSION_DETECTED') {\n          console.log(Yeni uygulama s\u00fcr\u00fcm\u00fc tespit edildi: ${event.version.hash}<\/code>);\n        } else if (event.type === 'VERSION_INSTALLATION_FAILED') {\n          console.log(Yeni uygulama s\u00fcr\u00fcm\u00fc y\u00fcklenemedi: ${event.version.hash}, Hata: ${event.error}<\/code>);\n        }\n      });\n\n      \/\/ Eski API (Angular 12 ve \u00f6ncesi i\u00e7in):\n      \/\/ this.swUpdate.available.subscribe(event => {\n      \/\/   console.log('Yeni uygulama s\u00fcr\u00fcm\u00fc mevcut:', event.current, event.available);\n      \/\/   \/\/ Kullan\u0131c\u0131ya g\u00fcncelleme bildirimi g\u00f6ster\n      \/\/   \/\/ this.promptUserForUpdate();\n      \/\/ });\n      \/\/ this.swUpdate.activated.subscribe(event => {\n      \/\/   console.log('Uygulama yeni s\u00fcr\u00fcme g\u00fcncellendi:', event.previous, event.current);\n      \/\/ });\n    }\n  }\n\n  checkForUpdates(): Promise {\n    if (this.swUpdate.isEnabled) {\n      console.log('Manuel g\u00fcncelleme kontrol\u00fc ba\u015flat\u0131l\u0131yor...');\n      return this.swUpdate.checkForUpdate();\n    }\n    return Promise.resolve(false);\n  }\n\n  activateUpdate(): Promise {\n    if (this.swUpdate.isEnabled) {\n      console.log('Yeni s\u00fcr\u00fcm etkinle\u015ftiriliyor...');\n      return this.swUpdate.activateUpdate();\n    }\n    return Promise.resolve();\n  }\n}<\/code><\/pre>\nG\u00fcncelleme Etkinle\u015ftirme (activateUpdate()<\/code>)<\/h4>\nBir Service Worker yeni bir s\u00fcr\u00fcm\u00fc tespit edip indirdi\u011finde, bu yeni s\u00fcr\u00fcm hemen etkinle\u015ftirilmez. Taray\u0131c\u0131, yeni Service Worker’\u0131 “waiting” (beklemede) durumuna getirir. Bu, mevcut Service Worker’\u0131n hala aktif oldu\u011fu ve kullan\u0131c\u0131ya eski s\u00fcr\u00fcm\u00fc sundu\u011fu anlam\u0131na gelir. Yeni Service Worker, ancak mevcut Service Worker’\u0131n kontrol etti\u011fi t\u00fcm sayfalar kapat\u0131ld\u0131\u011f\u0131nda veya mevcut Service Worker’\u0131n kendisi sonland\u0131r\u0131ld\u0131\u011f\u0131nda otomatik olarak aktif hale gelir.<\/p>\n
Ancak, \u00e7o\u011fu durumda kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131y\u0131 kapatmas\u0131n\u0131 beklemek iyi bir kullan\u0131c\u0131 deneyimi de\u011fildir. \u0130\u015fte bu noktada SwUpdate.activateUpdate()<\/code> metodu devreye girer. Bu metot \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, beklemede olan yeni Service Worker’\u0131n hemen etkinle\u015ftirilmesi i\u00e7in bir sinyal g\u00f6nderilir. Etkinle\u015ftirme ba\u015far\u0131l\u0131 olduktan sonra, sayfan\u0131n yeniden y\u00fcklenmesi (\u00f6rne\u011fin document.location.reload()<\/code>) yeni Service Worker taraf\u0131ndan kontrol edilen yeni varl\u0131klar\u0131n y\u00fcklenmesini sa\u011flar.<\/p>\n
Bu “bekleme” ve “etkinle\u015ftirme” ayr\u0131m\u0131, Service Worker’lar\u0131n kritik bir \u00f6zelli\u011fidir: asla aktif olarak kullan\u0131lan bir Service Worker’\u0131 aniden de\u011fi\u015ftirmemek. Bu, uygulaman\u0131n o anki durumuyla ilgili tutars\u0131zl\u0131klar\u0131 \u00f6nler ve kullan\u0131c\u0131 deneyimini korur.<\/p>\n
Uygulama \u0130\u00e7inde G\u00fcncelleme Bildirimlerini Uygulama<\/h3>\nKullan\u0131c\u0131lara yeni bir s\u00fcr\u00fcm\u00fcn mevcut oldu\u011funu bildirmek ve onlar\u0131 g\u00fcncellemeyi etkinle\u015ftirmeye te\u015fvik etmek, iyi bir kullan\u0131c\u0131 deneyimi i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n
Kullan\u0131c\u0131 Deneyimi (UX) De\u011ferlendirmeleri<\/h4>\n*   Ne Zaman Bildirilmeli?<\/strong>
\n    *   Hemen:<\/strong> Yeni s\u00fcr\u00fcm tespit edildi\u011finde ve indirildi\u011finde an\u0131nda bildirim g\u00f6sterilebilir. Bu, en g\u00fcncel i\u00e7eri\u011fi isteyen kullan\u0131c\u0131lar i\u00e7in idealdir.
\n    *   Gecikmeli:<\/strong> Kullan\u0131c\u0131n\u0131n aktif bir i\u015flem yapmad\u0131\u011f\u0131 bir anda veya belli bir s\u00fcre sonra bildirim g\u00f6sterilebilir.
\n    *   Sonraki Ziyarette:<\/strong> Kullan\u0131c\u0131 uygulamay\u0131 kapat\u0131p tekrar a\u00e7t\u0131\u011f\u0131nda yeni s\u00fcr\u00fcm otomatik olarak etkinle\u015ftirilebilir. Ancak bu, kullan\u0131c\u0131n\u0131n eski s\u00fcr\u00fcm\u00fc daha uzun s\u00fcre g\u00f6rmesine neden olabilir.
\n*   Nas\u0131l Bildirilmeli?<\/strong>
\n    *   Snackbar\/Toast:<\/strong> K\u0131sa s\u00fcreli, dikkat \u00e7ekici bir mesaj.
\n    *   Diyalog Kutusu:<\/strong> Kullan\u0131c\u0131n\u0131n daha fazla dikkatini \u00e7eken ve bir eylem gerektiren bir pencere.
\n    *   Uygulama \u0130\u00e7i Mesaj:<\/strong> Uygulaman\u0131n bir b\u00f6l\u00fcm\u00fcnde kal\u0131c\u0131 olarak g\u00f6sterilen bir banner.
\n*   Hangi Eylem Gerekmeli?<\/strong>
\n    *   Yenile (Refresh):<\/strong> Kullan\u0131c\u0131n\u0131n sayfay\u0131 yeniden y\u00fcklemesini isteyen bir d\u00fc\u011fme.
\n    *   Yoksay (Ignore):<\/strong> G\u00fcncellemeyi \u015fimdilik erteleme se\u00e7ene\u011fi.<\/p>\n
Kod \u00d6rne\u011fi: Bir G\u00fcncelleme Bildirimi<\/h4>\nGenellikle, uygulaman\u0131n ana bile\u015feninde (\u00f6rne\u011fin AppComponent<\/code>) veya bir servis arac\u0131l\u0131\u011f\u0131yla SwUpdate<\/code> servisi dinlenir.<\/p>\n
\/\/ app.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { SwUpdate, VersionReadyEvent, VersionInstallationFailedEvent } from '@angular\/service-worker';\nimport { MatSnackBar } from '@angular\/material\/snack-bar'; \/\/ \u00d6rnek olarak Angular Material Snackbar kullan\u0131lm\u0131\u015ft\u0131r\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n  title = 'my-angular-pwa';\n\n  constructor(private swUpdate: SwUpdate, private snackBar: MatSnackBar) {}\n\n  ngOnInit(): void {\n    if (this.swUpdate.isEnabled) {\n      \/\/ Yeni s\u00fcr\u00fcm\u00fcn haz\u0131r oldu\u011funu dinle\n      this.swUpdate.versionUpdates.subscribe(event => {\n        if (event.type === 'VERSION_READY') {\n          console.log(Yeni uygulama s\u00fcr\u00fcm\u00fc haz\u0131r: ${event.latestVersion.hash}<\/code>);\n          this.promptUpdate();\n        } else if (event.type === 'VERSION_INSTALLATION_FAILED') {\n          console.warn(Yeni uygulama s\u00fcr\u00fcm\u00fc y\u00fcklenemedi: ${event.version.hash}, Hata: ${event.error}<\/code>);\n          \/\/ Kullan\u0131c\u0131ya bir hata mesaj\u0131 g\u00f6sterebilirsiniz.\n        }\n      });\n\n      \/\/ Uygulama a\u00e7\u0131l\u0131\u015f\u0131nda g\u00fcncelleme kontrol\u00fc yap (opsiyonel, Angular SW zaten yapar)\n      \/\/ this.swUpdate.checkForUpdate().then(() => console.log('G\u00fcncelleme kontrol\u00fc tamamland\u0131.'));\n\n      \/\/ Kurtar\u0131lamaz bir hata durumunu ele al (\u00f6rne\u011fin bozuk Service Worker)\n      this.swUpdate.unrecoverable.subscribe(event => {\n        console.error('Kurtar\u0131lamaz Service Worker hatas\u0131:', event.reason);\n        alert('Uygulamada \u00f6nemli bir hata olu\u015ftu. L\u00fctfen sayfay\u0131 yenileyin.');\n        window.location.reload();\n      });\n    } else {\n      console.log('Service Worker etkin de\u011fil.');\n    }\n  }\n\n  promptUpdate(): void {\n    const snackBarRef = this.snackBar.open('Yeni bir uygulama s\u00fcr\u00fcm\u00fc mevcut!', 'G\u00fcncelle', {\n      duration: 10000, \/\/ 10 saniye sonra otomatik kapan\u0131r\n    });\n\n    snackBarRef.onAction().subscribe(() => {\n      console.log('Kullan\u0131c\u0131 g\u00fcncellemeyi kabul etti.');\n      this.swUpdate.activateUpdate().then(() => {\n        document.location.reload();\n      });\n    });\n  }\n\n  \/\/ Manuel g\u00fcncelleme kontrol\u00fc i\u00e7in bir metod\n  checkManuallyForUpdates(): void {\n    if (this.swUpdate.isEnabled) {\n      this.swUpdate.checkForUpdate().then(updateAvailable => {\n        if (updateAvailable) {\n          console.log('Manuel kontrol: Yeni s\u00fcr\u00fcm mevcut.');\n          \/\/ E\u011fer zaten bir prompt g\u00f6sterilmediyse burada g\u00f6sterebilirsiniz.\n          \/\/ this.promptUpdate();\n        } else {\n          console.log('Manuel kontrol: Zaten en g\u00fcncel s\u00fcr\u00fcmdesiniz.');\n          this.snackBar.open('Zaten en g\u00fcncel s\u00fcr\u00fcmdesiniz.', 'Kapat', { duration: 3000 });\n        }\n      }).catch(err => {\n        console.error('Manuel g\u00fcncelleme kontrol\u00fcnde hata:', err);\n        this.snackBar.open('G\u00fcncelleme kontrol\u00fc ba\u015far\u0131s\u0131z oldu.', 'Kapat', { duration: 3000 });\n      });\n    }\n  }\n}<\/code><\/pre>\nBu \u00f6rnekte:
\n1.  SwUpdate<\/code> servisi enjekte edilir.
\n2.  ngOnInit<\/code> i\u00e7inde, swUpdate.versionUpdates<\/code> ak\u0131\u015f\u0131na abone olunur.
\n3.  VERSION_READY<\/code> olay\u0131 tetiklendi\u011finde (yani yeni s\u00fcr\u00fcm indirilip etkinle\u015ftirilmeye haz\u0131r oldu\u011funda), kullan\u0131c\u0131ya bir MatSnackBar<\/code> bildirimi g\u00f6sterilir.
\n4.  Kullan\u0131c\u0131 “G\u00fcncelle” d\u00fc\u011fmesine t\u0131klad\u0131\u011f\u0131nda, activateUpdate()<\/code> \u00e7a\u011fr\u0131l\u0131r ve ard\u0131ndan document.location.reload()<\/code> ile sayfa yeniden y\u00fcklenir. Bu, yeni Service Worker’\u0131n kontrol\u00fcndeki yeni uygulama varl\u0131klar\u0131n\u0131n y\u00fcklenmesini sa\u011flar.
\n5.  unrecoverable<\/code> olay\u0131, Service Worker’\u0131n kritik bir hata nedeniyle \u00e7al\u0131\u015famaz hale geldi\u011fi durumlarda tetiklenir. Bu durumda genellikle kullan\u0131c\u0131ya sayfay\u0131 yenilemesi s\u00f6ylenir.<\/p>\n
Geli\u015fmi\u015f Senaryolar ve En \u0130yi Uygulamalar<\/h3>\nAngular Service Worker ile g\u00fcncellemeleri y\u00f6netirken dikkate al\u0131nmas\u0131 gereken baz\u0131 geli\u015fmi\u015f senaryolar ve en iyi uygulamalar mevcuttur.<\/p>\n
ngsw-config.json<\/code> De\u011fi\u015fiklikleri ve Zorunlu G\u00fcncelleme<\/h4>\nngsw-config.json<\/code> dosyas\u0131nda yap\u0131lan bir de\u011fi\u015fiklik (\u00f6rne\u011fin yeni bir \u00f6nbellek grubu eklemek, \u00f6nbellekleme stratejilerini de\u011fi\u015ftirmek) uygulaman\u0131n “s\u00fcr\u00fcm\u00fcn\u00fc” de etkiler. Bu t\u00fcr bir de\u011fi\u015fiklik, Service Worker’\u0131n yeni bir ngsw.json<\/code> manifest dosyas\u0131 olu\u015fturmas\u0131na neden olur ve bu da normal bir uygulama g\u00fcncellemesi gibi alg\u0131lan\u0131r. Dolay\u0131s\u0131yla, ngsw-config.json<\/code>‘da yap\u0131lan her de\u011fi\u015fiklik, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131na yeni bir Service Worker s\u00fcr\u00fcm\u00fcn\u00fcn da\u011f\u0131t\u0131lmas\u0131n\u0131 tetikler.<\/p>\n
\u00d6n Bellekleme Stratejileri: Pre-caching vs. Runtime Caching<\/h4>\nngsw-config.json<\/code> i\u00e7inde iki ana \u00f6nbellekleme stratejisi vard\u0131r:
\n*   Pre-caching (assetGroups<\/code>):<\/strong> Uygulama y\u00fcklendi\u011finde veya yeni bir s\u00fcr\u00fcm tespit edildi\u011finde Service Worker taraf\u0131ndan otomatik olarak \u00f6nbelle\u011fe al\u0131nan varl\u0131klar (HTML, CSS, JS, resimler vb.). Bu varl\u0131klar, ngsw.json<\/code> i\u00e7indeki karmalarla takip edilir ve bir de\u011fi\u015fiklik oldu\u011funda yeni s\u00fcr\u00fcm indirilir. Bu, uygulaman\u0131n temel varl\u0131klar\u0131 i\u00e7in idealdir.
\n*   Runtime Caching (dataGroups<\/code>):<\/strong> Uygulama \u00e7al\u0131\u015f\u0131rken a\u011f isteklerine dayal\u0131 olarak \u00f6nbelle\u011fe al\u0131nan varl\u0131klar (API \u00e7a\u011fr\u0131lar\u0131, dinamik i\u00e7erik). Bu varl\u0131klar i\u00e7in ngsw.json<\/code>‘da karma takibi yap\u0131lmaz. maxAge<\/code>, maxEntries<\/code> ve strategy<\/code> gibi ayarlar kullan\u0131larak \u00f6nbellekleme davran\u0131\u015flar\u0131 kontrol edilir. API verilerini \u00f6nbelle\u011fe al\u0131rken, bu verilerin g\u00fcncelli\u011fini korumak i\u00e7in uygun bir strateji (\u00f6rne\u011fin freshness<\/code> veya networkFirst<\/code>) se\u00e7mek ve maxAge<\/code> de\u011ferini dikkatlice belirlemek \u00f6nemlidir.<\/p>\n
API verilerinin g\u00fcncellenmesi, Service Worker’\u0131n uygulama g\u00fcncelleme mekanizmas\u0131ndan ayr\u0131 d\u00fc\u015f\u00fcn\u00fclmelidir. Bir API endpoint’inden gelen veriler de\u011fi\u015fti\u011finde, Service Worker’\u0131n \u00f6nbelle\u011findeki verinin de g\u00fcncellenmesi gerekir. Bu, genellikle dataGroups<\/code> i\u00e7inde tan\u0131mlanan stratejilerle veya uygulama i\u00e7inde fetch<\/code> veya HttpClient<\/code> kullanarak \u00f6nbelle\u011fi manuel olarak y\u00f6neterek yap\u0131l\u0131r.<\/p>\n
unrecoverable<\/code> Durumu<\/h4>\nSwUpdate.unrecoverable<\/code> ak\u0131\u015f\u0131, Service Worker’\u0131n ciddi bir hata nedeniyle kurtar\u0131lamaz bir duruma girdi\u011fini g\u00f6sterir. Bu, genellikle Service Worker’\u0131n kendisinin bozuldu\u011fu veya beklenmedik bir \u015fekilde devre d\u0131\u015f\u0131 kald\u0131\u011f\u0131 anlam\u0131na gelir. Bu durumda, en g\u00fcvenli yol kullan\u0131c\u0131dan sayfay\u0131 tamamen yeniden y\u00fcklemesini istemektir (window.location.reload()<\/code>). Bu, Service Worker’\u0131n yeniden kaydedilmesini ve s\u0131f\u0131rdan ba\u015flamas\u0131n\u0131 sa\u011flar.<\/p>\n
G\u00fcncellemeleri Test Etme<\/h4>\nG\u00fcncelleme mekanizmas\u0131n\u0131 do\u011fru bir \u015fekilde test etmek \u00f6nemlidir:
\n1.  \u00dcretim Derlemesi:<\/strong> Her zaman ng build --configuration production<\/code> ile uygulaman\u0131z\u0131 derleyin. Geli\u015ftirme modunda Service Worker etkin de\u011fildir.
\n2.  Statik Sunucu:<\/strong> Derlenmi\u015f uygulamay\u0131 bir HTTP sunucusu ile servis edin (\u00f6rne\u011fin http-server dist\/my-app<\/code>).
\n3.  Taray\u0131c\u0131 DevTools:<\/strong> Chrome DevTools’ta “Application” sekmesine gidin. “Service Workers” b\u00f6l\u00fcm\u00fcnde mevcut Service Worker’\u0131 g\u00f6rebilir, durumunu (activating, activated, waiting) izleyebilir ve “Update on reload” veya “skipWaiting” gibi se\u00e7enekleri kullanabilirsiniz. “Cache Storage” b\u00f6l\u00fcm\u00fcnde Service Worker’\u0131n \u00f6nbelle\u011fini de g\u00f6rebilirsiniz.
\n4.  Sim\u00fclasyon:<\/strong>
\n    *   Uygulaman\u0131n ilk s\u00fcr\u00fcm\u00fcn\u00fc da\u011f\u0131t\u0131n ve taray\u0131c\u0131da a\u00e7\u0131n.
\n    *   Uygulaman\u0131zda k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik yap\u0131n (\u00f6rne\u011fin app.component.html<\/code>‘deki bir metni de\u011fi\u015ftirin).
\n    *   Uygulamay\u0131 tekrar derleyin ve sunucuya da\u011f\u0131t\u0131n (eski dosyalar\u0131n \u00fczerine yaz\u0131n).
\n    *   Taray\u0131c\u0131da, uygulaman\u0131z\u0131 a\u00e7\u0131k tutarken yeni bir sekmede veya ayn\u0131 sekmede sayfay\u0131 yenilemeden bir s\u00fcre bekleyin. Service Worker’\u0131n yeni s\u00fcr\u00fcm\u00fc tespit etmesini ve indirmesini izleyin.
\n    *   Uygulaman\u0131zdaki bildirim mekanizmas\u0131n\u0131n tetiklenip tetiklenmedi\u011fini kontrol edin.
\n    *   Kullan\u0131c\u0131 olarak g\u00fcncellemeyi kabul edin ve sayfan\u0131n yenilenerek yeni s\u00fcr\u00fcm\u00fc g\u00f6sterdi\u011finden emin olun.
\n5.  A\u011f Ko\u015fullar\u0131:<\/strong> DevTools’taki “Network” sekmesinden \u00e7evrimd\u0131\u015f\u0131 modu veya yava\u015f a\u011f ko\u015fullar\u0131n\u0131 sim\u00fcle ederek Service Worker’\u0131n davran\u0131\u015f\u0131n\u0131 test edin.<\/p>\n
Da\u011f\u0131t\u0131m Stratejileri<\/h4>\n*   ngsw.json<\/code>‘\u0131n G\u00fcncelli\u011fi:<\/strong> Sunucunuzun, ngsw.json<\/code> dosyas\u0131 i\u00e7in agresif \u00f6nbellekleme yapmad\u0131\u011f\u0131ndan emin olun. Taray\u0131c\u0131, bu dosyay\u0131 her uygulama ba\u015flang\u0131c\u0131nda kontrol etmelidir. Genellikle, bu dosya i\u00e7in Cache-Control: no-cache<\/code> veya k\u0131sa bir max-age<\/code> ayar\u0131 \u00f6nerilir.
\n*   Atomik Da\u011f\u0131t\u0131mlar:<\/strong> Yeni uygulama s\u00fcr\u00fcm\u00fcn\u00fc da\u011f\u0131t\u0131rken, eski ve yeni dosyalar\u0131n kar\u0131\u015fmad\u0131\u011f\u0131ndan emin olun. Genellikle, t\u00fcm yeni dosyalar ayn\u0131 anda sunucuya y\u00fcklenir veya bir blue-green<\/code> da\u011f\u0131t\u0131m stratejisi kullan\u0131l\u0131r.<\/p>\n
Yayg\u0131n Hatalar ve Sorun Giderme<\/h3>\nAngular Service Worker g\u00fcncellemeleriyle ilgili kar\u015f\u0131la\u015f\u0131labilecek baz\u0131 yayg\u0131n sorunlar ve \u00e7\u00f6z\u00fcm \u00f6nerileri:<\/p>\n
*   Service Worker Kaydedilmiyor:<\/strong>
\n    *   Kontrol:<\/strong> ng build --configuration production<\/code> ile derledi\u011finizden emin olun. Geli\u015ftirme modunda Service Worker etkin de\u011fildir.
\n    *   Kontrol:<\/strong> angular.json<\/code> dosyas\u0131nda projects..architect.build.options.serviceWorker<\/code> de\u011ferinin true<\/code> oldu\u011fundan emin olun.
\n    *   Kontrol:<\/strong> index.html<\/code> dosyas\u0131nda Service Worker’\u0131 kaydeden kodun (