PWA Nedir? Web Sitesini Uygulama Gibi Yüklenebilir Yapmak

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 ve MDN'nin PWA rehberine göre yazıldı.

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.

{
  "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: <link rel="manifest" href="https://cilginyazilim.com/manifest.json">. 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:

// 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:

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 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:

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 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ı 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.