Service Worker’lar\u0131n web sitenizi nas\u0131l etkiledi\u011fini, performans\u0131 nas\u0131l art\u0131rd\u0131\u011f\u0131n\u0131 ve potansiyel sorunlar\u0131 nas\u0131l \u00e7\u00f6zece\u011finizi ke\u015ffedin. Kapsaml\u0131 rehberimizle \u00e7evrimd\u0131\u015f\u0131 deneyimi optimize edin ve sitenizin kontrol\u00fcn\u00fc tamamen elinizde tutun.<\/p>\n
Bir sabah uyand\u0131\u011f\u0131n\u0131zda web sitenizin kullan\u0131c\u0131lar\u0131n\u0131za bombo\u015f bir sayfa g\u00f6sterdi\u011fini veya daha k\u00f6t\u00fcs\u00fc, saatler \u00f6nce g\u00fcncelledi\u011finiz i\u00e7eri\u011fin yerine eski, alakas\u0131z bilgileri sunmaya devam etti\u011fini hayal edin. Paniklersiniz, de\u011fil mi? \u0130\u015fte tam da b\u00f6yle bir senaryo, benim “bir Service Worker’\u0131n t\u00fcm sitemi rehin ald\u0131\u011f\u0131 g\u00fcn” olarak adland\u0131rd\u0131\u011f\u0131m o talihsiz deneyimin ba\u015flang\u0131c\u0131yd\u0131. Bu tecr\u00fcbe, bir Service Worker’\u0131n g\u00fcc\u00fcn\u00fc ve ayn\u0131 zamanda yanl\u0131\u015f uyguland\u0131\u011f\u0131nda yaratabilece\u011fi kaosu en ac\u0131 yoldan \u00f6\u011frenmeme vesile oldu. Modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 olan Service Worker’lar, do\u011fru kullan\u0131ld\u0131\u011f\u0131nda sitenizin performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini inan\u0131lmaz derecede iyile\u015ftirebilirken, hatal\u0131 yap\u0131land\u0131rmalar\u0131 durumunda sizi \u00e7aresiz b\u0131rakabilir. Peki, bu g\u00fc\u00e7l\u00fc teknoloji nedir, neden bu kadar \u00f6nemlidir ve web sitenizi bir daha asla rehin almamas\u0131 i\u00e7in neler yapmal\u0131s\u0131n\u0131z? Gelin, bu sorular\u0131n cevaplar\u0131n\u0131 ad\u0131m ad\u0131m ke\u015ffedelim ve Service Worker’lar\u0131n d\u00fcnyas\u0131na derinlemesine bir yolculuk yapal\u0131m.<\/p>\n
Modern web uygulamalar\u0131n\u0131n (PWA – Progressive Web App) temel ta\u015flar\u0131ndan biri olan Service Worker, taray\u0131c\u0131 ile a\u011f aras\u0131nda adeta bir proxy sunucusu g\u00f6revi g\u00f6ren, JavaScript ile yaz\u0131lm\u0131\u015f bir betiktir. Ancak bu s\u0131radan bir JavaScript beti\u011fi de\u011fildir; ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan (main thread) ayr\u0131 bir ortamda \u00e7al\u0131\u015f\u0131r ve bu sayede sayfa y\u00fcklenme s\u00fcrelerini, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) yan\u0131t verme h\u0131z\u0131n\u0131 veya di\u011fer betiklerin \u00e7al\u0131\u015fmas\u0131n\u0131 engellemez. Bu izolasyon, Service Worker’lara e\u015fsiz bir g\u00fc\u00e7 ve esneklik kazand\u0131r\u0131r. Temel amac\u0131, \u00e7evrimd\u0131\u015f\u0131 deneyimleri m\u00fcmk\u00fcn k\u0131lmak, a\u011f isteklerini yakalamak ve \u00f6nbelle\u011fe almak (caching) suretiyle uygulamalar\u0131n performans\u0131n\u0131 art\u0131rmak ve kullan\u0131c\u0131lara bildirimler g\u00f6ndermek gibi yetenekler sunmakt\u0131r.<\/p>\n
Service Worker’lar\u0131n arkas\u0131ndaki temel mant\u0131k, event-driven (olay tabanl\u0131) yap\u0131s\u0131d\u0131r. Yani, belirli olaylar meydana geldi\u011finde (\u00f6rne\u011fin, Service Worker’\u0131n y\u00fcklendi\u011fi, etkinle\u015ftirildi\u011fi veya bir a\u011f iste\u011fi yap\u0131ld\u0131\u011f\u0131) tetiklenen kod par\u00e7ac\u0131klar\u0131 bar\u0131nd\u0131r\u0131r. Bu olaylar aras\u0131nda en kritik olanlar\u0131 \u015funlard\u0131r:<\/p>\n
Bu olay tabanl\u0131 mimari sayesinde Service Worker’lar, a\u011fa ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 en aza indirerek uygulamalar\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. \u00d6zellikle yava\u015f veya hi\u00e7 internet ba\u011flant\u0131s\u0131 olmayan durumlarda, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f i\u00e7erikleri sunarak kullan\u0131c\u0131 deneyimini kesintisiz hale getirir. D\u00fc\u015f\u00fcnsenize, bir kullan\u0131c\u0131n\u0131z otob\u00fcste interneti \u00e7ekmeyen bir t\u00fcnelden ge\u00e7erken bile e-ticaret sitenizde \u00fcr\u00fcnleri gezinebiliyor veya haberleri okuyabiliyor. Bu, yaln\u0131zca kullan\u0131c\u0131 memnuniyetini art\u0131rmakla kalmaz, ayn\u0131 zamanda potansiyel m\u00fc\u015fteri kayb\u0131n\u0131 da \u00f6nler.<\/p>\n
Bu g\u00fcc\u00fcn arkas\u0131nda iki temel API yatar: Cache API ve Fetch API. Cache API, taray\u0131c\u0131n\u0131n \u00f6nbellek depolama alan\u0131na programatik olarak eri\u015fim sa\u011flayarak belirli kaynaklar\u0131 depolaman\u0131za, alman\u0131za ve y\u00f6netmenize olanak tan\u0131r. Fetch API ise a\u011f isteklerini programatik olarak yapman\u0131z\u0131 ve yan\u0131tlar\u0131 i\u015flemenizi sa\u011flar. Service Worker’lar, bu iki API’yi bir araya getirerek \u00f6nbellekleme stratejilerini (Cache-First, Network-First, Stale-While-Revalidate vb.) uygulamak i\u00e7in ideal bir ortam sunar. Bu sayede siteniz sadece \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmakla kalmaz, ayn\u0131 zamanda a\u011f ba\u011flant\u0131s\u0131 olsa bile \u00f6nbellekten h\u0131zl\u0131 yan\u0131tlar sunarak genel performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
Service Worker’lar\u0131n sundu\u011fu t\u00fcm bu avantajlara ra\u011fmen, yanl\u0131\u015f yap\u0131land\u0131rmalar\u0131 veya g\u00f6zden ka\u00e7an detaylar, bir web sitesini adeta “rehin alabilir”. Bu “rehin alma” durumu genellikle sitenin beklenen \u015fekilde g\u00fcncellenmemesi, eski i\u00e7erikleri g\u00f6stermeye devam etmesi veya en k\u00f6t\u00fc senaryoda, tamamen i\u015flevsiz hale gelmesiyle ortaya \u00e7\u0131kar. Benim ba\u015f\u0131ma gelen olayda da durum tam olarak buydu: Yeni bir blog yaz\u0131s\u0131 yay\u0131nlamama ra\u011fmen, siteye gelen ziyaret\u00e7iler saatler \u00f6ncesinin eski ana sayfas\u0131n\u0131 g\u00f6r\u00fcyordu. Bu durum, hem kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan felaket demekti hem de benim i\u00e7in ciddi bir itibar kayb\u0131 riski ta\u015f\u0131yordu. Peki, bu t\u00fcr potansiyel tuzaklar nelerdir ve onlardan nas\u0131l ka\u00e7\u0131n\u0131labilir?<\/p>\n
\u0130lk ve en yayg\u0131n tuzak, hatal\u0131 \u00f6nbellekleme stratejileridir<\/strong>. E\u011fer Service Worker’\u0131n\u0131z statik dosyalar\u0131 (HTML, CSS, JS) ‘cache-first’ stratejisiyle \u00f6nbelle\u011fe al\u0131yor ancak bu dosyalar\u0131n g\u00fcncellenmesi i\u00e7in yeterli bir mekanizma sa\u011flam\u0131yorsan\u0131z, kullan\u0131c\u0131lar\u0131n\u0131z her zaman \u00f6nbellekteki eski versiyonlar\u0131 g\u00f6rmeye devam edecektir. \u00d6zellikle index.html gibi s\u0131k g\u00fcncellenen ana sayfalar\u0131 \u00f6nbelle\u011fe al\u0131rken bu durum b\u00fcy\u00fck bir sorun te\u015fkil eder. Kullan\u0131c\u0131lar yeni bir s\u00fcr\u00fcm oldu\u011funu asla fark edemez \u00e7\u00fcnk\u00fc Service Worker, s\u00fcrekli olarak \u00f6nbellekteki eski dosyay\u0131 sunar.<\/p>\n Bir di\u011fer tehlikeli durum ise Service Worker g\u00fcncelleme d\u00f6ng\u00fcs\u00fcn\u00fcn do\u011fru y\u00f6netilmemesidir<\/strong>. Service Worker’lar, yeni bir s\u00fcr\u00fcm \u00e7\u0131kt\u0131\u011f\u0131nda otomatik olarak g\u00fcncellenmezler. Yeni bir Service Worker beti\u011fi tespit edildi\u011finde, taray\u0131c\u0131 onu indirir ve ‘waiting’ (bekleme) durumuna ge\u00e7irir. Eski Service Worker t\u00fcm a\u00e7\u0131k sekmeler kapanana kadar \u00e7al\u0131\u015fmaya devam eder. E\u011fer kullan\u0131c\u0131 sekmeden hi\u00e7 \u00e7\u0131kmazsa veya siteyi d\u00fczenli olarak ziyaret etmezse, yeni s\u00fcr\u00fcm asla etkinle\u015fmeyebilir. Bu durum, kritik hata d\u00fczeltmelerinin veya g\u00fcvenlik yamalar\u0131n\u0131n kullan\u0131c\u0131lara ula\u015fmas\u0131n\u0131 engelleyebilir. Benim durumumda da, yeni Service Worker etkinle\u015fmedi\u011fi i\u00e7in eski kod \u00e7al\u0131\u015fmaya devam ediyordu ve yeni blog yaz\u0131s\u0131 ana sayfaya yans\u0131m\u0131yordu.<\/p>\n Devre d\u0131\u015f\u0131 b\u0131rakma ve hata ay\u0131klama zorluklar\u0131<\/strong> da Service Worker’lar\u0131n potansiyel tuzaklar\u0131ndan biridir. Bir Service Worker yanl\u0131\u015f yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda ve sitenizi rehin ald\u0131\u011f\u0131nda, onu devre d\u0131\u015f\u0131 b\u0131rakmak veya kald\u0131rmak sand\u0131\u011f\u0131n\u0131zdan daha karma\u015f\u0131k olabilir. Bazen taray\u0131c\u0131 \u00f6nbelle\u011fini temizlemek yeterli olmaz; Service Worker’\u0131n kendisini taray\u0131c\u0131dan manuel olarak kayd\u0131n\u0131n silinmesi gerekebilir. Bu da teknik bilgisi olmayan kullan\u0131c\u0131lar veya panik halindeki geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 bir s\u00fcre\u00e7 haline gelebilir.<\/p>\n Ger\u00e7ek d\u00fcnya \u00f6rne\u011fi olarak, bir haber sitesinin ba\u015f\u0131ndan ge\u00e7enleri ele alal\u0131m. Site, ana sayfas\u0131n\u0131 ve makale listelerini Service Worker ile ‘cache-first’ stratejisiyle \u00f6nbelle\u011fe alm\u0131\u015ft\u0131. Ama\u00e7lar\u0131, haber okuyucular\u0131na h\u0131zl\u0131 bir deneyim sunmakt\u0131. Ancak, yeni bir haber yay\u0131nland\u0131\u011f\u0131nda veya man\u015fetler de\u011fi\u015fti\u011finde, Service Worker eski ana sayfay\u0131 sunmaya devam ediyordu. Kullan\u0131c\u0131lar saatler \u00f6nce de\u011fi\u015fmi\u015f olan man\u015fetleri g\u00f6r\u00fcyordu. Bu durum, sitenin g\u00fcncelli\u011fini yitirmesine ve okuyucular\u0131n g\u00fcvenini kaybetmesine neden oldu. Sorun, Service Worker’\u0131n HTTP ba\u015fl\u0131klar\u0131n\u0131 (\u00f6zellikle ‘Cache-Control’) do\u011fru okumamas\u0131 ve ‘network-first’ veya ‘stale-while-revalidate’ gibi daha esnek bir strateji yerine her zaman \u00f6nbellekten servis etmesiydi. Bu vaka, Service Worker’lar\u0131 dikkatli planlamadan ve kapsaml\u0131 test etmeden uygulaman\u0131n ne denli riskli olabilece\u011fini a\u00e7\u0131k\u00e7a g\u00f6zler \u00f6n\u00fcne sermektedir.<\/p>\n Bu tuzaklardan ka\u00e7\u0131nmak i\u00e7in, Service Worker’\u0131n\u0131z\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc, \u00f6nbellekleme stratejilerini ve hata ay\u0131klama s\u00fcre\u00e7lerini titizlikle y\u00f6netmek esast\u0131r. Aksi takdirde, sitenizin kontrol\u00fcn\u00fc elinizden alacak ve sizi ciddi sorunlarla ba\u015f ba\u015fa b\u0131rakacak bir Service Worker ile kar\u015f\u0131la\u015fman\u0131z an meselesidir.<\/p>\n Service Worker’lar\u0131n potansiyel tuzaklar\u0131n\u0131 g\u00f6rd\u00fc\u011f\u00fcm\u00fcze g\u00f6re, \u015fimdi onlar\u0131 do\u011fru ve g\u00fcvenli bir \u015fekilde nas\u0131l kuraca\u011f\u0131m\u0131za ve temel \u00f6nbellekleme stratejilerini nas\u0131l uygulayaca\u011f\u0131m\u0131za odaklanabiliriz. Bu b\u00f6l\u00fcmde, ad\u0131m ad\u0131m bir Service Worker kurulumu ger\u00e7ekle\u015ftirecek ve sitenizin performans\u0131n\u0131 art\u0131r\u0131rken olas\u0131 sorunlardan ka\u00e7\u0131nmak i\u00e7in kullanabilece\u011finiz stratejileri inceleyece\u011fiz.<\/p>\n Bir Service Worker kullanmaya ba\u015flaman\u0131n ilk ad\u0131m\u0131, onu taray\u0131c\u0131da kaydetmektir. Bu i\u015flem, genellikle uygulaman\u0131z\u0131n ana JavaScript dosyas\u0131nda veya sayfa y\u00fcklendikten sonra \u00e7al\u0131\u015facak bir betik blo\u011funda yap\u0131l\u0131r. Kay\u0131t i\u015flemi s\u0131ras\u0131nda, taray\u0131c\u0131ya Service Worker beti\u011finin nerede oldu\u011funu bildiririz.<\/p>\n <\/code><\/p>\n Yukar\u0131daki kod blo\u011fu, taray\u0131c\u0131n\u0131n Service Worker'\u0131 destekleyip desteklemedi\u011fini kontrol eder. E\u011fer destekliyorsa, sayfa tamamen y\u00fcklendikten sonra ( Service Worker beti\u011finiz ( <\/code><\/p>\n Burada, Yeni bir Service Worker y\u00fcklendi\u011finde, eski Service Worker hala \u00e7al\u0131\u015f\u0131yor olabilir. <\/code><\/p>\n Bu kod blo\u011funda, Bu strateji, genellikle statik dosyalar ve s\u0131k g\u00fcncellenmeyen i\u00e7erikler i\u00e7in idealdir. Service Worker \u00f6nce iste\u011fi \u00f6nbellekte arar. E\u011fer bulursa, hemen \u00f6nbellekten d\u00f6nd\u00fcr\u00fcr. Bulamazsa, a\u011fa gider ve yan\u0131t\u0131 hem \u00f6nbelle\u011fe al\u0131r hem de taray\u0131c\u0131ya d\u00f6nd\u00fcr\u00fcr.<\/p>\n <\/code><\/p>\n Yukar\u0131daki kodda, Bu strateji, genellikle s\u0131k g\u00fcncellenen dinamik i\u00e7erikler (haberler, blog yaz\u0131lar\u0131, API istekleri) i\u00e7in daha uygundur. Service Worker \u00f6nce a\u011fdan veri \u00e7ekmeye \u00e7al\u0131\u015f\u0131r. E\u011fer ba\u015far\u0131l\u0131 olursa, yan\u0131t\u0131 taray\u0131c\u0131ya d\u00f6nd\u00fcr\u00fcr ve ayn\u0131 zamanda \u00f6nbelle\u011fe al\u0131r. A\u011f ba\u011flant\u0131s\u0131 yoksa veya ba\u015far\u0131s\u0131z olursa, \u00f6nbellekteki veriyi d\u00f6nd\u00fcr\u00fcr.<\/p>\n <\/code><\/p>\n Bu geli\u015fmi\u015f \u00f6rnekte, iste\u011fin t\u00fcr\u00fcne g\u00f6re farkl\u0131 stratejiler uyguluyoruz. Navigasyon istekleri (yani bir sayfan\u0131n kendisi i\u00e7in yap\u0131lan istekler) ve API istekleri i\u00e7in 'network-first' stratejisini kullan\u0131rken, di\u011fer statik varl\u0131klar i\u00e7in 'cache-first' stratejisine sad\u0131k kal\u0131yoruz. Bu hibrit yakla\u015f\u0131m, hem g\u00fcncelli\u011fi hem de performans\u0131 dengelemek i\u00e7in olduk\u00e7a etkilidir. Service Worker'lar\u0131 etkin bir \u015fekilde kullanmak, sitenizin kontrol\u00fcn\u00fc elinizde tutman\u0131n ve kullan\u0131c\u0131lar\u0131n\u0131za ola\u011fan\u00fcst\u00fc bir deneyim sunman\u0131n anahtar\u0131d\u0131r.<\/p>\n Service Worker'lar ne kadar g\u00fc\u00e7l\u00fc ve faydal\u0131 olursa olsun, yukar\u0131da bahsetti\u011fimiz gibi yanl\u0131\u015f yap\u0131land\u0131rmalar sonucunda sitenizi rehin alabilir ve sizi zor durumda b\u0131rakabilir. Siteniz eski i\u00e7erikleri g\u00f6stermeye devam ediyor, yeni g\u00fcncellemeler bir t\u00fcrl\u00fc g\u00f6r\u00fcnm\u00fcyor veya tamamen eri\u015filemez hale geliyorsa, endi\u015felenmeyin. Bu b\u00f6l\u00fcm, sitenizi bu durumdan kurtarmak i\u00e7in kullanabilece\u011finiz sorun giderme ve g\u00fcncelleme tekniklerini detayland\u0131racak.<\/p>\n Service Worker ile ilgili sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in en g\u00fc\u00e7l\u00fc arac\u0131n\u0131z taray\u0131c\u0131n\u0131z\u0131n Geli\u015ftirici Ara\u00e7lar\u0131d\u0131r. \u00d6zellikle Chrome DevTools'un \"Application\" sekmesi, Service Worker ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve \u00f6nbellek depolamas\u0131n\u0131 izlemek i\u00e7in paha bi\u00e7ilmez bilgiler sunar.<\/p>\n Service Worker'\u0131n g\u00fcncelleme d\u00f6ng\u00fcs\u00fcnde kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck sorunlardan biri, yeni bir Service Worker'\u0131n 'waiting' durumunda tak\u0131l\u0131 kalmas\u0131d\u0131r. Bunun nedeni, eski Service Worker'\u0131n t\u00fcm a\u00e7\u0131k sekmeler kapanana kadar aktif kalmas\u0131d\u0131r. Bu durumu h\u0131zland\u0131rmak i\u00e7in Service Worker beti\u011finizde <\/code><\/p>\n Sitenizin rehin al\u0131nmas\u0131n\u0131 \u00f6nlemenin en iyi yollar\u0131ndan biri, Service Worker \u00f6nbelleklerinizi ve beti\u011finizi dikkatli bir \u015fekilde versiyonlamakt\u0131r. Herhangi bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, Hata ay\u0131klama s\u00fcrecini kolayla\u015ft\u0131rmak i\u00e7in Service Worker'\u0131n\u0131zda bol miktarda Service Worker'lar, yaln\u0131zca statik varl\u0131klar\u0131 \u00f6nbelle\u011fe almak ve \u00e7evrimd\u0131\u015f\u0131 gezinme sa\u011flamakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren daha karma\u015f\u0131k \u00f6zellikler sunar. Bu ileri d\u00fczey yetenekler aras\u0131nda \u00e7evrimd\u0131\u015f\u0131 veri senkronizasyonu ve anl\u0131k bildirimler (Push Notifications) \u00f6ne \u00e7\u0131kar. Bu \u00f6zellikler, web uygulamalar\u0131n\u0131 mobil uygulamalara daha da yakla\u015ft\u0131rarak, kesintisiz ve etkile\u015fimli bir deneyim sunar.<\/p>\n Kullan\u0131c\u0131lar\u0131n \u00e7evrimd\u0131\u015f\u0131yken bile etkile\u015fimde bulunmas\u0131n\u0131 sa\u011flayan en g\u00fc\u00e7l\u00fc \u00f6zelliklerden biri Background Sync API'dir. Bir kullan\u0131c\u0131 internet ba\u011flant\u0131s\u0131 yokken bir form doldurdu\u011funda veya bir mesaj g\u00f6nderdi\u011finde, bu veriler hemen sunucuya g\u00f6nderilemez. Background Sync API, bu t\u00fcr istekleri Service Worker \u00fczerinden kaydeder ve internet ba\u011flant\u0131s\u0131 tekrar kuruldu\u011funda otomatik olarak senkronize eder.<\/p>\n <\/code><\/p>\n Yukar\u0131daki kod, Web Push API, kullan\u0131c\u0131lar\u0131n bir web sitesini a\u00e7\u0131k tutmadan veya hatta taray\u0131c\u0131y\u0131 kullanmadan bile bildirim almalar\u0131na olanak tan\u0131r. Bu, \u00f6zellikle haber siteleri, sosyal medya platformlar\u0131 veya e-ticaret uygulamalar\u0131 i\u00e7in yeni i\u00e7erik, mesaj veya kampanya duyurular\u0131 yapmak amac\u0131yla son derece faydal\u0131d\u0131r. Push bildirimleri, bir Service Worker taraf\u0131ndan yakalan\u0131r ve i\u015flenir.<\/p>\n <\/code><\/p>\n Service Worker'lar\u0131 s\u0131f\u0131rdan yazmak, \u00f6zellikle karma\u015f\u0131k \u00f6nbellekleme stratejileri ve ileri d\u00fczey \u00f6zellikler uygularken olduk\u00e7a zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k olabilir. \u0130\u015fte tam da bu noktada Google taraf\u0131ndan geli\u015ftirilen Workbox k\u00fct\u00fcphanesi devreye girer. Workbox, Service Worker geli\u015ftirmeyi basitle\u015ftiren bir dizi mod\u00fcler ara\u00e7 ve k\u00fct\u00fcphane sunar. \u00d6n tan\u0131ml\u0131 \u00f6nbellekleme stratejileri, rota tan\u0131mlama, \u00e7evrimd\u0131\u015f\u0131 senkronizasyon ve bildirim y\u00f6netimi gibi bir\u00e7ok \u00f6zelli\u011fi kolayca entegre etmenizi sa\u011flar.<\/p>\n <\/code><\/p>\n Bu Workbox yap\u0131land\u0131rma \u00f6rne\u011fi, derleme zaman\u0131nda otomatik olarak bir Service Worker dosyas\u0131 ( Bu ileri d\u00fczey \u00f6zellikler, web uygulaman\u0131z\u0131n potansiyelini katlayarak, kullan\u0131c\u0131lara mobil uygulamalardan bekledikleri zengin ve kesintisiz deneyimi web ortam\u0131nda sunman\u0131z\u0131 sa\u011flar. Ancak bu \u00f6zelliklerin her birinin kendine \u00f6zg\u00fc karma\u015f\u0131kl\u0131klar\u0131 ve en iyi uygulama y\u00f6ntemleri oldu\u011funu unutmamak \u00f6nemlidir. Kapsaml\u0131 testler ve do\u011fru entegrasyon, ba\u015far\u0131n\u0131n anahtar\u0131d\u0131r.<\/p>\n G\u00fcn\u00fcm\u00fczde web trafi\u011finin b\u00fcy\u00fck bir k\u0131sm\u0131 mobil cihazlardan geliyor ve bu durum, web geli\u015ftiricileri i\u00e7in mobil uyumlulu\u011fun sadece bir l\u00fcks de\u011fil, bir zorunluluk oldu\u011funu g\u00f6steriyor. Service Worker'lar, mobil cihazlarda web sitelerinin performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in muazzam bir potansiyel sunar. Responsive tasar\u0131m ilkeleriyle birle\u015fti\u011finde, Service Worker'lar sayesinde kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131, h\u0131zl\u0131 ve g\u00fcvenilir bir mobil deneyim sunabilirsiniz.<\/p>\n Mobil cihazlar genellikle daha yava\u015f internet ba\u011flant\u0131lar\u0131na ve daha s\u0131n\u0131rl\u0131 i\u015flem g\u00fcc\u00fcne sahiptir. Service Worker'lar bu s\u0131n\u0131rlamalar\u0131 a\u015fmada kritik bir rol oynar:<\/p>\n Responsive tasar\u0131m, i\u00e7eri\u011fin farkl\u0131 ekran boyutlar\u0131na ve cihazlara uyum sa\u011flamas\u0131 prensibidir. Service Worker'lar, responsive tasar\u0131m\u0131n performans boyutunu g\u00fc\u00e7lendirir. \u00d6rne\u011fin, farkl\u0131 ekran boyutlar\u0131 i\u00e7in optimize edilmi\u015f farkl\u0131 g\u00f6rsel boyutlar\u0131n\u0131 \u00f6nbelle\u011fe alabilir ve Service Worker'\u0131n Media query'ler, responsive tasar\u0131m\u0131n temelini olu\u015fturur. Service Worker'\u0131n\u0131zda, client taraf\u0131nda hangi medya sorgusunun ge\u00e7erli oldu\u011funu belirleyip ona g\u00f6re farkl\u0131 kaynaklar y\u00fcklemek m\u00fcmk\u00fcnd\u00fcr. Ancak bu t\u00fcr bir mant\u0131\u011f\u0131 do\u011frudan Service Worker'\u0131n i\u00e7ine yerle\u015ftirmek karma\u015f\u0131kl\u0131\u011f\u0131 art\u0131rabilir. Genellikle, Service Worker, taray\u0131c\u0131 taraf\u0131ndan zaten yap\u0131lan responsive se\u00e7imlerin (\u00f6rne\u011fin <\/code><\/p>\n Yukar\u0131daki CSS \u00f6rne\u011finde, farkl\u0131 ekran boyutlar\u0131 i\u00e7in farkl\u0131 arka plan g\u00f6rselleri tan\u0131mlanm\u0131\u015ft\u0131r. Service Worker bu g\u00f6rselleri ( Mobil uyumlu bir Service Worker deneyimi sa\u011flaman\u0131n kritik bir par\u00e7as\u0131, performans\u0131n\u0131z\u0131 d\u00fczenli olarak \u00f6l\u00e7mek ve optimize etmektir. Google Lighthouse gibi ara\u00e7lar, web sitenizin performans\u0131n\u0131, eri\u015filebilirli\u011fini, en iyi uygulamalar\u0131n\u0131 ve PWA puan\u0131n\u0131 de\u011ferlendirmek i\u00e7in harika bir yoldur. Lighthouse raporlar\u0131, Service Worker'\u0131n\u0131z\u0131n ne kadar etkili \u00e7al\u0131\u015ft\u0131\u011f\u0131na ve mobil kullan\u0131c\u0131lar i\u00e7in neler yapabilece\u011finize dair de\u011ferli bilgiler sunar.<\/p>\n Bu metrikleri d\u00fczenli olarak takip ederek, Service Worker yap\u0131land\u0131rman\u0131z\u0131n mobil cihazlarda ger\u00e7ek d\u00fcnya performans\u0131na nas\u0131l etki etti\u011fini anlayabilir ve gerekli ayarlamalar\u0131 yapabilirsiniz. Hatta Workbox gibi k\u00fct\u00fcphaneler, Service Worker'lar\u0131n\u0131zda runtime loglar\u0131 ve hata takibi i\u00e7in entegrasyonlar sunarak performans izleme s\u00fcrecini kolayla\u015ft\u0131r\u0131r.<\/p>\n Mobil uyumlu Service Worker deneyimi, web sitenizin modern internetin taleplerini kar\u015f\u0131lamas\u0131n\u0131 ve geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fmas\u0131n\u0131 sa\u011flar. Performans optimizasyonlar\u0131, \u00e7evrimd\u0131\u015f\u0131 yetenekler ve duyarl\u0131 tasar\u0131m\u0131n birle\u015fimiyle, kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in hem h\u0131zl\u0131 hem de g\u00fcvenilir bir deneyim yaratabilirsiniz.<\/p>\n Service Worker'lar, modern web geli\u015ftirmenin vazge\u00e7ilmez, d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc ve bir o kadar da karma\u015f\u0131k bile\u015fenleridir. Bu rehberde g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, do\u011fru uyguland\u0131klar\u0131nda web sitenizin performans\u0131n\u0131, g\u00fcvenilirli\u011fini ve \u00e7evrimd\u0131\u015f\u0131 yeteneklerini devrim niteli\u011finde art\u0131rabilirler. Kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunarak, a\u011f ba\u011flant\u0131s\u0131 zay\u0131f oldu\u011funda bile sitenizin eri\u015filebilir kalmas\u0131n\u0131 sa\u011flarlar. Ancak, yanl\u0131\u015f yap\u0131land\u0131r\u0131ld\u0131klar\u0131nda veya g\u00fcncelleme d\u00f6ng\u00fcleri do\u011fru y\u00f6netilmedi\u011finde, sitenizi adeta rehin alabilir, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n eski i\u00e7erikleri g\u00f6rmesine neden olabilir ve sizi ciddi sorunlarla ba\u015f ba\u015fa b\u0131rakabilirler.<\/p>\n Bu \"rehin alma\" senaryosundan ka\u00e7\u0131nman\u0131n anahtar\u0131, Service Worker ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc, \u00f6nbellekleme stratejilerini ve hata ay\u0131klama tekniklerini derinlemesine anlamakt\u0131r. Geli\u015ftirici ara\u00e7lar\u0131n\u0131 etkin bir \u015fekilde kullanmak, Service Worker'lar sayesinde, web uygulamalar\u0131 art\u0131k basit sayfalar olmaktan \u00e7\u0131k\u0131p, mobil uygulamalara rakip olabilecek zengin ve yetenekli deneyimler sunabiliyor. \u00c7evrimd\u0131\u015f\u0131 senkronizasyon, anl\u0131k bildirimler ve optimize edilmi\u015f y\u00fckleme s\u00fcreleri ile kullan\u0131c\u0131lar\u0131n\u0131za ger\u00e7ek anlamda \u00fcst\u00fcn bir web deneyimi ya\u015fatabilirsiniz. Bu teknolojiyi benimserken dikkatli olmak, kapsaml\u0131 testler yapmak ve s\u00fcrekli \u00f6\u011frenmeye a\u00e7\u0131k olmak, sitenizin kontrol\u00fcn\u00fc her zaman elinizde tutman\u0131z\u0131 ve Service Worker'lar\u0131n g\u00fcc\u00fcn\u00fc kendi lehinize kullanman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n 1. Service Worker nedir ve ne i\u015fe yarar?<\/strong> 2. Service Worker'lar neden bazen siteleri \"rehin alabilir\"?<\/strong> 3. Service Worker'\u0131m\u0131 nas\u0131l g\u00fcncellerim ve eski versiyonlardan nas\u0131l kurtulurum?<\/strong> 4. Service Worker'lar\u0131 hangi t\u00fcr sitelerde kullanmak daha avantajl\u0131d\u0131r?<\/strong> 5. Workbox k\u00fct\u00fcphanesi Service Worker geli\u015ftirmeye nas\u0131l yard\u0131mc\u0131 olur?<\/strong> <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Service Worker’lar\u0131n web sitenizi nas\u0131l etkiledi\u011fini, performans\u0131 nas\u0131l art\u0131rd\u0131\u011f\u0131n\u0131 ve potansiyel sorunlar\u0131 nas\u0131l \u00e7\u00f6zece\u011finizi ke\u015ffedin. Kapsaml\u0131 rehberimizle \u00e7evrimd\u0131\u015f\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34278","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nService Worker Kurulumu ve Temel Cache Stratejileri: Ad\u0131m Ad\u0131m Bir Rehber<\/h2>\n
1. Service Worker’\u0131 Kaydetme<\/h3>\n
\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('\/sw.js')\n .then(registration => {\n console.log('Service Worker ba\u015far\u0131yla kaydedildi:', registration.scope);\n })\n .catch(error => {\n console.error('Service Worker kaydedilemedi:', error);\n });\n });\n}\n<\/pre>\n'load'<\/code> olay\u0131) \/sw.js<\/code> yolundaki Service Worker beti\u011fini kaydetmeye \u00e7al\u0131\u015f\u0131r. scope<\/code> parametresi, Service Worker'\u0131n hangi URL yollar\u0131 i\u00e7in istekleri yakalayabilece\u011fini tan\u0131mlar. Varsay\u0131lan olarak, beti\u011fin bulundu\u011fu dizin ve alt\u0131ndaki t\u00fcm yollard\u0131r. K\u00f6k dizine kaydedilmesi (\/sw.js<\/code> gibi), t\u00fcm site i\u00e7in ge\u00e7erli olmas\u0131n\u0131 sa\u011flar.<\/p>\n2.
install<\/code> Olay\u0131n\u0131 Yakalama ve \u00d6nbelle\u011fe Alma<\/h3>\nsw.js<\/code>) i\u00e7inde, ilk olarak install<\/code> olay\u0131n\u0131 dinlememiz gerekir. Bu olay, Service Worker'\u0131n ilk kez y\u00fcklendi\u011fi ve taray\u0131c\u0131 taraf\u0131ndan etkinle\u015ftirilmeye haz\u0131rland\u0131\u011f\u0131 zamand\u0131r. Genellikle uygulaman\u0131z\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli olan statik kaynaklar\u0131 (HTML, CSS, JavaScript dosyalar\u0131, resimler, fontlar vb.) \u00f6nbelle\u011fe almak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\/\/ sw.js i\u00e7eri\u011fi\nconst CACHE_NAME = 'my-site-cache-v1';\nconst urlsToCache = [\n '\/',\n '\/index.html',\n '\/styles\/main.css',\n '\/scripts\/app.js',\n '\/images\/logo.png',\n '\/offline.html' \/\/ \u00c7evrimd\u0131\u015f\u0131 sayfa\n];\n\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => {\n console.log('\u00d6nbellek a\u00e7\u0131ld\u0131 ve dosyalar eklendi');\n return cache.addAll(urlsToCache);\n })\n );\n});\n<\/pre>\nCACHE_NAME<\/code> ile \u00f6nbelle\u011fimize bir isim ve versiyon veriyoruz. urlsToCache<\/code> dizisi, Service Worker y\u00fcklendi\u011finde \u00f6nbelle\u011fe al\u0131nacak kaynaklar\u0131 listeler. event.waitUntil()<\/code> metodu, Service Worker'\u0131n y\u00fckleme i\u015fleminin tamamlanmas\u0131n\u0131 bekler. caches.open()<\/code> ile \u00f6nbelle\u011fimizi a\u00e7ar\u0131z ve cache.addAll()<\/code> ile listeledi\u011fimiz t\u00fcm URL'leri \u00f6nbelle\u011fe ekleriz. Bu ad\u0131mda bir hata olursa (\u00f6rne\u011fin bir kaynak y\u00fcklenemezse), Service Worker'\u0131n kurulumu ba\u015far\u0131s\u0131z olur ve etkinle\u015ftirilmez.<\/p>\n3.
activate<\/code> Olay\u0131n\u0131 Yakalama ve Eski \u00d6nbellekleri Temizleme<\/h3>\nactivate<\/code> olay\u0131, yeni Service Worker'\u0131n etkinle\u015fti\u011fi ve eski Service Worker'\u0131n kald\u0131r\u0131ld\u0131\u011f\u0131 zamand\u0131r. Bu olay, genellikle eski \u00f6nbelleklerin temizlenmesi i\u00e7in kullan\u0131l\u0131r, b\u00f6ylece kullan\u0131c\u0131lar her zaman uygulaman\u0131n en g\u00fcncel versiyonunu g\u00f6r\u00fcr.<\/p>\n\n\/\/ sw.js i\u00e7eri\u011fi devam\u0131\nself.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheName !== CACHE_NAME) { \/\/ Yeni \u00f6nbellek d\u0131\u015f\u0131ndaki t\u00fcm \u00f6nbellekleri sil\n console.log('Eski \u00f6nbellek siliniyor:', cacheName);\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n \/\/ Yeni Service Worker'\u0131n hemen kontrol\u00fc almas\u0131n\u0131 sa\u011flar\n return self.clients.claim();\n});\n<\/pre>\ncaches.keys()<\/code> ile t\u00fcm mevcut \u00f6nbelleklerin isimlerini al\u0131r\u0131z. Ard\u0131ndan, Promise.all()<\/code> kullanarak, yeni Service Worker'\u0131n \u00f6nbelle\u011fi d\u0131\u015f\u0131ndaki t\u00fcm eski \u00f6nbellekleri sileriz. Bu, uygulaman\u0131n her zaman temiz ve g\u00fcncel bir \u00f6nbellekle \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. self.clients.claim()<\/code> metodu, yeni Service Worker'\u0131n hemen mevcut a\u00e7\u0131k sekmelerin kontrol\u00fcn\u00fc ele almas\u0131n\u0131 sa\u011flar, bu da sayfa yenileme veya kapatma beklemeden yeni versiyonun etkinle\u015fmesi anlam\u0131na gelir.<\/p>\n4.
fetch<\/code> Olay\u0131n\u0131 Yakalama ve \u00d6nbellekleme Stratejileri<\/h3>\nfetch<\/code> olay\u0131, Service Worker'\u0131n kalbidir. Taray\u0131c\u0131 herhangi bir a\u011f iste\u011fi yapt\u0131\u011f\u0131nda tetiklenir ve Service Worker'\u0131n bu iste\u011fi nas\u0131l ele alaca\u011f\u0131na dair stratejileri burada tan\u0131mlar\u0131z.<\/p>\na. Cache-First, then Network (\u00d6nce \u00d6nbellek, Sonra A\u011f)<\/h4>\n
\n\/\/ sw.js i\u00e7eri\u011fi devam\u0131\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n \/\/ \u00d6nbellekte e\u015fle\u015fme varsa, onu d\u00f6nd\u00fcr\n if (response) {\n console.log('\u00d6nbellekten servis ediliyor:', event.request.url);\n return response;\n }\n \/\/ \u00d6nbellekte yoksa, a\u011f\u0131 kullan\n console.log('A\u011fdan \u00e7ekiliyor:', event.request.url);\n return fetch(event.request).then(\n networkResponse => {\n \/\/ A\u011fdan gelen yan\u0131t\u0131 \u00f6nbelle\u011fe al\n return caches.open(CACHE_NAME).then(cache => {\n cache.put(event.request, networkResponse.clone());\n return networkResponse;\n });\n }\n ).catch(() => {\n \/\/ A\u011f iste\u011fi ba\u015far\u0131s\u0131z olursa ve offline.html \u00f6nbellekteyse, onu g\u00f6ster\n return caches.match('\/offline.html');\n });\n })\n );\n});\n<\/pre>\ncaches.match(event.request)<\/code> ile iste\u011fi \u00f6nbellekte ar\u0131yoruz. E\u011fer bir yan\u0131t bulursak, onu d\u00f6nd\u00fcr\u00fcyoruz. Bulamazsak, fetch(event.request)<\/code> ile a\u011fdan \u00e7ekmeye \u00e7al\u0131\u015f\u0131yoruz. A\u011fdan gelen yan\u0131t\u0131 \u00f6nbelle\u011fe almay\u0131 unutmamal\u0131y\u0131z (networkResponse.clone()<\/code> ile yan\u0131t\u0131n bir kopyas\u0131n\u0131 al\u0131yoruz, \u00e7\u00fcnk\u00fc bir yan\u0131t yaln\u0131zca bir kez kullan\u0131labilir). E\u011fer hem \u00f6nbellekte yoksa hem de a\u011fdan \u00e7ekilemezse (\u00e7evrimd\u0131\u015f\u0131 olma durumu gibi), \/offline.html<\/code> sayfas\u0131n\u0131 g\u00f6stermeyi deniyoruz. Bu, kullan\u0131c\u0131n\u0131n tamamen bo\u015f bir sayfa g\u00f6rmek yerine en az\u0131ndan bilgilendirici bir \u00e7evrimd\u0131\u015f\u0131 mesaj\u0131 almas\u0131n\u0131 sa\u011flar.<\/p>\nb. Network-First, then Cache (\u00d6nce A\u011f, Sonra \u00d6nbellek)<\/h4>\n
\n\/\/ sw.js i\u00e7eri\u011fi, fetch event listener i\u00e7inde farkl\u0131 bir strateji \u00f6rne\u011fi\nself.addEventListener('fetch', event => {\n \/\/ E\u011fer istek navigasyon iste\u011fiyse (sayfa y\u00fcklemesi), Network-First uygula\n if (event.request.mode === 'navigate' || event.request.url.includes('\/api\/')) {\n event.respondWith(\n fetch(event.request)\n .then(networkResponse => {\n \/\/ A\u011fdan gelen yan\u0131t\u0131 \u00f6nbelle\u011fe al\n return caches.open(CACHE_NAME).then(cache => {\n cache.put(event.request, networkResponse.clone());\n return networkResponse;\n });\n })\n .catch(() => {\n \/\/ A\u011f ba\u015far\u0131s\u0131z olursa \u00f6nbellekten al\n return caches.match(event.request)\n .then(cachedResponse => cachedResponse || caches.match('\/offline.html'));\n })\n );\n } else {\n \/\/ Di\u011fer t\u00fcm istekler i\u00e7in (resimler, CSS, JS gibi statik dosyalar), Cache-First uygula\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n return response || fetch(event.request)\n .then(networkResponse => {\n return caches.open(CACHE_NAME).then(cache => {\n cache.put(event.request, networkResponse.clone());\n return networkResponse;\n });\n })\n .catch(() => caches.match('\/offline.html'));\n })\n );\n }\n});\n<\/pre>\nCACHE_NAME<\/code> de\u011fi\u015fkenini art\u0131rarak (\u00f6rne\u011fin 'my-site-cache-v2') yeni bir \u00f6nbellek versiyonu olu\u015fturun. Bu, activate<\/code> olay\u0131n\u0131n eski \u00f6nbellekleri temizlemesini ve yeni kaynaklar\u0131n sorunsuz bir \u015fekilde y\u00fcklenmesini garanti eder.\n<\/div>\nEsir Al\u0131nan Sitenizi Kurtarma Operasyonu: Sorun Giderme ve G\u00fcncelleme Teknikleri<\/h3>\n
1. Geli\u015ftirici Ara\u00e7lar\u0131n\u0131 (DevTools) Etkin Kullanma<\/h4>\n
\n
2.
skipWaiting()<\/code> ve clients.claim()<\/code> Metotlar\u0131n\u0131 Anlamak ve Kullanmak<\/h4>\nself.skipWaiting()<\/code> ve self.clients.claim()<\/code> metotlar\u0131n\u0131 kullanabilirsiniz.<\/p>\n\n\/\/ sw.js i\u00e7eri\u011fi\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => cache.addAll(urlsToCache))\n .then(() => self.skipWaiting()) \/\/ Yeni Service Worker'\u0131n hemen y\u00fcklenmesini sa\u011flar\n );\n});\n\nself.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheName !== CACHE_NAME) {\n return caches.delete(cacheName);\n }\n })\n );\n }).then(() => self.clients.claim()) \/\/ Yeni Service Worker'\u0131n hemen mevcut istemcileri (sekmeleri) kontrol etmesini sa\u011flar\n );\n});\n<\/pre>\nself.skipWaiting()<\/code>: install<\/code> olay\u0131nda \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, yeni Service Worker'\u0131n 'waiting' a\u015famas\u0131n\u0131 atlamas\u0131n\u0131 ve hemen 'activating' a\u015famas\u0131na ge\u00e7mesini sa\u011flar. Bu, kullan\u0131c\u0131n\u0131n sayfay\u0131 kapatmas\u0131n\u0131 veya yenilemesini beklemeksizin yeni Service Worker'\u0131n daha h\u0131zl\u0131 devreye girmesine yard\u0131mc\u0131 olur.<\/p>\nself.clients.claim()<\/code>: activate<\/code> olay\u0131nda \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, yeni etkinle\u015fen Service Worker'\u0131n mevcut a\u00e7\u0131k sekmelerin kontrol\u00fcn\u00fc hemen ele almas\u0131n\u0131 sa\u011flar. Bu sayede, sayfalar yeniden y\u00fcklenmeden veya yeni sekme a\u00e7\u0131lmadan yeni Service Worker'\u0131n belirledi\u011fi davran\u0131\u015flar (\u00f6rne\u011fin \u00f6nbellekleme stratejileri) hemen uygulanmaya ba\u015flar. Bu iki metot, \u00f6zellikle kritik g\u00fcncellemeleri veya d\u00fczeltmeleri h\u0131zl\u0131 bir \u015fekilde da\u011f\u0131tmak istedi\u011finizde \u00e7ok de\u011ferlidir.<\/p>\n3. Versiyonlama ve G\u00fcncelleme Stratejileri<\/h4>\n
CACHE_NAME<\/code> de\u011fi\u015fkenini art\u0131rmak, eski \u00f6nbelleklerin activate<\/code> olay\u0131 s\u0131ras\u0131nda temizlenmesini sa\u011flar. Ayr\u0131ca, Service Worker beti\u011finizin kendisinin dosya ad\u0131n\u0131 de\u011fi\u015ftirmek (\u00f6rne\u011fin sw-v2.js<\/code>) de taray\u0131c\u0131n\u0131n yeni bir Service Worker oldu\u011funu anlamas\u0131na yard\u0131mc\u0131 olabilir.<\/p>\nCache-Control<\/code> ba\u015fl\u0131klar\u0131n\u0131 (\u00f6rne\u011fin no-cache, max-age=0, must-revalidate<\/code>) kulland\u0131\u011f\u0131n\u0131zdan emin olun. B\u00f6ylece taray\u0131c\u0131 her zaman en g\u00fcncel beti\u011fi kontrol eder.\n<\/div>\nconsole.log()<\/code> ifadesi kullanmaktan \u00e7ekinmeyin. Bu loglar, Service Worker'\u0131n hangi a\u015famada oldu\u011funu, hangi kaynaklar\u0131 \u00f6nbelle\u011fe ald\u0131\u011f\u0131n\u0131 veya hangi isteklere nas\u0131l yan\u0131t verdi\u011fini anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Unutmay\u0131n, Service Worker'lar g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r ve do\u011fru \u015fekilde y\u00f6netildiklerinde web sitenizi daha h\u0131zl\u0131, daha g\u00fcvenilir ve daha yetenekli hale getirirler. Ancak her g\u00fc\u00e7l\u00fc ara\u00e7 gibi, onlarla birlikte gelen sorumluluklar\u0131 da dikkatle yerine getirmeliyiz.<\/p>\n\u0130leri D\u00fczey Service Worker Kullan\u0131m\u0131: \u00c7evrimd\u0131\u015f\u0131 Senkronizasyon ve Bildirimler<\/h2>\n
1. Background Sync API ile \u00c7evrimd\u0131\u015f\u0131 Senkronizasyon<\/h3>\n
\n\/\/ sw.js i\u00e7eri\u011fi\nself.addEventListener('sync', event => {\n if (event.tag === 'sync-new-post') {\n event.waitUntil(syncNewPost()); \/\/ Fonksiyonu \u00e7a\u011f\u0131r\n }\n});\n\nfunction syncNewPost() {\n \/\/ IndexedDB'den bekleyen g\u00f6nderileri al\n return getPendingPostsFromIndexedDB()\n .then(posts => {\n return Promise.all(posts.map(post => {\n return fetch('\/api\/new-post', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(post)\n })\n .then(response => {\n if (response.ok) {\n \/\/ Ba\u015far\u0131l\u0131 olursa IndexedDB'den g\u00f6nderiyi sil\n return deletePostFromIndexedDB(post.id);\n }\n throw new Error('Senkronizasyon ba\u015far\u0131s\u0131z oldu.');\n });\n }));\n })\n .catch(error => {\n console.error('Arka plan senkronizasyon hatas\u0131:', error);\n \/\/ Hata durumunda tekrar denemek i\u00e7in bir sonraki senkronizasyonu planlayabiliriz\n \/\/ veya kullan\u0131c\u0131ya bildirim g\u00f6nderebiliriz.\n });\n}\n<\/pre>\nsync<\/code> olay\u0131n\u0131 dinler. event.tag<\/code>, senkronizasyon iste\u011fine verilen benzersiz bir etikettir ve hangi g\u00f6revin \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirlemek i\u00e7in kullan\u0131l\u0131r. syncNewPost()<\/code> fonksiyonu, IndexedDB gibi bir depolama alan\u0131ndan bekleyen verileri al\u0131r ve bunlar\u0131 a\u011f \u00fczerinden sunucuya g\u00f6ndermeye \u00e7al\u0131\u015f\u0131r. Ba\u015far\u0131l\u0131 olursa, veriler yerel depolamadan silinir. Bu \u00f6zellik, kullan\u0131c\u0131lar\u0131n internet ba\u011flant\u0131s\u0131 hakk\u0131nda endi\u015felenmeden uygulamayla etkile\u015fime devam etmelerini sa\u011flar, b\u00f6ylece veri kayb\u0131 riskini ortadan kald\u0131r\u0131r ve kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r.<\/p>\n2. Push API ile Web Bildirimleri<\/h3>\n
\n\/\/ sw.js i\u00e7eri\u011fi\nself.addEventListener('push', event => {\n const data = event.data ? event.data.json() : { title: 'Yeni Bildirim', body: 'Harika bir \u015feyler oldu!' };\n \n const options = {\n body: data.body,\n icon: '\/images\/icon-192x192.png',\n badge: '\/images\/badge-72x72.png',\n vibrate: [200, 100, 200],\n data: {\n url: data.url || '\/' \/\/ Bildirime t\u0131klan\u0131nca a\u00e7\u0131lacak URL\n }\n };\n\n event.waitUntil(\n self.registration.showNotification(data.title, options)\n );\n});\n\nself.addEventListener('notificationclick', event => {\n event.notification.close(); \/\/ Bildirimi kapat\n\n \/\/ Kullan\u0131c\u0131n\u0131n bildirime t\u0131klad\u0131\u011f\u0131nda ne yapaca\u011f\u0131n\u0131 belirle\n event.waitUntil(\n clients.openWindow(event.notification.data.url)\n );\n});\n<\/pre>\npush<\/code> olay dinleyicisi, sunucudan gelen push bildirimini al\u0131r. Bu bildirimle birlikte gelen veriler (event.data<\/code>) kullan\u0131larak bir bildirim ba\u015fl\u0131\u011f\u0131, g\u00f6vdesi ve se\u00e7enekleri (simge, titre\u015fim, veri vb.) belirlenir. self.registration.showNotification()<\/code> metodu, bu bildirimi kullan\u0131c\u0131ya g\u00f6sterir. notificationclick<\/code> olay\u0131 ise kullan\u0131c\u0131n\u0131n bildirime t\u0131klad\u0131\u011f\u0131nda tetiklenir ve genellikle ilgili URL'yi a\u00e7mak gibi bir eylemi tetikler.<\/p>\n3. Workbox K\u00fct\u00fcphanesi ile Geli\u015ftirme Kolayl\u0131\u011f\u0131<\/h3>\n
\n\/\/ workbox-config.js (derleme a\u015famas\u0131nda kullan\u0131l\u0131r)\nmodule.exports = {\n globDirectory: 'dist\/',\n globPatterns: [\n '**\/*.{html,js,css,png,jpg,gif,svg,json}'\n ],\n swDest: 'dist\/sw.js',\n clientsClaim: true,\n skipWaiting: true,\n runtimeCaching: [{\n urlPattern: \/\\.(?:png|jpg|jpeg|svg|gif)$\/,\n handler: 'CacheFirst',\n options: {\n cacheName: 'images-cache',\n expiration: {\n maxEntries: 50,\n maxAgeSeconds: 30 * 24 * 60 * 60, \/\/ 30 g\u00fcn\n },\n },\n },{\n urlPattern: \/https:\\\/\\\/api\\.example\\.com\\\/.*\/,\n handler: 'NetworkFirst',\n options: {\n cacheName: 'api-cache',\n expiration: {\n maxEntries: 20,\n maxAgeSeconds: 24 * 60 * 60, \/\/ 1 g\u00fcn\n },\n },\n }]\n};\n<\/pre>\nsw.js<\/code>) olu\u015fturur. Hangi dosyalar\u0131n \u00f6nbelle\u011fe al\u0131naca\u011f\u0131n\u0131 (globPatterns<\/code>), hangi \u00f6nbellekleme stratejilerinin uygulanaca\u011f\u0131n\u0131 (runtimeCaching<\/code>) ve hatta clientsClaim<\/code> ve skipWaiting<\/code> gibi ayarlar\u0131 bile kolayca tan\u0131mlayabilirsiniz. Workbox kullanarak, saatler s\u00fcrecek manuel Service Worker kodlama ve hata ay\u0131klama s\u00fcre\u00e7lerinden kurtularak projenizi \u00e7ok daha h\u0131zl\u0131 ilerletebilirsiniz.<\/p>\nMobil Uyumlu Service Worker Deneyimi: Responsive Tasar\u0131m ve Performans<\/h2>\n
1. Service Worker'lar\u0131n Mobil Performansa Etkisi<\/h3>\n
\n
2. Responsive Tasar\u0131m ve Service Worker Entegrasyonu<\/h3>\n
fetch<\/code> olay\u0131nda cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re do\u011fru g\u00f6rseli sunabilirsiniz. Ancak, genel olarak Service Worker'lar responsive tasar\u0131m mant\u0131\u011f\u0131n\u0131 do\u011frudan y\u00f6netmez; daha ziyade, responsive tasar\u0131m\u0131n daha h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131na yard\u0131mc\u0131 olurlar.<\/p>\n\n\/* styles\/main.css - \u00d6rnek Media Query *\/\n.hero-image {\n background-image: url('..\/images\/hero-desktop.jpg');\n height: 400px;\n}\n\n@media (max-width: 768px) {\n .hero-image {\n background-image: url('..\/images\/hero-tablet.jpg');\n height: 300px;\n }\n}\n\n@media (max-width: 480px) {\n .hero-image {\n background-image: url('..\/images\/hero-mobile.jpg');\n height: 200px;\n }\n}\n<\/pre>\nhero-desktop.jpg<\/code>, hero-tablet.jpg<\/code>, hero-mobile.jpg<\/code>) \u00f6nbelle\u011fine alarak, taray\u0131c\u0131n\u0131n do\u011fru g\u00f6rseli se\u00e7ti\u011finde, bu g\u00f6rselin h\u0131zl\u0131 bir \u015fekilde \u00f6nbellekten y\u00fcklenmesini sa\u011flar. Bu sayede, mobil kullan\u0131c\u0131lar gereksiz yere b\u00fcy\u00fck masa\u00fcst\u00fc g\u00f6rsellerini indirmek zorunda kalmaz.<\/p>\n3. Performans Metrikleri ve \u00d6l\u00e7\u00fcm\u00fc<\/h3>\n
\n
Sonu\u00e7: Service Worker G\u00fcc\u00fcn\u00fc Kontrol Alt\u0131na Al\u0131n<\/h2>\n
skipWaiting()<\/code> ve clients.claim()<\/code> gibi metotlar\u0131 do\u011fru yerde uygulamak, ve Workbox gibi yard\u0131mc\u0131 k\u00fct\u00fcphanelerden faydalanmak, bu g\u00fc\u00e7l\u00fc teknolojiyi kontrol alt\u0131nda tutman\u0131n temel yollar\u0131d\u0131r. Ayr\u0131ca, mobil uyumlulu\u011fu g\u00f6z ard\u0131 etmemek ve performans metriklerini d\u00fczenli olarak izlemek, Service Worker entegrasyonunuzun ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\nService Worker, web taray\u0131c\u0131n\u0131z ile a\u011f aras\u0131nda bir proxy g\u00f6revi g\u00f6ren, JavaScript ile yaz\u0131lm\u0131\u015f bir betiktir. Temel amac\u0131, \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme, a\u011f isteklerini yakalama ve programlama yoluyla manip\u00fcle etme, arka plan senkronizasyonu ve push bildirimleri gibi \u00f6zellikler sa\u011flayarak web uygulamalar\u0131n\u0131n performans\u0131n\u0131 ve \u00e7evrimd\u0131\u015f\u0131 yeteneklerini art\u0131rmakt\u0131r. Ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ayr\u0131 \u00e7al\u0131\u015f\u0131r, b\u00f6ylece sayfa performans\u0131n\u0131 etkilemez.<\/p>\n
\nService Worker'lar, yanl\u0131\u015f yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda veya g\u00fcncellemeler do\u011fru y\u00f6netilmedi\u011finde siteleri \"rehin alabilir\". Bu durum genellikle eski \u00f6nbelleklerin temizlenmemesi, hatal\u0131 \u00f6nbellekleme stratejileri (\u00f6rne\u011fin, dinamik i\u00e7erikleri daima \u00f6nbellekten servis etme) veya yeni Service Worker beti\u011finin etkinle\u015fememesi gibi nedenlerle ortaya \u00e7\u0131kar. Sonu\u00e7 olarak, kullan\u0131c\u0131lar sitenin eski bir s\u00fcr\u00fcm\u00fcn\u00fc veya g\u00fcncel olmayan i\u00e7erikleri g\u00f6rmeye devam edebilir.<\/p>\n
\nService Worker beti\u011finizde bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, genellikle \u00f6nbellek ad\u0131n\u0131z\u0131 (CACHE_NAME<\/code>) art\u0131rman\u0131z gerekir. Yeni bir Service Worker beti\u011fi taray\u0131c\u0131 taraf\u0131ndan indirildi\u011finde, install<\/code> ve ard\u0131ndan activate<\/code> olaylar\u0131 tetiklenir. activate<\/code> olay\u0131nda, yeni \u00f6nbellek ad\u0131 d\u0131\u015f\u0131ndaki t\u00fcm eski \u00f6nbellekleri silen bir kod blo\u011fu (caches.keys().then(cacheNames => ...)<\/code>) eklemek, eski versiyonlardan kurtulman\u0131z\u0131 sa\u011flar. Ayr\u0131ca, self.skipWaiting()<\/code> ve self.clients.claim()<\/code> metotlar\u0131, yeni Service Worker'\u0131n hemen etkinle\u015fmesine yard\u0131mc\u0131 olur.<\/p>\n
\nService Worker'lar, \u00f6zellikle Progressive Web Apps (PWA'lar), \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fma yetene\u011fine ihtiya\u00e7 duyan uygulamalar (\u00f6rne\u011fin not alma uygulamalar\u0131, \u00e7evrimd\u0131\u015f\u0131 okuyucular), haber ve blog siteleri gibi s\u0131k g\u00fcncellenen ancak \u00e7evrimd\u0131\u015f\u0131 eri\u015filebilirli\u011fin de \u00f6nemli oldu\u011fu platformlar, e-ticaret siteleri ve y\u00fcksek performans beklentisi olan her t\u00fcrl\u00fc web sitesi i\u00e7in olduk\u00e7a avantajl\u0131d\u0131r. Kullan\u0131c\u0131 deneyimini ve site h\u0131z\u0131n\u0131 iyile\u015ftirmek isteyen her proje i\u00e7in de\u011ferlendirilmelidir.<\/p>\n
\nWorkbox, Service Worker geli\u015ftirmeyi kolayla\u015ft\u0131ran bir dizi JavaScript k\u00fct\u00fcphanesi ve ara\u00e7lar\u0131d\u0131r. \u00d6nbellekleme stratejileri (CacheFirst, NetworkFirst vb.), rota tan\u0131mlama, \u00e7evrimd\u0131\u015f\u0131 senkronizasyon, push bildirimleri y\u00f6netimi gibi karma\u015f\u0131k Service Worker \u00f6zelliklerini daha az kodla ve daha g\u00fcvenli bir \u015fekilde uygulaman\u0131z\u0131 sa\u011flar. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, hata oran\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr ve Service Worker'lar\u0131n bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Workbox, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k PWA projelerinde vazge\u00e7ilmez bir yard\u0131mc\u0131d\u0131r.<\/p>\n