Web teknolojileri, kullan\u0131c\u0131 deneyimini zenginle\u015ftirme ve uygulama eri\u015filebilirli\u011fini art\u0131rma yolunda s\u00fcrekli evrim ge\u00e7irmektedir. Bu evrimin en \u00f6nemli duraklar\u0131ndan biri de Progressive Web Uygulamalar\u0131 (PWA’lar) olmu\u015ftur. PWA’lar, modern web yeteneklerini kullanarak kullan\u0131c\u0131lara yerel (native) uygulamalara benzer bir deneyim sunan web siteleridir. H\u0131z, g\u00fcvenilirlik ve etkile\u015fim yetenekleriyle \u00f6ne \u00e7\u0131kan PWA’lar, \u00f6zellikle React gibi g\u00fc\u00e7l\u00fc ve esnek bir JavaScript k\u00fct\u00fcphanesi ile birle\u015fti\u011finde, geli\u015ftiricilere muazzam bir potansiyel sunar. Bu makale, React kullanarak PWA geli\u015ftirmenin temellerini, avantajlar\u0131n\u0131, teknik detaylar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 derinlemesine inceleyecektir.<\/p>\n
Geleneksel web sitelerinin ve yerel mobil uygulamalar\u0131n g\u00fc\u00e7l\u00fc y\u00f6nlerini bir araya getiren PWA’lar, kullan\u0131c\u0131 deneyimini k\u00f6kten de\u011fi\u015ftiren bir paradigmay\u0131 temsil eder. Google taraf\u0131ndan ortaya at\u0131lan bu konsept, \u00fc\u00e7 ana s\u00fctun \u00fczerine in\u015fa edilmi\u015ftir: G\u00fcvenilirlik (Reliable), H\u0131z (Fast) ve Etkile\u015fim (Engaging).<\/p>\n
Bir PWA’n\u0131n en \u00e7arp\u0131c\u0131 \u00f6zelliklerinden biri, a\u011f ba\u011flant\u0131s\u0131 olmasa bile \u00e7al\u0131\u015fabilmesidir. Bu, Service Worker ad\u0131 verilen \u00f6zel bir JavaScript dosyas\u0131 sayesinde m\u00fcmk\u00fcn olur. Service Worker’lar, taray\u0131c\u0131 ile a\u011f aras\u0131nda bir proxy g\u00f6revi g\u00f6rerek a\u011f isteklerini yakalar ve \u00f6nbelle\u011fe al\u0131nm\u0131\u015f i\u00e7erikleri sunabilir. Bu sayede kullan\u0131c\u0131lar, \u00e7evrimd\u0131\u015f\u0131 olduklar\u0131nda veya zay\u0131f bir a\u011f ba\u011flant\u0131s\u0131na sahip olduklar\u0131nda bile uygulamaya eri\u015febilir, hatta belirli i\u015flevleri kullanmaya devam edebilirler. Bu g\u00fcvenilirlik, \u00f6zellikle ba\u011flant\u0131n\u0131n kesintili oldu\u011fu b\u00f6lgelerde veya seyahat halindeki kullan\u0131c\u0131lar i\u00e7in kritik bir avantajd\u0131r.<\/p>\n
PWA’lar, an\u0131nda y\u00fckleme s\u00fcreleri ve ak\u0131c\u0131 performans sunarak kullan\u0131c\u0131lar\u0131n bekleme s\u00fcrelerini minimuma indirir. Bu, performans optimizasyonlar\u0131, ak\u0131ll\u0131 \u00f6nbellekleme stratejileri ve modern web API’lerinin kullan\u0131m\u0131yla sa\u011flan\u0131r. H\u0131zl\u0131 y\u00fcklenen bir uygulama, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla etkile\u015fime ge\u00e7me olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 y\u00fckseltir. Google’\u0131n ara\u015ft\u0131rmalar\u0131, sayfa y\u00fckleme s\u00fcresindeki her saniye gecikmenin, kullan\u0131c\u0131lar\u0131n siteyi terk etme oran\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6stermektedir. PWA’lar, bu sorunu \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n
PWA’lar, yerel uygulamalar\u0131n sundu\u011fu zengin etkile\u015fim \u00f6zelliklerini web’e ta\u015f\u0131r. Bunlar aras\u0131nda ana ekrana eklenebilirlik, push bildirimleri ve cihaz donan\u0131m\u0131na eri\u015fim (\u00f6rne\u011fin kamera, konum) bulunur. Ana ekrana eklenen bir PWA, taray\u0131c\u0131 aray\u00fcz\u00fcnden ba\u011f\u0131ms\u0131z olarak tam ekran modunda \u00e7al\u0131\u015fabilir, bu da kullan\u0131c\u0131ya daha s\u00fcr\u00fckleyici bir deneyim sunar. Push bildirimleri ise kullan\u0131c\u0131lar\u0131 yeniden etkile\u015fime sokmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r; \u00f6rne\u011fin, yeni i\u00e7erik, \u00f6zel teklifler veya \u00f6nemli g\u00fcncellemeler hakk\u0131nda bilgi verebilir.<\/p>\n
React, bile\u015fen tabanl\u0131 mimarisi, sanal DOM’u ve geli\u015ftirici dostu ekosistemi sayesinde modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir tercihtir. Bu \u00f6zellikler, React’\u0131 PWA geli\u015ftirmek i\u00e7in de ideal bir aday yapar.<\/p>\n
React’\u0131n bile\u015fen tabanl\u0131 yap\u0131s\u0131, PWA’lar\u0131n mod\u00fcler ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde geli\u015ftirilmesine olanak tan\u0131r. Her bir UI par\u00e7as\u0131 ba\u011f\u0131ms\u0131z bir bile\u015fen olarak ele al\u0131nabilir, bu da kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r. Bu, \u00f6zellikle farkl\u0131 ekran boyutlar\u0131na ve cihazlara uyum sa\u011flamas\u0131 gereken duyarl\u0131 PWA’lar i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n
React genellikle Tek Sayfa Uygulamalar\u0131 (SPA) olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. SPA’lar, ilk y\u00fcklemeden sonra yaln\u0131zca gerekli verileri getirerek sayfa yenilemeleri olmadan i\u00e7eri\u011fi dinamik olarak g\u00fcnceller. Bu yap\u0131, PWA’lar\u0131n h\u0131zl\u0131 ve ak\u0131c\u0131 deneyim hedefleriyle do\u011fal bir uyum i\u00e7indedir. Service Worker’lar, SPA’lar\u0131n ilk y\u00fckleme h\u0131z\u0131n\u0131 daha da art\u0131rabilir ve \u00e7evrimd\u0131\u015f\u0131 eri\u015fim sa\u011flayarak kullan\u0131c\u0131 deneyimini zenginle\u015ftirebilir.<\/p>\n
React ekosistemi, routing (React Router), durum y\u00f6netimi (Redux, Context API), test ara\u00e7lar\u0131 ve build ara\u00e7lar\u0131 (Webpack, Babel) gibi PWA geli\u015ftirmeyi kolayla\u015ft\u0131ran bir\u00e7ok arac\u0131 i\u00e7erir. \u00d6zellikle Create React App (CRA), PWA \u00f6zelliklerini varsay\u0131lan olarak destekleyerek veya kolayca etkinle\u015ftirilebilecek \u015fekilde sunarak geli\u015ftiricilerin i\u015fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir.<\/p>\n
React ile bir PWA olu\u015fturman\u0131n en kolay yolu, Create React App (CRA) kullanmakt\u0131r. CRA, React uygulamalar\u0131 i\u00e7in \u00f6nceden yap\u0131land\u0131r\u0131lm\u0131\u015f bir geli\u015ftirme ortam\u0131 sunar ve PWA yeteneklerini entegre etmeyi olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\n
Yeni bir React projesi olu\u015ftururken PWA \u015fablonunu kullanabilirsiniz:<\/p>\n
npx create-react-app my-pwa --template cra-template-pwa<\/code><\/pre>\nAncak, varsay\u0131lan create-react-app<\/code> \u015fablonu da PWA yeteneklerini i\u00e7erir, sadece etkinle\u015ftirilmesi gerekir. Projenizi olu\u015fturduktan sonra, PWA \u00f6zelliklerini etkinle\u015ftirmek i\u00e7in src\/index.js<\/code> dosyas\u0131nda bulunan serviceWorkerRegistration.unregister()<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 serviceWorkerRegistration.register()<\/code> olarak de\u011fi\u015ftirmeniz yeterlidir.<\/p>\nBu i\u015flem, uygulaman\u0131z\u0131n serviceWorkerRegistration.js<\/code> dosyas\u0131nda tan\u0131mlanan Service Worker’\u0131 kaydetmesini sa\u011flar.<\/p>\nmanifest.json<\/code> Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\nBir PWA’n\u0131n temel bile\u015fenlerinden biri de manifest.json<\/code> dosyas\u0131d\u0131r. Bu dosya, taray\u0131c\u0131ya uygulaman\u0131z hakk\u0131nda bilgiler sa\u011flar ve ana ekrana eklendi\u011finde nas\u0131l g\u00f6r\u00fcnmesi ve davranmas\u0131 gerekti\u011fini tan\u0131mlar. CRA ile olu\u015fturulan projelerde bu dosya public<\/code> klas\u00f6r\u00fcnde bulunur.<\/p>\n\u00d6nemli manifest.json<\/code> alanlar\u0131 \u015funlard\u0131r:<\/p>\n* name<\/code>: Uygulaman\u0131n tam ad\u0131.
\n* short_name<\/code>: Ana ekranda veya uygulama ba\u015flat\u0131c\u0131larda g\u00f6r\u00fcnecek k\u0131sa ad.
\n* start_url<\/code>: Uygulama ba\u015flat\u0131ld\u0131\u011f\u0131nda a\u00e7\u0131lacak URL. Genellikle \/<\/code> olarak ayarlan\u0131r.
\n* display<\/code>: Uygulaman\u0131n nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini belirler (standalone<\/code>, fullscreen<\/code>, minimal-ui<\/code>, browser<\/code>). standalone<\/code> genellikle en iyi kullan\u0131c\u0131 deneyimini sunar.
\n* background_color<\/code>: Uygulama ba\u015flat\u0131l\u0131rken veya ana ekrandan a\u00e7\u0131l\u0131rken g\u00f6r\u00fcnen arka plan rengi.
\n* theme_color<\/code>: Taray\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn rengi (\u00f6rne\u011fin, adres \u00e7ubu\u011fu).
\n* icons<\/code>: Farkl\u0131 boyutlarda uygulama simgeleri dizisi. Bu simgeler, ana ekrana eklendi\u011finde, uygulama ba\u015flat\u0131c\u0131larda ve splash ekranlarda kullan\u0131l\u0131r.<\/p>\n\u00d6rnek bir manifest.json<\/code> dosyas\u0131:<\/p>\n{\n \"short_name\": \"My PWA\",\n \"name\": \"My Awesome Progressive Web App\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image\/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image\/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image\/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}<\/code><\/pre>\nBu dosyan\u0131n do\u011fru yap\u0131land\u0131r\u0131lmas\u0131, uygulaman\u0131z\u0131n bir PWA olarak alg\u0131lanmas\u0131 ve ana ekrana eklenebilmesi i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Service Worker’lar ile \u00c7evrimd\u0131\u015f\u0131 Deneyim Olu\u015fturma<\/h3>\n
Service Worker’lar, PWA’lar\u0131n kalbidir ve \u00e7evrimd\u0131\u015f\u0131 yetenekleri, push bildirimlerini ve arka plan senkronizasyonunu m\u00fcmk\u00fcn k\u0131lar. Bunlar, ana web sayfas\u0131ndan ayr\u0131 bir i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015fan JavaScript dosyalar\u0131d\u0131r.<\/p>\n
Service Worker Nedir?<\/h4>\n
Service Worker, taray\u0131c\u0131 ile a\u011f aras\u0131nda programlanabilir bir proxy g\u00f6revi g\u00f6r\u00fcr. Bu, geli\u015ftiricilerin a\u011f isteklerini programatik olarak kontrol etmelerine, \u00f6nbelle\u011fe alma stratejileri uygulamalar\u0131na ve hatta a\u011f ba\u011flant\u0131s\u0131 olmad\u0131\u011f\u0131nda bile i\u00e7erik sunmalar\u0131na olanak tan\u0131r. Service Worker’lar, web sayfas\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015ft\u0131klar\u0131 i\u00e7in kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc engellemez ve performans\u0131 etkilemezler.<\/p>\n
Kay\u0131t ve Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/h4>\n
Bir Service Worker’\u0131 kullanmak i\u00e7in \u00f6ncelikle onu kaydetmeniz gerekir. Bu genellikle uygulaman\u0131z\u0131n ana JavaScript dosyas\u0131nda (React’ta index.js<\/code>) yap\u0131l\u0131r:<\/p>\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('\/service-worker.js')\n .then(registration => {\n console.log('Service Worker kay\u0131tl\u0131:', registration);\n })\n .catch(error => {\n console.log('Service Worker kayd\u0131 ba\u015far\u0131s\u0131z:', error);\n });\n });\n}<\/code><\/pre>\nKay\u0131t ba\u015far\u0131l\u0131 olduktan sonra, Service Worker’\u0131n bir ya\u015fam d\u00f6ng\u00fcs\u00fc vard\u0131r:<\/p>\n
1. Install (Y\u00fckleme):<\/strong> Service Worker ilk kez kaydedildi\u011finde tetiklenir. Bu olayda, uygulaman\u0131n temel varl\u0131klar\u0131n\u0131 (HTML, CSS, JS dosyalar\u0131, resimler vb.) \u00f6nbelle\u011fe alabiliriz. Bu, uygulaman\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan ilk ad\u0131md\u0131r.<\/p>\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open('my-app-cache-v1')\n .then(cache => {\n return cache.addAll([\n '\/',\n '\/index.html',\n '\/static\/js\/bundle.js',\n '\/static\/css\/main.css',\n '\/logo192.png'\n ]);\n })\n );\n });<\/code><\/pre>\n2. Activate (Etkinle\u015ftirme):<\/strong> Yeni bir Service Worker y\u00fcklendikten ve eski Service Worker devre d\u0131\u015f\u0131 b\u0131rak\u0131ld\u0131ktan sonra tetiklenir. Bu olayda genellikle eski \u00f6nbellekleri temizleme i\u015flemleri yap\u0131l\u0131r, b\u00f6ylece uygulaman\u0131n her zaman g\u00fcncel varl\u0131klar\u0131 kullanmas\u0131 sa\u011flan\u0131r.<\/p>\nself.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheName !== 'my-app-cache-v1') {\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n });<\/code><\/pre>\n3. Fetch (Getirme):<\/strong> Uygulama bir a\u011f iste\u011fi yapt\u0131\u011f\u0131nda tetiklenir. Bu olay, Service Worker’\u0131n a\u011f trafi\u011fini ele ge\u00e7irmesini ve \u00f6nbellekleme stratejilerini uygulamas\u0131n\u0131 sa\u011flar.<\/p>\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n \/\/ \u00d6nbellekte varsa \u00f6nbellekten d\u00f6n\n if (response) {\n return response;\n }\n \/\/ \u00d6nbellekte yoksa a\u011fdan getir ve \u00f6nbelle\u011fe al\n return fetch(event.request).then(\n response => {\n if (!response || response.status !== 200 || response.type !== 'basic') {\n return response;\n }\n let responseToCache = response.clone();\n caches.open('my-app-cache-v1')\n .then(cache => {\n cache.put(event.request, responseToCache);\n });\n return response;\n }\n );\n })\n );\n });<\/code><\/pre>\n\u00d6nbellekleme Stratejileri<\/h4>\n
fetch<\/code> olay\u0131nda uygulayabilece\u011finiz \u00e7e\u015fitli \u00f6nbellekleme stratejileri vard\u0131r:<\/p>\n* Cache-first:<\/strong> \u00d6nce \u00f6nbelle\u011fe bak\u0131l\u0131r. E\u011fer kaynak \u00f6nbellekte varsa, oradan d\u00f6nd\u00fcr\u00fcl\u00fcr. Yoksa, a\u011fdan getirilir ve \u00f6nbelle\u011fe al\u0131n\u0131r. \u00c7evrimd\u0131\u015f\u0131 \u00f6ncelikli uygulamalar i\u00e7in idealdir.
\n* Network-first:<\/strong> \u00d6nce a\u011fdan getirmeye \u00e7al\u0131\u015f\u0131l\u0131r. A\u011f ba\u011flant\u0131s\u0131 yoksa veya istek ba\u015far\u0131s\u0131z olursa, \u00f6nbelle\u011fe bak\u0131l\u0131r.
\n* Cache-then-network:<\/strong> \u00d6nbellekten an\u0131nda yan\u0131t verilirken, ayn\u0131 anda a\u011fdan yeni bir s\u00fcr\u00fcm istenir. Yeni s\u00fcr\u00fcm geldi\u011finde, \u00f6nbellek g\u00fcncellenir ve kullan\u0131c\u0131ya bir sonraki istekte g\u00fcncel i\u00e7erik sunulur.
\n* Stale-while-revalidate:<\/strong> \u00d6nbellekten hemen bir yan\u0131t d\u00f6nd\u00fcr\u00fcl\u00fcrken, ayn\u0131 anda a\u011fdan g\u00fcncel bir s\u00fcr\u00fcm istenir. A\u011fdan gelen yeni s\u00fcr\u00fcm \u00f6nbelle\u011fi g\u00fcnceller, b\u00f6ylece bir sonraki istekte en g\u00fcncel i\u00e7erik sunulur. Bu, h\u0131zl\u0131 y\u00fckleme ve her zaman g\u00fcncel i\u00e7erik aras\u0131nda iyi bir denge sa\u011flar.<\/p>\nWorkbox:<\/strong> Google taraf\u0131ndan geli\u015ftirilen Workbox, Service Worker’lar\u0131 yazmay\u0131 ve y\u00f6netmeyi kolayla\u015ft\u0131ran bir k\u00fct\u00fcphaneler koleksiyonudur. CRA, varsay\u0131lan olarak Workbox’\u0131 kullan\u0131r ve Service Worker’\u0131 otomatik olarak olu\u015fturur. Geli\u015ftiricilerin \u00e7o\u011fu durumda Service Worker dosyas\u0131n\u0131 manuel olarak d\u00fczenlemesine gerek kalmaz, ancak daha karma\u015f\u0131k senaryolar i\u00e7in Workbox API’lerini kullanmak b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\nPerformans Optimizasyonlar\u0131<\/h3>\n
H\u0131z, PWA’lar\u0131n temel direklerinden biridir. React uygulamalar\u0131nda performans\u0131 art\u0131rmak i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131labilir:<\/p>\n
Kod B\u00f6lme (Code Splitting)<\/h4>\n
Uygulaman\u0131n tamam\u0131n\u0131 tek bir b\u00fcy\u00fck JavaScript paketi olarak y\u00fcklemek yerine, kod b\u00f6lme ile uygulaman\u0131n farkl\u0131 par\u00e7alar\u0131 (bile\u015fenler, rotalar) ayr\u0131 ayr\u0131 y\u00fcklenir. React’ta React.lazy()<\/code> ve Suspense<\/code> bu ama\u00e7la kullan\u0131l\u0131r. Bu, uygulaman\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nimport React, { Suspense, lazy } from 'react';\n\nconst About = lazy(() => import('.\/About'));\nconst Home = lazy(() => import('.\/Home'));\n\nfunction App() {\n return (\n \n Y\u00fckleniyor...<\/div>}>\n Resim Optimizasyonu<\/h4>\n
Resimler, web sayfalar\u0131n\u0131n en b\u00fcy\u00fck boyutlu varl\u0131klar\u0131 olabilir. Duyarl\u0131 resimler (srcset<\/code>), WebP gibi modern formatlar, tembel y\u00fckleme (lazy loading) ve CDN kullan\u0131m\u0131, resim y\u00fckleme s\u00fcrelerini optimize etmenin etkili yollar\u0131d\u0131r.<\/p>\nMinifikasyon ve S\u0131k\u0131\u015ft\u0131rma<\/h4>\n
Build ara\u00e7lar\u0131 (Webpack gibi), \u00fcretim ortam\u0131 i\u00e7in kodu otomatik olarak minifiye eder (gereksiz bo\u015fluklar\u0131 ve karakterleri kald\u0131r\u0131r) ve s\u0131k\u0131\u015ft\u0131r\u0131r (Gzip veya Brotli). Bu, dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcr ve a\u011f \u00fczerinden daha h\u0131zl\u0131 aktar\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n
Kritik CSS<\/h4>\n
Bir sayfan\u0131n ilk g\u00f6r\u00fcn\u00fcm alan\u0131 i\u00e7in kritik olan CSS’i do\u011frudan HTML i\u00e7ine g\u00f6mmek, taray\u0131c\u0131n\u0131n stil bilgilerini beklemeden i\u00e7eri\u011fi olu\u015fturmaya ba\u015flamas\u0131na olanak tan\u0131r. Bu, “First Contentful Paint” (\u0130lk \u0130\u00e7erikli Boyama) s\u00fcresini iyile\u015ftirir.<\/p>\n
Kurulabilirlik (Installability) ve Ana Ekrana Ekleme<\/h3>\n
PWA’lar\u0131n en \u00e7ekici \u00f6zelliklerinden biri, kullan\u0131c\u0131lar\u0131n favori web sitelerini mobil cihazlar\u0131n\u0131n ana ekran\u0131na yerel bir uygulama gibi ekleyebilmesidir. Bu, manifest.json<\/code> dosyas\u0131 ve Service Worker’\u0131n do\u011fru yap\u0131land\u0131r\u0131lmas\u0131yla sa\u011flan\u0131r.<\/p>\nTaray\u0131c\u0131lar, belirli ko\u015fullar kar\u015f\u0131land\u0131\u011f\u0131nda (\u00f6rne\u011fin, uygulaman\u0131n HTTPS \u00fczerinden sunulmas\u0131, bir manifest dosyas\u0131na sahip olmas\u0131, Service Worker’\u0131n kay\u0131tl\u0131 olmas\u0131 ve belirli bir s\u00fcre kullan\u0131lmas\u0131) otomatik olarak “Ana Ekrana Ekle” (Add to Home Screen – A2HS) istemini tetikleyebilir. Geli\u015ftiriciler, bu istemi kendi UI’lar\u0131nda (\u00f6rne\u011fin bir buton) daha g\u00f6r\u00fcn\u00fcr hale getirerek kullan\u0131c\u0131lar\u0131 uygulamay\u0131 y\u00fcklemeye te\u015fvik edebilirler.<\/p>\n
\/\/ A2HS olay\u0131n\u0131 yakalama\nlet deferredPrompt;\nwindow.addEventListener('beforeinstallprompt', (e) => {\n e.preventDefault(); \/\/ Varsay\u0131lan taray\u0131c\u0131 istemini engelle\n deferredPrompt = e; \/\/ Olay\u0131 daha sonra kullanmak \u00fczere sakla\n\n \/\/ Kullan\u0131c\u0131ya kendi y\u00fckleme butonunuzu g\u00f6sterin\n showInstallPromotion();\n});\n\nfunction showInstallPromotion() {\n \/\/ Y\u00fckleme butonunu g\u00f6ster\n const installButton = document.getElementById('installButton');\n if (installButton) {\n installButton.style.display = 'block';\n installButton.addEventListener('click', () => {\n \/\/ Taray\u0131c\u0131 istemini tetikle\n deferredPrompt.prompt();\n \/\/ Kullan\u0131c\u0131n\u0131n yan\u0131t\u0131n\u0131 bekle\n deferredPrompt.userChoice.then((choiceResult) => {\n if (choiceResult.outcome === 'accepted') {\n console.log('Kullan\u0131c\u0131 PWAy\u0131 y\u00fckledi');\n } else {\n console.log('Kullan\u0131c\u0131 y\u00fcklemeyi reddetti');\n }\n deferredPrompt = null;\n });\n });\n }\n}<\/code><\/pre>\nAnl\u0131k Bildirimler (Push Notifications)<\/h3>\n
Push bildirimleri, kullan\u0131c\u0131lar\u0131 uygulamaya geri d\u00f6nd\u00fcrmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. PWA’larda push bildirimleri, Service Worker’lar arac\u0131l\u0131\u011f\u0131yla g\u00f6nderilir ve kullan\u0131c\u0131 izni gerektirir.<\/p>\n
1. Kullan\u0131c\u0131 \u0130zni \u0130steme:<\/strong> Uygulama, kullan\u0131c\u0131lardan bildirim g\u00f6nderme izni istemelidir. Bu genellikle Notification.requestPermission()<\/code> kullan\u0131larak yap\u0131l\u0131r.<\/p>\nNotification.requestPermission().then(permission => {\n if (permission === 'granted') {\n console.log('Bildirim izni verildi.');\n \/\/ Service Worker'a abone ol\n } else {\n console.log('Bildirim izni reddedildi.');\n }\n });<\/code><\/pre>\n2. Service Worker’a Abone Olma:<\/strong> \u0130zin verildikten sonra, Service Worker’\u0131 push bildirimleri i\u00e7in abone etmek gerekir. Bu i\u015flem, bir PushSubscription<\/code> nesnesi d\u00f6nd\u00fcr\u00fcr. Bu nesne, sunucunuza g\u00f6nderilerek bildirimlerin belirli bir kullan\u0131c\u0131ya y\u00f6nlendirilmesini sa\u011flar.<\/p>\nnavigator.serviceWorker.ready.then(serviceWorkerRegistration => {\n serviceWorkerRegistration.pushManager.subscribe({\n userVisibleOnly: true, \/\/ Kullan\u0131c\u0131ya g\u00f6r\u00fcn\u00fcr bildirimler\n applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY' \/\/ VAPID anahtar\u0131\n }).then(subscription => {\n \/\/ Abonelik nesnesini sunucuya g\u00f6nder\n console.log('Kullan\u0131c\u0131 abone oldu:', subscription);\n });\n });<\/code><\/pre>\n3. Sunucu Taraf\u0131 Entegrasyonu:<\/strong> Bildirimleri g\u00f6ndermek i\u00e7in bir sunucuya ihtiyac\u0131n\u0131z vard\u0131r. Sunucu, Web Push protokol\u00fcn\u00fc kullanarak abonelik nesnesine bildirim y\u00fck\u00fcn\u00fc (payload) g\u00f6nderir. VAPID (Voluntary Application Server Identification) anahtarlar\u0131, sunucunun kimli\u011fini do\u011frulamak i\u00e7in kullan\u0131l\u0131r.
\n4. Service Worker’da Bildirimi Alma:<\/strong> Service Worker, push<\/code> olay\u0131n\u0131 dinleyerek sunucudan gelen bildirimleri yakalar ve self.registration.showNotification()<\/code> kullanarak kullan\u0131c\u0131ya g\u00f6sterir.<\/p>\nself.addEventListener('push', event => {\n const data = event.data.json();\n const title = data.title || 'Yeni Bildirim';\n const options = {\n body: data.body || 'Uygulamadan yeni bir mesaj\u0131n\u0131z var.',\n icon: '\/logo192.png',\n badge: '\/badge.png'\n };\n event.waitUntil(self.registration.showNotification(title, options));\n });<\/code><\/pre>\nGeli\u015ftirme ve Hata Ay\u0131klama Ara\u00e7lar\u0131<\/h3>\n
PWA geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran ve hatalar\u0131 ay\u0131klamay\u0131 sa\u011flayan \u00e7e\u015fitli ara\u00e7lar mevcuttur:<\/p>\n
* Lighthouse:<\/strong> Google’\u0131n a\u00e7\u0131k kaynakl\u0131 bir denetim arac\u0131d\u0131r. Bir web sayfas\u0131n\u0131n performans\u0131n\u0131, eri\u015filebilirli\u011fini, en iyi uygulamalar\u0131n\u0131 ve PWA uygunlu\u011funu de\u011ferlendirir. Geli\u015ftiricilere iyile\u015ftirme alanlar\u0131 hakk\u0131nda detayl\u0131 raporlar sunar.
\n* Chrome DevTools:<\/strong> Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131, PWA geli\u015ftirmede paha bi\u00e7ilmezdir. \u00d6zellikle “Application” sekmesi, manifest.json<\/code>‘\u0131 incelemenize, Service Worker’lar\u0131 kaydetmenize\/kayd\u0131n\u0131 silmenize, \u00f6nbellek depolamas\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemenize ve push bildirimlerini test etmenize olanak tan\u0131r. “Network” sekmesinde a\u011f isteklerini ve Service Worker’\u0131n nas\u0131l davrand\u0131\u011f\u0131n\u0131 g\u00f6zlemleyebilirsiniz.
\n* Workbox CLI:<\/strong> Workbox k\u00fct\u00fcphanesini kullan\u0131yorsan\u0131z, komut sat\u0131r\u0131 aray\u00fcz\u00fc (CLI) Service Worker dosyalar\u0131n\u0131 olu\u015fturmak ve \u00f6nbellekleri y\u00f6netmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nReact PWA’lar\u0131 \u0130\u00e7in En \u0130yi Uygulamalar<\/h3>\n
* Offline-First Yakla\u015f\u0131m\u0131:<\/strong> Uygulaman\u0131z\u0131 her zaman \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015facak \u015fekilde tasarlay\u0131n. \u00d6nbellekleme stratejilerinizi bu prensibe g\u00f6re belirleyin.
\n* Duyarl\u0131 Tasar\u0131m:<\/strong> PWA’lar farkl\u0131 cihazlarda (mobil, tablet, masa\u00fcst\u00fc) sorunsuz \u00e7al\u0131\u015fmal\u0131d\u0131r. Duyarl\u0131 ve uyarlanabilir bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasarlay\u0131n.
\n* Performansa Odaklan\u0131n:<\/strong> H\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve ak\u0131c\u0131 etkile\u015fimler i\u00e7in s\u00fcrekli performans optimizasyonlar\u0131 yap\u0131n. Lighthouse puanlar\u0131n\u0131z\u0131 y\u00fcksek tutmaya \u00e7al\u0131\u015f\u0131n.
\n* Eri\u015filebilirlik (Accessibility):<\/strong> T\u00fcm kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 kullanabilmesini sa\u011flamak i\u00e7in eri\u015filebilirlik standartlar\u0131na uyun.
\n* HTTPS Kullan\u0131m\u0131:<\/strong> PWA’lar i\u00e7in HTTPS zorunludur. G\u00fcvenli bir ba\u011flant\u0131, Service Worker’lar\u0131n kayd\u0131 ve di\u011fer modern web API’lerinin kullan\u0131m\u0131 i\u00e7in gereklidir.
\n* Kullan\u0131c\u0131ya De\u011fer Kat\u0131n:<\/strong> PWA’n\u0131n sundu\u011fu ek \u00f6zelliklerin (\u00e7evrimd\u0131\u015f\u0131, bildirimler, ana ekrana ekleme) kullan\u0131c\u0131ya ger\u00e7ek bir de\u011fer katt\u0131\u011f\u0131ndan emin olun.
\n* D\u00fczenli Denetimler:<\/strong> Uygulaman\u0131z\u0131 d\u00fczenli olarak Lighthouse gibi ara\u00e7larla denetleyerek PWA kriterlerine uygunlu\u011funu ve performans\u0131n\u0131 takip edin.<\/p>\nSonu\u00e7<\/h3>\n
React ile Progressive Web Uygulamalar\u0131 geli\u015ftirmek, hem geli\u015ftiriciler hem de son kullan\u0131c\u0131lar i\u00e7in bir\u00e7ok avantaj sunan g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r. React’\u0131n bile\u015fen tabanl\u0131 yap\u0131s\u0131 ve zengin ekosistemi, PWA’lar\u0131n g\u00fcvenilir, h\u0131zl\u0131 ve etkile\u015fimli \u00f6zelliklerini hayata ge\u00e7irmeyi kolayla\u015ft\u0131r\u0131r. Service Worker’lar arac\u0131l\u0131\u011f\u0131yla \u00e7evrimd\u0131\u015f\u0131 yetenekler, manifest.json<\/code> ile ana ekrana eklenebilirlik ve push bildirimleri gibi \u00f6zellikler, web uygulamalar\u0131n\u0131 yerel uygulamalarla rekabet edebilir hale getirir.<\/p>\nPWA’lar, kullan\u0131c\u0131 deneyimini iyile\u015ftirirken i\u015fletmelere daha geni\u015f bir kitleye ula\u015fma, d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 art\u0131rma ve uygulama geli\u015ftirme maliyetlerini d\u00fc\u015f\u00fcrme f\u0131rsat\u0131 sunar. React’\u0131n sundu\u011fu esneklik ve performans optimizasyon yetenekleriyle birle\u015fti\u011finde, gelece\u011fin web uygulamalar\u0131n\u0131 in\u015fa etmek i\u00e7in ideal bir platform haline gelir. Bu makalede ele al\u0131nan teknikler ve en iyi uygulamalarla, React ile g\u00fc\u00e7l\u00fc ve etkileyici PWA’lar geli\u015ftirmeye haz\u0131rs\u0131n\u0131z. Web’in gelece\u011fi, PWA’larda yat\u0131yor ve React bu yolda size g\u00fc\u00e7l\u00fc bir yol arkada\u015f\u0131 olacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme\nWeb teknolojileri, kullan\u0131c\u0131 deneyimini zenginle\u015ftirme ve uygulama eri\u015filebilirli\u011fini","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":[128],"tags":[],"class_list":{"0":"post-30350","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme Web teknolojileri, kullan\u0131c\u0131 deneyimini zenginle\u015ftirme ve uygulama eri\u015filebilirli\u011fini\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-26T16:41:10+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme\",\"datePublished\":\"2025-09-26T16:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\"},\"wordCount\":2647,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\",\"name\":\"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-26T16:41:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/","og_locale":"tr_TR","og_type":"article","og_title":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme","og_description":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme Web teknolojileri, kullan\u0131c\u0131 deneyimini zenginle\u015ftirme ve uygulama eri\u015filebilirli\u011fini","og_url":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-26T16:41:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme","datePublished":"2025-09-26T16:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/"},"wordCount":2647,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/","url":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/","name":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-26T16:41:10+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-progressive-web-uygulamalari-pwa-gelistirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React ile Progressive Web Uygulamalar\u0131 (PWA) Geli\u015ftirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30350"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30350\/revisions"}],"predecessor-version":[{"id":30351,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30350\/revisions\/30351"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}