Web Uygulamanızı Telefona Yükleyin: React PWA Rehberi

Sorun: Uygulama Sadece Bilgisayardan Açılıyor

Stok dashboard’u yaptınız, harika çalışıyor — ama sadece bilgisayardan. Depocu sayım yaparken masasına dönmek zorunda. Satışçı müşterideyken bakiye soramıyor. Müdür toplantıda elinde rakam yok.

“Mobil uygulama yapsak?” derseniz: iOS + Android geliştirme, App Store onay süreci, güncelleme derdi…

PWA ile bunların hiçbirine gerek yok. Mevcut web uygulamanızı telefonun ana ekranına eklenebilir hale getirirsiniz. Kullanıcı bir kere “Ana Ekrana Ekle” der, artık normal bir uygulama gibi açılır.

PWA ile Ne Değişir?

	Normal Website	PWA
Ana ekrana ikon	❌	✅
Tam ekran açılma	❌ (tarayıcı çubukları görünür)	✅ (uygulama gibi)
Açılış ekranı	❌	✅ (splash screen)
App Store gerekli mi?	—	Hayır

Adım 1: manifest.json Dosyası

Bu dosya tarayıcıya “ben bir uygulama olarak yüklenebilirim” der. Projenizin public/ klasörüne koyun:

{
  "name": "AstaFlow İş Yönetimi",
  "short_name": "AstaFlow",
  "description": "Stok, satış ve cari takip platformu",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#3b82f6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Önemli alanlar:

• display: "standalone" → Tarayıcı çubukları gizlenir, uygulama gibi görünür
• theme_color → Telefonun üst çubuğunun rengi
• icons → Ana ekrandaki ikon (192px ve 512px gerekli)

HTML’e Bağlama

<!-- index.html head bölümüne ekleyin -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

Adım 2: Service Worker (Opsiyonel ama Önerilir)

Service Worker, uygulamanın ikinci açılışta daha hızlı yüklenmesini sağlar. İlk açılışta dosyaları cache’ler, sonraki açılışlarda cache’den yükler:

// public/sw.js
const CACHE_ADI = 'astaflow-v1';

// Uygulama yüklenirken temel dosyaları sakla
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_ADI).then((cache) => {
      return cache.addAll(['/', '/index.html']);
    })
  );
});

// İnternet varsa internetten, yoksa cache'den yükle
self.addEventListener('fetch', (event) => {
  // API isteklerini cache'leme — her zaman internete gitsin
  if (event.request.url.includes('/rest/')) return;

  event.respondWith(
    fetch(event.request)
      .then((response) => {
        // Başarılıysa cache'e de kaydet
        const kopyasi = response.clone();
        caches.open(CACHE_ADI).then(c => c.put(event.request, kopyasi));
        return response;
      })
      .catch(() => {
        // İnternet yoksa cache'den dön
        return caches.match(event.request);
      })
  );
});

Service Worker’ı Kaydetme

// Ana uygulamanızda
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker hazır'))
      .catch(err => console.error('SW hatası:', err));
  });
}

Adım 3: “Ana Ekrana Ekle” Bildirimi

Kullanıcıya uygulamayı yüklemesini öneren bir banner gösterebilirsiniz:

function YukleBanner() {
  const [yuklemePrompt, setYuklemePrompt] = useState(null);

  useEffect(() => {
    const handler = (e) => {
      e.preventDefault();
      setYuklemePrompt(e);
    };
    window.addEventListener('beforeinstallprompt', handler);
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);

  if (!yuklemePrompt) return null;

  return (
    <div className="yukle-banner">
      <span>📱 AstaFlow'u telefonunuza yükleyin — hızlı erişim!</span>
      <button onClick={async () => {
        await yuklemePrompt.prompt();
        setYuklemePrompt(null);
      }}>
        Yükle
      </button>
    </div>
  );
}

Sonuç

Kullanıcı deneyimi:

1. Web uygulamasını telefondan açar
2. "Ana Ekrana Ekle" bildirimini görür → "Yükle" der
3. Ana ekranda AstaFlow ikonu belirir
4. Tıklayınca tam ekran açılır — tarayıcı görünmez
5. İkinci açılışta çok daha hızlı yüklenir (cache sayesinde)

App Store’a ihtiyaç yok. Mevcut web uygulamanız artık bir mobil uygulama gibi çalışır.

Daha İleri Gitmek İsteyenler İçin

Temel PWA kurulumu çoğu ihtiyacı karşılar. Ama kurumsal ortamda:

• Push bildirim: “Kritik stok uyarısı” veya “yeni sipariş” bildirimi gönderme
• İnternet kesilince çalışma: Yapılan değişiklikleri sıraya koyma, internet gelince gönderme
• Otomatik güncelleme: Yeni versiyon çıkınca kullanıcıyı bilgilendirme

Biz PWA’yı 50+ kullanıcıyla production’da çalıştırıyoruz. İhtiyacınız olursa deneyimimizden faydalanabilirsiniz.

---

Bu yazı AstaFlow Case Study serisinin bir parçasıdır.