--- title: "PWA Nedir? Web Sitesini Uygulama Gibi Yüklenebilir Yapmak" url: "https://cilginyazilim.com/blog/pwa-nedir-web-sitesini-uygulama-gibi-yuklemek" description: "PWA nedir, bir web sitesi nasıl ana ekrana yüklenebilir olur? Chrome'un kurulum şartları, manifest dosyası, service worker ve iOS'ta kurulum adım adım." published: "2026-09-29T16:28:50+03:00" modified: "2026-09-29T16:43:50+03:00" author: "Çılgın Yazılım" category: "Mobil ve Oyun Geliştirme" tags: ["javascript", "önbellek", "mobil uygulama", "pwa", "offline-first", "cross-platform"] site: "Çılgın Yazılım" language: "tr" --- # PWA Nedir? Web Sitesini Uygulama Gibi Yüklenebilir Yapmak Bir siteyi ana ekrana yüklenebilir yapmak için mağaza hesabı gerekmez; bir JSON dosyası, iki simge ve HTTPS yeter. Çevrimdışı çalışması ise ayrı bir iştir. PWA (Progressive Web App), tarayıcının kurulabilir bir uygulama gibi davranmasına izin verdiği web sitesidir. Ana ekranda simgesi olur ve kendi penceresinde açılır. Bunun için gereken nedir? Mağaza hesabı değil: Chrome'un kurulumu kendiliğinden önermesi için HTTPS, doğru doldurulmuş bir manifest dosyası ve iki boyutta simge yeter. **Çevrimdışı çalışma kurulumun şartı değildir**; service worker ile eklenen ayrı bir yetenektir. Aşağıdaki adımlar, Chrome'un kurulum şartlarını anlatan [web.dev sayfasına](https://web.dev/articles/install-criteria) ve MDN'nin PWA rehberine göre yazıldı. ![Bir web sitesinin PWA olarak kurulabilmesi için gereken şartların listesi](https://cilginyazilim.com/uploads/blog/2026/09/pwa-nedir-web-sitesini-uygulama-gibi-yuklemek-ozet.png) *Kurulum önerisini manifest belirler, çevrimdışı çalışma ayrı bir iştir.* ## Adım 1: Siteyi HTTPS üzerinden sunun Tarayıcılar yalnız güvenli bağlamdaki bir siteyi kurulabilir sayar. Canlıda bu HTTPS demektir; geliştirirken `localhost` ya da `127.0.0.1` adresi de güvenli bağlam kabul edilir. Yani manifesti yerelde deneyebilirsiniz, ama yerel ağdaki başka bir cihazdan bilgisayarınızın IP adresiyle açtığınızda kurulum seçeneği çıkmaz. ## Adım 2: Manifest dosyasını yazın ve her sayfaya bağlayın PWA manifest nedir sorusunun cevabı kısa: uygulamanın adını, simgelerini ve nasıl açılacağını söyleyen bir JSON dosyası. Chrome, Edge ve Samsung Internet için şu alanlar zorunludur: `name` ya da `short_name`, 192 ve 512 piksellik simgeleri içeren `icons`, `start_url` ve `display`. `prefer_related_applications` ya hiç olmamalı ya da `false` olmalıdır. ```json { "name": "Örnek Mağaza", "short_name": "Mağaza", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#1f6feb", "icons": [ { "src": "/simgeler/192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/simgeler/512.png", "sizes": "512x512", "type": "image/png" } ] } ``` `display` alanı uygulamanın hangi pencerede açılacağını söyler. Chrome'un kurulum önermesi için değer `fullscreen`, `standalone` ya da `minimal-ui` olmalıdır; alan hiç yazılmazsa varsayılan `browser` olur ve şart sağlanmaz. Masaüstünde başlık çubuğunu uygulamaya açan `window-controls-overlay` ise `display` alanına değil, `display_override` dizisine yazılır. `standalone` adres çubuğu olmayan, ayrı bir uygulama penceresi açar; kullanıcıya "bu bir web sitesi" yerine "bu bir uygulama" hissini veren seçim budur. `start_url` ise simgeye dokunulduğunda açılacak adrestir. Oturum açılmış bir panel için ana sayfa yerine panelin kendisini yazmak, kullanıcıyı her açılışta bir tık kurtarır. Dosyayı sitenin kök klasörüne koyun ve her sayfanın `head` bölümüne bağlayın: ``. Dikkat: bağlantı tek bir sayfada değil, kurulumun başlayabileceği her sayfada olmalıdır. Bu sitenin kendi manifesti de aynı yapıda: `display` değeri `standalone` ve simgeler 72 pikselden 512 piksele kadar sekiz boyutta. ## Adım 3: Çevrimdışı sayfa için service worker ekleyin Service worker, sayfa ile ağ arasında duran bir JavaScript dosyasıdır. Chrome, Android'de 108, masaüstünde 112. sürümden beri kurulum için service worker aramıyor. Service worker'ın işi, kurulmuş site internet yokken açıldığında ne görüneceğidir: o yoksa Chrome (Android'de 109, masaüstünde 110. sürümden beri) yalnız uygulama simgesini ve bir çevrimdışı uyarısını gösteren varsayılan sayfayı açar, sizin içeriğiniz görünmez. En küçük kullanışlı örnek, tek bir çevrimdışı sayfayı önbelleğe alıp sayfa isteklerinde ağ başarısız olursa onu döndürmektir: ```javascript // sw.js — sitenin kök klasöründe const ONBELLEK = 'cevrimdisi-v1'; self.addEventListener('install', (olay) => { olay.waitUntil(caches.open(ONBELLEK).then((c) => c.add('/cevrimdisi.html'))); }); self.addEventListener('fetch', (olay) => { if (olay.request.mode !== 'navigate') return; // yalnız sayfa istekleri olay.respondWith( fetch(olay.request).catch(() => caches.match('/cevrimdisi.html')) ); }); ``` Dikkat: `/cevrimdisi.html` gerçekten var olmalı. `c.add()` 200 dışı bir yanıtta hata verir, `install` başarısız sayılır ve service worker hiç etkinleşmez. Önbellekte yalnız bu HTML durduğu için sayfanın stilini ve görsellerini dosyanın içine yazın. Dosyayı sayfadan kaydedin. Kök klasörde durması, service worker'ın tüm siteyi kapsaması içindir; standart bir CodeIgniter 4 kurulumunda bu klasör proje kökü değil `public/` klasörüdür: ```javascript if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } ``` Dikkat: bu örnek yalnız çevrimdışı sayfayı saklar. Sayfaları ya da API yanıtlarını önbelleğe almak ayrı bir karardır; neyin ne kadar süre saklanacağı için [önbellek stratejileri](https://cilginyazilim.com/blog/onbellek-stratejileri-ne-zaman-nerede-ne-kadar) yazısına bakabilirsiniz. ## Kurulum hangi tarayıcıda nasıl görünür? Chrome, şartlar sağlandıktan sonra kurulum önerisini ancak kullanıcı sayfayla etkileşince gösterir: web.dev'e göre en az bir tıklama ya da dokunma ve sayfada 30 saniye. Şartları sağlamayan bir sayfayı da kullanıcı masaüstü Chrome'da Diğer > Yayınla, kaydet ve paylaş > Sayfayı uygulama olarak yükle… yoluyla kurabilir; manifestin belirlediği, Chrome'un kurulumu adres çubuğundaki Yükle düğmesiyle kendiliğinden önerip önermeyeceğidir. Diğer tarayıcılarda durum farklıdır: | Ortam | Kurulum | | --- | --- | | Chrome, Edge, Samsung Internet | Manifest şartları sağlanınca adres çubuğundan ya da menüden | | iOS 16.4 ve sonrası | Safari, Chrome, Edge, Firefox ya da Orion'da paylaş menüsünden | | Safari, macOS Sonoma ve sonrası | Dosya > Dock'a Ekle (manifest olmasa da) | | Firefox masaüstü | Manifestle kurulum yok; Windows'ta 143 sürümünden beri site görev çubuğuna web uygulaması olarak sabitlenebiliyor | Tablodaki fark kurulumla da bitmiyor: iPhone'da Web Push bildirimi, iOS 16.4'ten beri yalnız ana ekrana eklenmiş web uygulamasına gelir, Safari sekmesinde açık siteye gelmez. Uygulamanın mağazada görünmesi ya da web'in açmadığı cihaz özelliklerine erişmesi gerekiyorsa karar değişir; bu seçimi [native mi, cross-platform mu](https://cilginyazilim.com/blog/mobil-uygulama-gelistirme-native-mi-cross-platform-mi) yazısı ayrıca ele alıyor. ## Test etmek: Chrome DevTools'ta Application paneli Siteyi Chrome'da açıp F12 ile geliştirici araçlarını açın ve Application paneline geçin. Manifest bölümü, tarayıcının dosyayı nasıl okuduğunu ve kurulumu engelleyen eksikleri listeler. Service workers bölümü, kaydın etkin olup olmadığını gösterir; buradaki Offline kutusunu işaretleyip sayfayı yenilediğinizde çevrimdışı sayfanızın açılması gerekir. Veriyi çevrimdışıyken de tutarlı saklamak istiyorsanız [offline-first uygulama tasarımı](https://cilginyazilim.com/blog/offline-first-mobil-uygulama-detaylar) sonraki adımdır. Chrome'un bir siteye kurulum önermesini service worker değil, manifest sağlar; service worker yalnız internet kesildiğinde ne görüneceğine karar verir. Bu yüzden işi iki ayrı adım olarak planlayın. Önce siteyi HTTPS'e alın, manifesti name, start_url, display ve 192/512 simgeleriyle yazıp her sayfaya bağlayın ve Application panelinin Manifest bölümünde uyarı kalmayana kadar düzeltin. Sonra yalnız cevrimdisi.html dosyasını saklayan service worker'ı ekleyip Offline kutusuyla deneyin; sayfaları ve API yanıtlarını önbelleğe almaya ancak bu çalıştıktan sonra geçin. Konunun derinlemesine anlatımı için: [MDN — Making PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable). ## Sıkça Sorulan Sorular ### PWA manifest nedir? Tarayıcıya sitenin uygulama olarak nasıl görüneceğini anlatan JSON dosyasıdır: adı, simgeleri, açılış adresi ve pencere biçimi burada yazar. Sayfalar ona head içindeki link rel="manifest" etiketiyle bağlanır ve her sayfada bu etiket bulunmalıdır. ### PWA desteği ne demek? Bir sitenin tarayıcı tarafından uygulama gibi kurulabilmesi demektir. Chrome, Edge ve Samsung Internet manifest şartları sağlanınca kurulum sunar; Firefox masaüstü manifestten kurulum sunmaz (Windows'ta 143 sürümünden beri siteyi görev çubuğuna sabitleme var), Safari ise macOS'ta Dock'a ekleme ile kurar. ### PWA çevrimdışı çalışır mı? Yalnız service worker bunu sağlayacak şekilde yazılmışsa. Kurulum için service worker gerekmez; ama service worker'ı olmayan kurulmuş bir site internet yokken açılınca Chrome yalnız uygulama simgesini ve bir çevrimdışı uyarısını gösteren varsayılan sayfayı açar, sitenizin içeriği görünmez. ### iPhone'da PWA nasıl yüklenir? iOS 16.4 ve sonrasında Safari, Chrome, Edge, Firefox ya da Orion'da sitenin paylaş menüsünden "Ana Ekrana Ekle" seçilir. iOS 16.3 ve öncesinde bu yalnız Safari'den yapılabiliyordu. --- Kaynak: [PWA Nedir? Web Sitesini Uygulama Gibi Yüklenebilir Yapmak](https://cilginyazilim.com/blog/pwa-nedir-web-sitesini-uygulama-gibi-yuklemek)