Geleneksel web sitelerinin s\u0131n\u0131rlar\u0131n\u0131 zorlayarak kullan\u0131c\u0131lar\u0131n\u0131za ger\u00e7ek bir uygulama deneyimi sunmak ister misiniz? WebForms Core 2 projenizi Progressive Web App (PWA) haline getirmek, Service Worker ile \u00e7evrimd\u0131\u015f\u0131 yetenekler kazand\u0131rmak ve Push Bildirimleri ile kullan\u0131c\u0131 etkile\u015fimini zirveye ta\u015f\u0131mak art\u0131k hayal de\u011fil. Bu kapsaml\u0131 rehberde, ASP.NET Core tabanl\u0131 WebForms uygulamalar\u0131n\u0131z\u0131 modern web’in en g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131yla donatarak, rakiplerinizden bir ad\u0131m \u00f6ne ge\u00e7menin yollar\u0131n\u0131 ke\u015ffedeceksiniz.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, ak\u0131c\u0131, h\u0131zl\u0131 ve kesintisiz deneyimler bekliyor. Eskiden, bu t\u00fcr deneyimler genellikle mobil uygulamalarla s\u0131n\u0131rl\u0131yd\u0131. Ancak, Native uygulamalar\u0131n geli\u015ftirme ve da\u011f\u0131t\u0131m maliyetleri, uygulama ma\u011fazalar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 ve kullan\u0131c\u0131lar\u0131n her web sitesi i\u00e7in bir uygulama indirme konusundaki isteksizli\u011fi, web geli\u015ftiricilerini yeni \u00e7\u00f6z\u00fcmler aramaya itti. \u0130\u015fte tam bu noktada, Progressive Web Uygulamalar\u0131 (PWA) sahneye \u00e7\u0131kt\u0131 ve web’in s\u0131n\u0131rlar\u0131n\u0131 yeniden tan\u0131mlad\u0131. Bir PWA, temelde modern web teknolojilerini kullanarak bir web sitesini uygulama benzeri \u00f6zelliklerle donatan bir yakla\u015f\u0131m\u0131 ifade eder. Peki, bu tam olarak ne anlama geliyor?<\/p>\n
Bir PWA’n\u0131n en \u00e7arp\u0131c\u0131 \u00f6zelliklerinden biri, internet ba\u011flant\u0131s\u0131 olmadan bile \u00e7al\u0131\u015fabilmesidir. D\u00fc\u015f\u00fcn\u00fcn ki, bir kullan\u0131c\u0131 metroda veya internetin olmad\u0131\u011f\u0131 bir b\u00f6lgede bile uygulaman\u0131z\u0131n temel i\u015flevlerine eri\u015febiliyor. Bu, Service Worker ad\u0131 verilen g\u00fc\u00e7l\u00fc bir teknoloji sayesinde m\u00fcmk\u00fcn olmaktad\u0131r. Ayr\u0131ca, PWA’lar cihaz\u0131n ana ekran\u0131na eklenebilir ve taray\u0131c\u0131 aray\u00fcz\u00fcnden ba\u011f\u0131ms\u0131z, tam ekran bir deneyim sunabilir. Bu sayede kullan\u0131c\u0131lar, uygulamalar\u0131n\u0131z\u0131 t\u0131pk\u0131 yerel bir uygulama gibi ba\u015flatabilir ve kullanabilirler. H\u0131z da PWA’lar\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r; daha h\u0131zl\u0131 y\u00fcklenme s\u00fcreleri ve ak\u0131c\u0131 animasyonlar sayesinde kullan\u0131c\u0131 memnuniyeti \u00f6nemli \u00f6l\u00e7\u00fcde artar. G\u00fcvenlik, bir PWA i\u00e7in kritik \u00f6neme sahiptir. T\u00fcm PWA’lar HTTPS \u00fczerinden sunulmak zorundad\u0131r, bu da veri g\u00fcvenli\u011fini ve kullan\u0131c\u0131 gizlili\u011fini garanti alt\u0131na al\u0131r.<\/p>\n
WebForms Core 2 geli\u015ftiricileri i\u00e7in bu, b\u00fcy\u00fck bir f\u0131rsat sunuyor. Mevcut ASP.NET Core WebForms projelerinizi, ek bir dil veya platform \u00f6\u011frenmeye gerek kalmadan, PWA standartlar\u0131na y\u00fckselterek kullan\u0131c\u0131lar\u0131n\u0131za \u00e7ok daha zengin bir deneyim sunabilirsiniz. \u00d6rne\u011fin, e-ticaret siteleri \u00fcr\u00fcn kataloglar\u0131n\u0131 \u00e7evrimd\u0131\u015f\u0131 \u00f6nbelle\u011fe alabilir, haber siteleri g\u00fcncel makaleleri internetsiz eri\u015fime a\u00e7abilir veya proje y\u00f6netim ara\u00e7lar\u0131, kullan\u0131c\u0131lar\u0131n g\u00f6revlerini internet ba\u011flant\u0131s\u0131 olmadan bile g\u00fcncellemelerine olanak tan\u0131yabilir. Bu, kullan\u0131c\u0131lar\u0131n mobil veya masa\u00fcst\u00fc cihazlar\u0131nda web uygulaman\u0131z\u0131 adeta yerel bir uygulama gibi hissetmelerini sa\u011flar, b\u00f6ylece uygulaman\u0131z\u0131n eri\u015filebilirli\u011fini ve kullan\u0131m oranlar\u0131n\u0131 art\u0131r\u0131r. K\u0131sacas\u0131, PWA’lar, web’in gelece\u011fidir ve WebForms Core 2 ile bu gelece\u011fi in\u015fa etmek art\u0131k \u00e7ok daha kolay.<\/p>\n
PWA’lar\u0131n sundu\u011fu bu devrim niteli\u011findeki avantajlar, kullan\u0131c\u0131lar\u0131n uygulamalarla etkile\u015fim \u015feklini temelden de\u011fi\u015ftirmektedir. Geli\u015ftiriciler i\u00e7in ise, tek bir kod taban\u0131yla birden fazla platformda (web, mobil) m\u00fckemmel bir deneyim sunma potansiyeli sunar. Bu da geli\u015ftirme s\u00fcre\u00e7lerini basitle\u015ftirirken, s\u00fcrd\u00fcr\u00fclebilirli\u011fi art\u0131r\u0131r. \u00d6zellikle WebForms Core 2 gibi olgunla\u015fm\u0131\u015f ve geni\u015f bir geli\u015ftirici kitlesine sahip bir platformda PWA yeteneklerini kullanmak, mevcut bilgi birikimini modern web standartlar\u0131yla birle\u015ftirmek anlam\u0131na gelir. B\u00f6ylece, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sadece bir web sitesini ziyaret etmek yerine, ger\u00e7ekten “y\u00fckleyebilecekleri” ve “kullanabilecekleri” bir uygulama deneyimi elde etmelerini sa\u011flam\u0131\u015f olursunuz. Bu sayede, uygulaman\u0131z\u0131n kullan\u0131c\u0131lar taraf\u0131ndan daha fazla benimsenmesi ve g\u00fcnl\u00fck rutinlerinin bir par\u00e7as\u0131 haline gelmesi ka\u00e7\u0131n\u0131lmaz olacakt\u0131r.<\/p>\n
WebForms Core 2 uygulamalar\u0131n\u0131z\u0131 bir PWA’ya d\u00f6n\u00fc\u015ft\u00fcrmenin kalbinde, Service Worker (Servis \u00c7al\u0131\u015fan\u0131) ad\u0131 verilen JavaScript tabanl\u0131 \u00f6zel bir komut dosyas\u0131 bulunur. E\u011fer PWA’lar s\u00fcper kahramanlarsa, Service Worker’lar onlar\u0131n gizli yeteneklerini sa\u011flayan beyinlerdir diyebiliriz. Peki, bu “gizli kahramanlar” tam olarak ne i\u015fe yarar ve bir WebForms Core 2 projesinde nas\u0131l hayat bulur?<\/p>\n
Service Worker, taray\u0131c\u0131 ile a\u011f aras\u0131nda oturan bir proxy g\u00f6revi g\u00f6r\u00fcr. Bu, uygulaman\u0131z\u0131n a\u011f isteklerini kontrol edebilece\u011fi ve hatta tamamen \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilmesi i\u00e7in kaynaklar\u0131 \u00f6nbelle\u011fe alabilece\u011fi anlam\u0131na gelir. Geleneksel web sitelerinde bir internet ba\u011flant\u0131s\u0131 kesildi\u011finde kullan\u0131c\u0131lar genellikle “internet yok” hatas\u0131yla kar\u015f\u0131la\u015f\u0131rd\u0131. Service Worker sayesinde, uygulaman\u0131z bu t\u00fcr senaryolarda bile kullan\u0131c\u0131ya \u00f6nbellekten hizmet vererek kesintisiz bir deneyim sunabilir. Bu, \u00f6zellikle WebForms Core 2 gibi dinamik i\u00e7erik sunan uygulamalar i\u00e7in, kullan\u0131c\u0131lar\u0131n verimlili\u011fini ve memnuniyetini art\u0131rmada kritik bir rol oynar.<\/p>\n
Bir Service Worker’\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc \u00fc\u00e7 ana a\u015famadan olu\u015fur: kay\u0131t (registration), kurulum (installation) ve aktivasyon (activation). \u0130lk olarak, web sayfan\u0131z Service Worker’\u0131 taray\u0131c\u0131ya kaydeder. Kay\u0131t ba\u015far\u0131l\u0131 oldu\u011funda, Service Worker indirilip kurulur. Kurulum a\u015famas\u0131nda, genellikle uygulaman\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli olan temel kaynaklar (HTML, CSS, JavaScript dosyalar\u0131, resimler vb.) taray\u0131c\u0131n\u0131n \u00f6nbelle\u011fine al\u0131n\u0131r. Bu “\u00f6nbelle\u011fe alma” i\u015flemi, uygulaman\u0131n daha sonra \u00e7evrimd\u0131\u015f\u0131 modda bile h\u0131zl\u0131ca y\u00fcklenmesini sa\u011flar. Kurulum tamamland\u0131ktan sonra, Service Worker aktive olur ve taray\u0131c\u0131n\u0131n a\u011f isteklerini dinlemeye ba\u015flar. Bu sayede, her a\u011f iste\u011fi \u00f6nce Service Worker’a ula\u015f\u0131r ve o, bu iste\u011fi nas\u0131l y\u00f6netece\u011fine karar verir: a\u011f\u0131 kullanarak m\u0131, yoksa \u00f6nbellekten mi yan\u0131t verecek?<\/p>\n
\u00d6rne\u011fin, bir WebForms Core 2 uygulamas\u0131nda, ana \u015fablon dosyan\u0131z\u0131, CSS dosyalar\u0131n\u0131z\u0131 ve ana JavaScript dosyalar\u0131n\u0131z\u0131 Service Worker ile \u00f6nbelle\u011fe alabilirsiniz. Kullan\u0131c\u0131 bu sayfay\u0131 ilk ziyaret etti\u011finde, bu kaynaklar indirilir ve \u00f6nbelle\u011fe al\u0131n\u0131r. Daha sonra, kullan\u0131c\u0131 internet ba\u011flant\u0131s\u0131 olmasa bile, ayn\u0131 sayfaya gitmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, Service Worker \u00f6nbellekten yan\u0131t vererek sayfan\u0131n an\u0131nda y\u00fcklenmesini sa\u011flar. Bu, yaln\u0131zca \u00e7evrimd\u0131\u015f\u0131 yetenek sa\u011flamakla kalmaz, ayn\u0131 zamanda internet ba\u011flant\u0131s\u0131 varken bile uygulaman\u0131n \u00e7ok daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayarak genel performans\u0131n\u0131 art\u0131r\u0131r. Geli\u015ftiriciler, \u00f6nbellekleme stratejilerini uygulaman\u0131n ihtiya\u00e7lar\u0131na g\u00f6re \u00f6zelle\u015ftirebilirler; \u00f6rne\u011fin, “\u00f6nce \u00f6nbellek, sonra a\u011f” (cache-first, then network) veya “\u00f6nce a\u011f, sonra \u00f6nbellek” (network-first, then cache) gibi farkl\u0131 yakla\u015f\u0131mlar mevcuttur. Bu esneklik, WebForms Core 2 geli\u015ftiricilerine, uygulamalar\u0131n\u0131n hem h\u0131zl\u0131 hem de dayan\u0131kl\u0131 olmas\u0131n\u0131 sa\u011flama g\u00fcc\u00fc verir.<\/p>\n
Service Worker’lar ayr\u0131ca arka plan senkronizasyonu ve push bildirimleri gibi di\u011fer modern web \u00f6zelliklerinin de temelini olu\u015fturur. Bu, WebForms Core 2 uygulamalar\u0131n\u0131z\u0131n sadece \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmakla kalmay\u0131p, ayn\u0131 zamanda kullan\u0131c\u0131larla daha etkile\u015fimli bir \u015fekilde ileti\u015fim kurabilmesini de sa\u011flar. K\u0131sacas\u0131, Service Worker’lar, WebForms Core 2 projelerinizi s\u0131radan bir web sitesinden, tam te\u015fekk\u00fcll\u00fc, dayan\u0131kl\u0131 ve modern bir uygulamaya d\u00f6n\u00fc\u015ft\u00fcren anahtar bile\u015fendir. Bu teknolojiyi anlamak ve do\u011fru bir \u015fekilde uygulamak, kullan\u0131c\u0131lar\u0131n\u0131za sunaca\u011f\u0131n\u0131z deneyimin kalitesini do\u011frudan etkileyecektir.<\/p>\n
Bir uygulaman\u0131n en b\u00fcy\u00fck zorluklar\u0131ndan biri, kullan\u0131c\u0131lar\u0131 uygulaman\u0131za geri d\u00f6nd\u00fcrmek ve onlarla s\u00fcrekli etkile\u015fim halinde kalmakt\u0131r. Kullan\u0131c\u0131lar bir kez uygulaman\u0131z\u0131 kapatt\u0131\u011f\u0131nda, onlar\u0131 tekrar \u00e7ekmek i\u00e7in genellikle pasif y\u00f6ntemler (e-posta, sosyal medya) kullan\u0131l\u0131r. Ancak Push Bildirimleri, bu etkile\u015fimi \u00e7ok daha do\u011frudan ve an\u0131nda hale getirerek WebForms Core 2 uygulamalar\u0131n\u0131za g\u00fc\u00e7l\u00fc bir ileti\u015fim kanal\u0131 kazand\u0131r\u0131r. Peki, Push Bildirimleri tam olarak nedir ve WebForms Core 2 projelerinizde nas\u0131l bir de\u011fer yarat\u0131r?<\/p>\n
Push Bildirimleri, kullan\u0131c\u0131 bir uygulamay\u0131 aktif olarak kullanmasa bile, ona do\u011frudan mesajlar veya uyar\u0131lar g\u00f6ndermenizi sa\u011flayan bir mekanizmad\u0131r. Bu bildirimler, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n ekran\u0131nda belirir ve dikkatini \u00e7ekerek uygulaman\u0131za geri d\u00f6nmesini te\u015fvik eder. \u00d6rne\u011fin, bir e-ticaret sitesi yeni bir indirim duyurusu yapabilir, bir haber uygulamas\u0131 son dakika haberlerini iletebilir veya bir takvim uygulamas\u0131 yakla\u015fan bir etkinli\u011fi hat\u0131rlatabilir. Bu do\u011frudan ileti\u015fim, kullan\u0131c\u0131 etkile\u015fimini, elde tutma oranlar\u0131n\u0131 ve sonu\u00e7 olarak i\u015f hedeflerine ula\u015fmay\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n
Push Bildirim sisteminin arkas\u0131nda karma\u015f\u0131k gibi g\u00f6r\u00fcnen ancak anla\u015f\u0131l\u0131r bir mimari yatar. S\u00fcre\u00e7, temel olarak \u00fc\u00e7 ana bile\u015fenden olu\u015fur: web uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 istemci (kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131), bildirimleri g\u00f6nderecek olan sunucunuz (WebForms Core 2 uygulaman\u0131z) ve arac\u0131 g\u00f6revi g\u00f6ren taray\u0131c\u0131ya \u00f6zg\u00fc push servis sa\u011flay\u0131c\u0131lar\u0131 (\u00f6rne\u011fin, Google’\u0131n FCM – Firebase Cloud Messaging veya Mozilla’n\u0131n MPS – Mozilla Push Service). \u0130lk olarak, kullan\u0131c\u0131 uygulaman\u0131za bildirim g\u00f6nderme izni verir. Bu izin verildikten sonra, taray\u0131c\u0131 bir abonelik nesnesi olu\u015fturur. Bu abonelik nesnesi, benzersiz bir u\u00e7 nokta URL’si (endpoint URL) ve bir dizi kimlik do\u011frulama anahtar\u0131 i\u00e7erir. Bu bilgiler daha sonra WebForms Core 2 sunucunuza g\u00f6nderilir ve g\u00fcvenli bir \u015fekilde depolan\u0131r.<\/p>\n
Bir bildirim g\u00f6ndermek istedi\u011finizde, WebForms Core 2 sunucunuz depolad\u0131\u011f\u0131 abonelik bilgilerini kullanarak taray\u0131c\u0131n\u0131n push servis sa\u011flay\u0131c\u0131s\u0131na \u015fifrelenmi\u015f bir mesaj g\u00f6nderir. Bu mesaj, genellikle bildirim ba\u015fl\u0131\u011f\u0131, i\u00e7eri\u011fi, simgesi gibi bilgileri i\u00e7erir. Push servis sa\u011flay\u0131c\u0131s\u0131, mesaj\u0131 ald\u0131ktan sonra, kullan\u0131c\u0131n\u0131n cihaz\u0131na iletir. Kullan\u0131c\u0131n\u0131n cihaz\u0131 \u00e7evrimi\u00e7i oldu\u011funda, bildirim hemen g\u00f6r\u00fcn\u00fcr. E\u011fer \u00e7evrimd\u0131\u015f\u0131ysa, bildirim taray\u0131c\u0131 taraf\u0131ndan depolan\u0131r ve kullan\u0131c\u0131 \u00e7evrimi\u00e7i oldu\u011funda teslim edilir. Bu kesintisiz teslimat mekanizmas\u0131, kullan\u0131c\u0131lar\u0131n \u00f6nemli bilgilere zaman\u0131nda ula\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
WebForms Core 2 geli\u015ftiricileri i\u00e7in Push Bildirimleri entegrasyonu, uygulaman\u0131n proaktif bir ileti\u015fim stratejisi geli\u015ftirmesine olanak tan\u0131r. \u00d6rne\u011fin, bir proje y\u00f6netim arac\u0131, bir g\u00f6revin tamamland\u0131\u011f\u0131n\u0131 veya bir son tarihin yakla\u015ft\u0131\u011f\u0131n\u0131 kullan\u0131c\u0131lara an\u0131nda bildirebilir. Bu, kullan\u0131c\u0131lar\u0131n uygulamaya s\u00fcrekli ba\u011fl\u0131 kalmas\u0131n\u0131 ve \u00f6nemli g\u00fcncellemeleri ka\u00e7\u0131rmamas\u0131n\u0131 sa\u011flar. Push Bildirimleri, ayn\u0131 zamanda kullan\u0131c\u0131 segmentasyonuna olanak tan\u0131r; yani belirli kullan\u0131c\u0131 gruplar\u0131na \u00f6zel, ki\u015fiselle\u015ftirilmi\u015f bildirimler g\u00f6nderebilirsiniz. Bu ki\u015fiselle\u015ftirme, bildirimlerin alaka d\u00fczeyini art\u0131r\u0131r ve kullan\u0131c\u0131lar\u0131n daha fazla etkile\u015fime ge\u00e7me olas\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltir. Sonu\u00e7 olarak, Push Bildirimleri, WebForms Core 2 uygulaman\u0131z\u0131n kullan\u0131c\u0131larla olan ba\u011f\u0131n\u0131 g\u00fc\u00e7lendirmenin ve onlara de\u011fer sunman\u0131n g\u00fc\u00e7l\u00fc bir yoludur.<\/p>\n
\u015eimdi teoriden prati\u011fe ge\u00e7me zaman\u0131! Mevcut bir WebForms Core 2 uygulamas\u0131n\u0131 bir Progressive Web App (PWA) haline getirmek, san\u0131ld\u0131\u011f\u0131 kadar karma\u015f\u0131k de\u011fildir. Bu b\u00f6l\u00fcmde, projenizi PWA standartlar\u0131na uygun hale getirmek i\u00e7in atman\u0131z gereken temel ad\u0131mlar\u0131, kod \u00f6rnekleriyle birlikte detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu s\u00fcre\u00e7, uygulaman\u0131z\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacak ve ana ekrana y\u00fcklenebilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r. Unutmay\u0131n, bu ad\u0131mlar\u0131 takip ederken, ASP.NET Core projenizin yap\u0131s\u0131n\u0131 ve dosya yollar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z \u00f6nemlidir.<\/p>\n
Bir PWA’n\u0131n kimli\u011fini belirleyen en \u00f6nemli bile\u015fenlerden biri Web Manifest dosyas\u0131d\u0131r. Bu dosya, uygulaman\u0131z\u0131n ad\u0131n\u0131, simgesini, ba\u015flang\u0131\u00e7 URL’sini, tema rengini ve ekran y\u00f6n\u00fcn\u00fc gibi meta verilerini tan\u0131mlar. Taray\u0131c\u0131lar ve i\u015fletim sistemleri, uygulaman\u0131z\u0131 ana ekrana eklerken veya PWA olarak tan\u0131rken bu dosyay\u0131 kullan\u0131r.<\/p>\n
wwwroot<\/code> klas\u00f6r\u00fcne manifest.json<\/code> ad\u0131nda yeni bir dosya ekleyin.<\/li>\n- Manifest \u0130\u00e7eri\u011fini Tan\u0131mlay\u0131n:<\/strong> A\u015fa\u011f\u0131daki JSON yap\u0131s\u0131n\u0131
manifest.json<\/code> dosyan\u0131za kopyalay\u0131n ve kendi uygulaman\u0131za g\u00f6re g\u00fcncelleyin.\n\n{\n \"name\": \"Benim WebForms PWA Uygulamam\",\n \"short_name\": \"WF PWA\",\n \"description\": \"ASP.NET Core WebForms tabanl\u0131 bir PWA \u00f6rne\u011fi.\",\n \"start_url\": \"\/\",\n \"display\": \"standalone\",\n \"background_color\": \"#ffffff\",\n \"theme_color\": \"#007bff\",\n \"icons\": [\n {\n \"src\": \"\/images\/icons\/icon-72x72.png\",\n \"sizes\": \"72x72\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-96x96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-128x128.png\",\n \"sizes\": \"128x128\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-152x152.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-384x384.png\",\n \"sizes\": \"384x384\",\n \"type\": \"image\/png\"\n },\n {\n \"src\": \"\/images\/icons\/icon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image\/png\"\n }\n ]\n}\n <\/pre>\n<\/code><\/p>\n
\n Uzman \u0130pucu: Farkl\u0131 boyutlardaki ikonlar\u0131 wwwroot\/images\/icons<\/code> klas\u00f6r\u00fcne eklemeyi unutmay\u0131n. Bu, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda ve ekran yo\u011funluklar\u0131nda iyi g\u00f6r\u00fcnmesini sa\u011flar. \u0130konlar olmadan PWA'n\u0131z ana ekrana eklenmeyebilir.\n <\/div>\n<\/li>\n- Manifest'i HTML'e Ba\u011flay\u0131n:<\/strong> Ana Layout dosyan\u0131z\u0131n (\u00f6rne\u011fin,
_Layout.cshtml<\/code> veya Master.cshtml<\/code> e\u011fer WebForms Core 2'de buna benzer bir yap\u0131 kullan\u0131yorsan\u0131z) <\/code> b\u00f6l\u00fcm\u00fcne a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekleyin.\n\n\n\n\n\n\n <\/pre>\n<\/code><\/p>\n
Bu meta etiketleri ve apple-touch-icon<\/code>, \u00f6zellikle iOS cihazlarda PWA deneyimini iyile\u015ftirmek i\u00e7in \u00f6nemlidir. apple-mobile-web-app-capable<\/code>, Safari'nin PWA'y\u0131 tam ekran modunda a\u00e7mas\u0131n\u0131 sa\u011flar.<\/p>\n<\/li>\n<\/ol>\nServis \u00c7al\u0131\u015fan\u0131n\u0131z\u0131 Entegre Etme ve \u00c7evrimd\u0131\u015f\u0131 Deneyim Olu\u015fturma<\/h3>\n
Service Worker, uygulaman\u0131z\u0131n \u00e7evrimd\u0131\u015f\u0131 yeteneklerinin ve h\u0131z optimizasyonlar\u0131n\u0131n temelini olu\u015fturur. \u015eimdi, Service Worker'\u0131 projenize nas\u0131l entegre edece\u011finizi ve temel \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme stratejilerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6relim.<\/p>\n
\n- Service Worker Dosyas\u0131n\u0131 Olu\u015fturun:<\/strong>
wwwroot<\/code> klas\u00f6r\u00fcn\u00fcze service-worker.js<\/code> ad\u0131nda yeni bir dosya ekleyin. Bu dosya, PWA'n\u0131z\u0131n beyinlerinden biri olacakt\u0131r.<\/li>\n- Service Worker \u0130\u00e7eri\u011fini Tan\u0131mlay\u0131n:<\/strong> A\u015fa\u011f\u0131daki kodu
service-worker.js<\/code> dosyan\u0131za kopyalay\u0131n. Bu kod, temel bir \u00f6nbellekleme stratejisi (cache-first, then network fallback) uygular.\n\nconst CACHE_NAME = 'my-pwa-cache-v1';\nconst urlsToCache = [\n '\/',\n '\/index', \/\/ Ana sayfan\u0131z\u0131n URL'si\n '\/css\/site.css',\n '\/js\/site.js',\n '\/images\/icons\/icon-192x192.png' \/\/ Manifest'teki ikonlardan biri\n \/\/ Uygulaman\u0131z\u0131n di\u011fer kritik statik kaynaklar\u0131n\u0131 buraya ekleyin\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 kaynaklar \u00f6nbelle\u011fe al\u0131nd\u0131.');\n return cache.addAll(urlsToCache);\n })\n .catch(error => {\n console.error('\u00d6nbelle\u011fe alma hatas\u0131:', error);\n })\n );\n});\n\nself.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.filter(cacheName => {\n return cacheName.startsWith('my-pwa-cache-') && cacheName !== CACHE_NAME;\n }).map(cacheName => {\n console.log(Eski \u00f6nbellek siliniyor: ${cacheName}<\/code>);\n return caches.delete(cacheName);\n })\n );\n })\n );\n});\n\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n \/\/ \u00d6nbellekte varsa do\u011frudan \u00f6nbellekten yan\u0131t ver\n if (response) {\n return response;\n }\n \/\/ \u00d6nbellekte yoksa a\u011f\u0131 dene\n return fetch(event.request)\n .then(networkResponse => {\n \/\/ A\u011fdan al\u0131nan yan\u0131t\u0131 \u00f6nbelle\u011fe al ve d\u00f6nd\u00fcr\n return caches.open(CACHE_NAME).then(cache => {\n \/\/ Yaln\u0131zca ba\u015far\u0131l\u0131 GET isteklerini \u00f6nbelle\u011fe al\n if (networkResponse.ok && event.request.method === 'GET') {\n cache.put(event.request, networkResponse.clone());\n }\n return networkResponse;\n });\n })\n .catch(() => {\n \/\/ Hem \u00f6nbellekte yoksa hem de a\u011f hatas\u0131 varsa, \u00e7evrimd\u0131\u015f\u0131 sayfay\u0131 g\u00f6ster\n \/\/ Bu k\u0131s\u0131m iste\u011fe ba\u011fl\u0131d\u0131r, \u00f6zel bir \u00e7evrimd\u0131\u015f\u0131 sayfan\u0131z varsa eklenebilir.\n \/\/ \u00d6rne\u011fin: return caches.match('\/offline.html');\n console.log('\u00c7evrimd\u0131\u015f\u0131: A\u011f veya \u00f6nbellekten yan\u0131t al\u0131namad\u0131.');\n });\n })\n );\n});\n <\/pre>\n<\/code><\/p>\n
\n \u0130pucu: urlsToCache<\/code> dizisine, uygulaman\u0131z\u0131n ilk y\u00fcklendi\u011finde \u00e7evrimd\u0131\u015f\u0131 olarak eri\u015filebilir olmas\u0131n\u0131 istedi\u011finiz t\u00fcm kritik URL'leri ve kaynaklar\u0131 ekledi\u011finizden emin olun. Bu, \u00e7evrimd\u0131\u015f\u0131 deneyimin kalitesini do\u011frudan etkiler.\n <\/div>\n<\/li>\n- Service Worker'\u0131 Kaydedin:<\/strong> Uygulaman\u0131z\u0131n ana JavaScript dosyas\u0131nda (\u00f6rne\u011fin,
wwwroot\/js\/site.js<\/code>) veya do\u011frudan ana g\u00f6r\u00fcn\u00fcm\u00fcn\u00fcz\u00fcn <\/code> etiketinin sonuna yak\u0131n bir