Progressive Web Apps (PWA): Mobil Uygulamaya Alternatif mi? 2026

Progressive Web App (PWA), web uygulamasına kurulabilirlik, çevrimdışı davranış veya bildirim gibi uygulama benzeri yetenekler kazandırabilir. Bununla birlikte PWA, native uygulamanın otomatik olarak daha ucuz veya bire bir eşdeğer alternatifi değildir. Doğru karar; gerekli cihaz API'lerine, dağıtım kanalına, ekip yetkinliğine ve yaşam döngüsü maliyetine bağlıdır.

PWA Nedir?

MDN'nin PWA rehberi, PWA'yı tek bir teknoloji veya kesin bir özellik listesi olarak değil; web teknolojileriyle geliştirilen, aşamalı biçimde iyileştirilebilen bir uygulama yaklaşımı olarak açıklar. Tarayıcı ve işletim sistemi desteğine bağlı olarak bir PWA şunları yapabilir:

• Kurulabilir: Uygun manifest ve tarayıcı koşulları sağlandığında ana ekrana veya uygulama listesine eklenebilir
• Çevrimdışı davranış sunabilir: Önceden tasarlanmış ve test edilmiş cache politikalarıyla belirli akışlar ağ olmadan çalışabilir
• Bildirim kullanabilir: Push API ve kullanıcı izni bulunan ortamlarda bildirim alınabilir
• Bağımsız pencerede açılabilir: Manifest'teki görüntüleme modu desteklendiğinde tarayıcı sekmesinden ayrı çalışabilir
• Tek URL üzerinden güncellenebilir: Dağıtım merkezi olabilir; ancak service worker güncelleme yaşam döngüsü ayrıca yönetilmelidir

PWA'nın Teknik Yapı Taşları

1. Service Worker: Uygulamanın ağ isteklerini ve cache davranışını kontrol edebilen arka plan betiği. Yanlış politika eski veya kullanıcıya özel veriyi sunabileceği için kapsamı açıkça tanımlanmalıdır.
2. Web App Manifest: Uygulamanın adını, ikonlarını, tema rengini ve görüntüleme modunu tanımlayan JSON dosyası.
3. Güvenli bağlam: Service worker gibi güçlü API'ler HTTPS üzerinden kullanılmalıdır; geliştirmede localhost istisnası vardır.

Kurulabilirlik ölçütleri tarayıcıya göre değişebilir. Uygulamayı yayımlamadan önce MDN'nin kurulabilir PWA rehberindeki manifest, HTTPS ve tarayıcı uyumluluğu kontrolleri uygulanmalıdır.

Native Uygulama ve PWA Karşılaştırması

2026'da PWA Desteği

• Chromium tabanlı tarayıcılar manifest, service worker, kurulum ve bildirim akışlarının geniş bir bölümünü destekler; Bluetooth, NFC ve dosya sistemi gibi API'ler ayrıca kontrol edilmelidir.
• iOS ve iPadOS'ta ana ekrana eklenen web uygulamaları, iOS/iPadOS 16.4 ile Web Push desteği aldı. İzin yalnızca kullanıcı etkileşimi sonrasında istenebilir.
• Masaüstü tarayıcılardaki kurulum arayüzü ve bağımsız pencere davranışı ürün/sürüm bazında değişir; hedef matriste test edilmelidir.
• Background Sync bütün yaygın tarayıcılarda aynı şekilde mevcut değildir; MDN bu API'yi sınırlı kullanılabilirlikte işaretler.

“PWA destekleniyor” ifadesi tek başına yeterli bir uyumluluk ölçütü değildir. Kurulum, push, background sync ve gereken cihaz API'leri hedef tarayıcı/sürüm matrisinde ayrı ayrı denenmelidir.

PWA Kurulum Rehberi (Next.js)

Adım 1: Web App Manifest

{
  "name": "Maviona Dijital Ajans",
  "short_name": "Maviona",
  "description": "Maviona web sitesi",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/home.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/screenshots/mobile.png",
      "sizes": "375x812",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ]
}

Adım 2: Service Worker

Bu örnek yalnızca aynı origin'deki herkese açık GET yanıtlarını ele alan, öğretici bir başlangıçtır. Kimlik doğrulamalı sayfalar, sepet, hesap verisi ve kişiselleştirilmiş API yanıtları açık bir cache tasarımı olmadan service worker cache'ine yazılmamalıdır.

// service-worker.ts
const CACHE_PREFIX = "maviona-";
const CACHE_NAME = `${CACHE_PREFIX}v1`;
const STATIC_ASSETS = [
  "/offline",
  "/icons/icon-192x192.png",
  "/icons/icon-512x512.png",
];
const PUBLIC_DOCUMENT_PATHS = new Set([
  "/",
  "/hizmetler",
  "/hakkimizda",
  "/iletisim",
]);

// Kurulum — statik dosyaları önbelleğe al
self.addEventListener("install", (event: ExtendableEvent) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
});

// Aktivasyon — eski cache'leri temizle
self.addEventListener("activate", (event: ExtendableEvent) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter(
            (key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME
          )
          .map((key) => caches.delete(key))
      );
    })
  );
});

// Fetch - yalnızca allowlist'teki herkese açık document istekleri
self.addEventListener("fetch", (event: FetchEvent) => {
  const request = event.request;
  const url = new URL(request.url);

  if (
    request.method !== "GET" ||
    url.origin !== self.location.origin ||
    request.mode !== "navigate" ||
    !PUBLIC_DOCUMENT_PATHS.has(url.pathname)
  ) {
    return;
  }

  event.respondWith(
    fetch(request)
      .then((response) => {
        if (!response.ok || response.type !== "basic") {
          return response;
        }

        const clone = response.clone();
        event.waitUntil(
          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone))
        );
        return response;
      })
      .catch(async () => {
        const cached = await caches.match(request);
        if (cached) return cached;

        if (request.mode === "navigate") {
          return (await caches.match("/offline")) ?? Response.error();
        }

        return Response.error();
      })
  );
});

Üretimde cache sürümleme, quota, hata telemetrisi, güncelleme bildirimi ve rota bazlı politikalar da gerekir. Next.js PWA rehberi temel güvenlik ve manifest akışını; Workbox rehberi ise test edilmiş service worker modüllerini açıklar. Kullanılan kütüphanenin güncel Next.js sürümüyle uyumluluğu ayrıca doğrulanmalıdır.

Adım 3: Next.js Metadata

// app/layout.tsx
import type { Metadata, Viewport } from "next";

export const viewport: Viewport = {
  themeColor: "#6366f1",
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
};

export const metadata: Metadata = {
  title: "Maviona Dijital Ajans",
  description: "Modern web çözümleri",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Maviona",
  },
  formatDetection: {
    telephone: true,
  },
};

Adım 4: Service Worker Kaydı

// components/PWARegister.tsx
"use client";

import { useEffect } from "react";

export function PWARegister() {
  useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("/sw.js")
        .then((reg) => {
          console.log("Service Worker registered:", reg.scope);
        })
        .catch((err) => {
          console.error("SW registration failed:", err);
        });
    }
  }, []);

  return null;
}

Önbellekleme Stratejileri

Strateji dosya uzantısına bakılarak topluca seçilmemelidir. HTTP cache başlıkları, CDN davranışı ve service worker cache'i birlikte tasarlanmalı; kullanıcıya özel yanıtların cache anahtarı ve silme politikası güvenlik incelemesinden geçmelidir.

Push Bildirim Entegrasyonu

Bildirim izni sayfa açılır açılmaz değil, kullanıcının bildirim talebini açıkladığı bir arayüz eyleminden sonra istenmelidir. Aşağıdaki basitleştirilmiş fonksiyon bu kullanıcı eyleminden çağrılmak üzere tasarlanmıştır:

async function subscribeToPush() {
  if (
    !("serviceWorker" in navigator) ||
    !("PushManager" in window) ||
    !("Notification" in window)
  ) {
    return null;
  }

  const permission = await Notification.requestPermission();
  if (permission !== "granted") return null;

  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: VAPID_PUBLIC_KEY,
  });

  const response = await fetch("/api/push/subscribe", {
    method: "POST",
    body: JSON.stringify(subscription),
    headers: { "Content-Type": "application/json" },
  });

  if (!response.ok) throw new Error("Push aboneliği kaydedilemedi");
  return subscription;
}

VAPID anahtarının tarayıcının beklediği formata dönüştürülmesi, aboneliğin kullanıcıyla yetkili biçimde ilişkilendirilmesi, abonelik iptali ve veri koruma yükümlülükleri bu kısa örneğin dışındadır.

// Service Worker'da push event'i
self.addEventListener("push", (event: PushEvent) => {
  let data: { title?: unknown; body?: unknown; url?: unknown } | undefined;

  try {
    data = event.data?.json();
  } catch {
    return;
  }

  if (typeof data?.title !== "string") return;
  const body = typeof data.body === "string" ? data.body : undefined;
  const url = typeof data.url === "string" && data.url.startsWith("/")
    ? data.url
    : "/";

  event.waitUntil(
    self.registration.showNotification(data.title, {
      body,
      icon: "/icons/icon-192x192.png",
      badge: "/icons/badge-72x72.png",
      data: { url },
      actions: [
        { action: "open", title: "Aç" },
        { action: "dismiss", title: "Kapat" },
      ],
    })
  );
});

self.addEventListener("notificationclick", (event: NotificationEvent) => {
  event.notification.close();
  if (event.action === "dismiss") return;

  const candidate = event.notification.data?.url;
  const path = typeof candidate === "string" && candidate.startsWith("/")
    ? candidate
    : "/";

  event.waitUntil(self.clients.openWindow(path));
});

Hipotetik Karar Örnekleri

Aşağıdaki örnekler gerçek Maviona müşterisi veya ölçülmüş başarı vakası değildir; gereksinim analizinin nasıl yapılabileceğini göstermek için oluşturulmuştur:

• İçerik kataloğu: Herkese açık sayfalar, zayıf bağlantıda tekrar okunmak isteniyor ve kritik cihaz API'si gerekmiyorsa kurulabilir PWA pilotu değerlendirilebilir.
• Saha formu: Ağ kesildiğinde veri kaybı kabul edilemiyorsa yalnızca sayfayı cache'lemek yetmez; yerel veri kuyruğu, çakışma çözümü ve hedef tarayıcılarda senkronizasyon testi gerekir.
• Yoğun cihaz entegrasyonu: Sürekli arka plan konumu, belirli Bluetooth profilleri veya mağaza dağıtımı kritikse native ya da hibrit seçenek için teknik prototip daha uygun olabilir.

PWA Ne Zaman Doğru Seçim?

PWA güçlü bir aday olabilir, eğer:

• Temel akışlar standart web API'leriyle karşılanabiliyorsa
• URL ile erişim ve indekslenebilir web içeriği önemliyse
• Aynı web kod tabanının masaüstü ve mobil tarayıcılarda paylaşılması isteniyorsa
• Çevrimdışı gereksinimler açıkça sınırlandırılıp test edilebiliyorsa

Native veya hibrit seçenek de prototiplenmelidir, eğer:

• Hedef tarayıcılarda bulunmayan cihaz API'leri gerekiyorsa
• Oyun, yoğun grafik veya kesintisiz arka plan işlemi temel gereksinimse
• Uygulama mağazası dağıtımı ürün stratejisinin zorunlu parçasıysa
• İşletim sistemiyle derin entegrasyon veya platforma özgü deneyim gerekiyorsa

Sonuç

PWA, belirli web ürünlerinde kurulum ve çevrimdışı kullanım gibi yetenekleri ortak kod tabanına ekleyebilir. Ancak tarayıcı uyumluluğu, veri güvenliği, service worker güncellemeleri ve cihaz API'leri karardan önce prototiplenmelidir. Maliyet ve kullanıcı davranışı için evrensel bir kazanç oranı yoktur.

Kaynak ve Yöntem Notu

Özellik ve uyumluluk açıklamaları yukarıda bağlanan MDN, WebKit, Next.js ve web.dev kaynaklarından 14 Temmuz 2026'da kontrol edildi. Hipotetik örnekler gerçek müşteri sonucu değildir; PWA'nın dönüşüm, maliyet veya performans artışı sağlayacağına dair garanti verilmez. Kaynaklar Maviona'yı değerlendirmez veya onaylamaz.

Sitenize PWA entegrasyonu yapmak istiyorsanız, Maviona'nın web geliştirme hizmetlerini inceleyin.