Progressive Web Apps (PWA): Mobil Uygulama Alternatifi 2026

Mobil uygulama geliştirmek pahalı. iOS için Swift, Android için Kotlin, hem de ayrı ekipler, ayrı bakım maliyetleri. Peki ya web sitenizi bir mobil uygulama gibi kullanılabilir hale getirebilseydiniz? Progressive Web Apps (PWA) tam olarak bunu vaat ediyor. 2026'da PWA'nın durumunu, avantajlarını, sınırlamalarını ve kurulum rehberini detaylıca ele alıyoruz.

PWA Nedir?

Progressive Web App, standart web teknolojileriyle (HTML, CSS, JavaScript) oluşturulan ama native mobil uygulama deneyimi sunan web uygulamalarıdır. Bir PWA şunları yapabilir:

• Ana ekrana eklenebilir: App Store veya Google Play'e gerek yok
• Çevrimdışı çalışabilir: Internet bağlantısı olmadan temel fonksiyonlar
• Push bildirim gönderebilir: Kullanıcıyı geri getirmek için
• Hızlı yüklenir: Service Worker ile önbellekleme
• Tam ekran çalışır: Tarayıcı arayüzü olmadan

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

1. Service Worker: Tarayıcı ile ağ arasında proxy görevi gören JavaScript dosyası. Çevrimdışı erişim, push bildirim ve önbellekleme sağlar.
2. Web App Manifest: Uygulamanın adını, ikonlarını, tema rengini ve görüntüleme modunu tanımlayan JSON dosyası.
3. HTTPS: PWA'lar güvenli bağlantı gerektirir (localhost hariç).

Native Uygulama vs PWA: Detaylı Karşılaştırma

2026'da PWA Desteği

• Android Chrome: Tam destek (bildirim, kurulum, çevrimdışı, Bluetooth)
• iOS Safari (17.4+): Push bildirim desteği, ana ekrana ekleme, arka plan sync
• Windows Edge: Tam destek, Microsoft Store'da listelenebilir
• macOS Safari: İyi destek, PWA'lar Dock'a sabitlenebilir

iOS'un 2024'te push bildirim desteği eklemesi, PWA ekosistemi için büyük bir dönüm noktasıydı.

PWA Kurulum Rehberi (Next.js)

Adım 1: Web App Manifest

{
  "name": "Maviona Dijital Ajans",
  "short_name": "Maviona",
  "description": "Modern web çözümleri ile işletmenizi dijitale taşıyoruz",
  "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

// service-worker.ts
const CACHE_NAME = "maviona-v1";
const STATIC_ASSETS = [
  "/",
  "/hizmetler",
  "/hakkimizda",
  "/iletisim",
  "/offline",
];

// 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 !== CACHE_NAME)
          .map((key) => caches.delete(key))
      );
    })
  );
});

// Fetch — network-first stratejisi
self.addEventListener("fetch", (event: FetchEvent) => {
  // API isteklerini cache'leme
  if (event.request.url.includes("/api/")) {
    return;
  }

  event.respondWith(
    fetch(event.request)
      .then((response) => {
        // Başarılı yanıtı cache'e kaydet
        const clone = response.clone();
        caches.open(CACHE_NAME).then((cache) => {
          cache.put(event.request, clone);
        });
        return response;
      })
      .catch(() => {
        // Offline — cache'den sun
        return caches.match(event.request).then((cached) => {
          return cached || caches.match("/offline");
        });
      })
  );
});

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

1. Cache First (Statik içerik için ideal)

// Önce cache'e bak, yoksa ağdan getir
event.respondWith(
  caches.match(event.request).then((cached) => {
    return cached || fetch(event.request);
  })
);

Kullanım: Görseller, fontlar, CSS, JavaScript dosyaları.

2. Network First (Dinamik içerik için ideal)

// Önce ağdan getir, başarısız olursa cache'den sun
event.respondWith(
  fetch(event.request)
    .then((response) => {
      caches.open(CACHE_NAME).then((cache) => {
        cache.put(event.request, response.clone());
      });
      return response;
    })
    .catch(() => caches.match(event.request))
);

Kullanım: Blog yazıları, ürün sayfaları, API yanıtları.

3. Stale While Revalidate (En iyi denge)

// Cache'den hemen sun, arka planda güncelle
event.respondWith(
  caches.match(event.request).then((cached) => {
    const fetchPromise = fetch(event.request).then((response) => {
      caches.open(CACHE_NAME).then((cache) => {
        cache.put(event.request, response.clone());
      });
      return response;
    });

    return cached || fetchPromise;
  })
);

Kullanım: Sık güncellenen ama anlık güncellik gerektirmeyen içerikler.

Push Bildirim Entegrasyonu

// Push bildirim izni isteme
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();

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

    // Subscription'ı backend'e gönder
    await fetch("/api/push/subscribe", {
      method: "POST",
      body: JSON.stringify(subscription),
      headers: { "Content-Type": "application/json" },
    });
  }
}

// Service Worker'da push event'i
self.addEventListener("push", (event: PushEvent) => {
  const data = event.data?.json();

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

Başarılı PWA Örnekleri

1. Twitter (X) Lite: PWA versiyonu, 65% artan gönderilen tweet sayısı, 75% azalan veri kullanımı.

2. Pinterest: PWA'ya geçiş sonrası reklam gelirinde %44 artış, kullanıcı etkileşiminde %60 artış.

3. Starbucks: PWA boyutu (600 KB) native app'in (100 MB) %0.6'sı. Günlük aktif kullanıcılarda 2x artış.

4. Uber: 50 KB boyutunda PWA, 2G ağlarda bile 3 saniyede yükleniyor.

PWA Ne Zaman Doğru Seçim?

PWA'yı seçin eğer:

• Bütçeniz native uygulama geliştirmeye yetmiyorsa
• SEO ve keşfedilebilirlik önemliyse
• Kullanıcıların app store'dan indirmesini istemiyorsanız
• İçerik ağırlıklı bir uygulamanız varsa (haber, blog, e-ticaret)
• Hızlı güncelleme yapma ihtiyacınız varsa

Native uygulama seçin eğer:

• Yoğun cihaz API erişimi gerekiyorsa (AR, gelişmiş kamera, Bluetooth LE)
• Yüksek performanslı oyun veya 3D render gerekiyorsa
• App Store/Play Store görünürlüğü kritikse
• Arka plan işlemleri yoğunsa (fitness tracking, müzik çalma)

Sonuç

PWA, 2026'da her zamankinden güçlü. iOS'un push bildirim desteği eklemesiyle en büyük engel de aşıldı. Özellikle KOBİ'ler ve startup'lar için PWA, native uygulama maliyetinin onda birine benzer bir deneyim sunuyor.

Maviona olarak müşterilerimize PWA entegrasyonu öneriyoruz. Özellikle e-ticaret ve içerik sitelerinde PWA, kullanıcı deneyimini ve dönüşüm oranlarını somut şekilde artırıyor.

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