PWA (Progressive Web App) ve Çevrimdışı Alışveriş: Mobil Dönüşümü Zirveye Taşıyan Mimari

Modern e-ticarette web trafiğinin %70 ila %80'i mobil cihazlardan gelir. Ancak analitik panellerine baktığımızda acı bir gerçekle karşılaşırız: Mobil dönüşüm oranları (conversion rate), masaüstü trafiğin neredeyse yarısı düzeyindedir.

Bu tablonun arkasındaki en kritik iki etken şunlardır:

• App Store İndirme Sürtünmesi: Bir kullanıcıdan reklam veya Google araması sonrası 80-150 MB'lık native bir iOS veya Android uygulaması indirmesini istemek, potansiyel müşterilerin %85'inden fazlasının huniden (funnel) anında düşmesine neden olur.
• Ağ Dalgalanmaları (Flaky Network): Hareket halindeki mobil kullanıcılar (metro, asansör, zayıf Wi-Fi, baz istasyonu geçişleri) saniyeler süren beyaz ekranlarla karşılaşır. HTTP istekleri zaman aşımına uğrar, sepet temizlenir ve satış kaybedilir.

Kullanıcı çevrimdışıyken veya zayıf bir bağlantıdayken sepet işlemi yaptığında sistemin nasıl davrandığını gösteren uçtan uca mimari akış aşağıda özetlenmiştir:

+-------------------------------------------------------------------------+
|                              CLIENT (Browser)                           |
|                                                                         |
|  [Kullanıcı: "Sepete Ekle"]                                             |
|              │                                                          |
|              ▼                                                          |
|  [Service Worker Interceptor]                                           |
|              │                                                          |
|              ├─── [Network Aktif mi?] ──► EVET ──► [POST /api/v1/cart]  |
|              │                                           │              |
|             HAYIR (Offline veya Timeout)                 ▼              |
|              │                                    [Redis Distributed    |
|              ▼                                         Lock & Stock]    |
|  [IndexedDB 'offline_cart_mutations']                                   |
|              │                                                          |
|              ▼                                                          |
|  [Background Sync Registration ('sync-cart-queue')]                    |
|              │                                                          |
|              ▼ (Bağlantı Kurulduğunda)                                  |
|  [Service Worker: Replay Queue via Idempotency-Key] ────────────────────┘
+-------------------------------------------------------------------------+

Bu mimaride en hayati bileşen Idempotency-Key (Tekillik Anahtarı) mekanizmasıdır. Ağ koptuğunda istemci tarafında bir UUID v4 üretilir. Bağlantı tekrar geldiğinde aynı istek istemeden iki kez tetiklense dahi NestJS backend'i bu isteğin daha önce işlenip işlenmediğini Redis üzerinde doğrular; böylece müşterinin sepetine yanlışlıkla mükerrer ürün eklenmesi kesin olarak engellenir.

Bütün kaynakları körü körüne önbelleğe almak felakettir; fiyatların eski kalmasına veya cihaz belleğinin dolmasına yol açar. Stilmerce, kaynak tipine göre 3 farklı önbellekleme stratejisi uygular:

• Static Assets (JS/CSS/Fonts): Cache-First. Hash'lenmiş dosya adları olduğu için doğrudan yerel disk önbelleğinden milisaniyeler içinde sunulur.
• Ürün Görselleri ve Banner'lar: Stale-While-Revalidate + LRU Eviction (Maksimum 60 görsel, 14 gün geçerlilik).
• Fiyat ve Stok API Uç Noktaları: Network-First (2000ms zaman aşımı ile). İnternet varsa her zaman gerçek stok gösterilir; internet yoksa son bilinen fiyat rozetiyle birlikte 'Çevrimdışı Mod' uyarısı verilir.

// stilmerce-sw.ts: Workbox tabanlı akıllı kural seti
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// 1. Ürün görselleri için Stale-While-Revalidate
registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'stilmerce-product-media-v1',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 14 * 24 * 60 * 60, // 14 gün
      }),
    ],
  })
);

// 2. Dinamik Fiyat & Stok API'si için Network-First (2s Timeout)
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/v1/products/pricing'),
  new NetworkFirst({
    cacheName: 'stilmerce-pricing-cache',
    networkTimeoutSeconds: 2,
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 60, // 30 dakika
      }),
    ],
  })
);

PWA'nın mobil işletim sisteminde tarayıcı çerçevesinden arınmış (standalone) ve ana ekran kısayolları ile çalışabilmesi için manifest.webmanifest dosyasının eksiksiz yapılandırılması şarttır:

{
  "name": "Stilmerce Commerce Hub",
  "short_name": "Stilmerce",
  "description": "Next-Gen Headless E-Commerce Storefront",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#09090b",
  "theme_color": "#09090b",
  "orientation": "portrait",
  "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"
    }
  ],
  "shortcuts": [
    {
      "name": "Sepetim",
      "short_name": "Sepet",
      "url": "/cart",
      "icons": [{ "src": "/icons/cart-shortcut.png", "sizes": "96x96" }]
    },
    {
      "name": "Sipariş Takibi",
      "short_name": "Siparişler",
      "url": "/dashboard/orders",
      "icons": [{ "src": "/icons/orders-shortcut.png", "sizes": "96x96" }]
    }
  ]
}

Kullanıcı telefonun ana ekranındaki uygulama simgesine basılı tuttuğunda (iOS Haptic Touch / Android App Shortcuts), doğrudan Sepetim veya Sipariş Takibi ekranlarına sıçrayabilir.

Aşağıdaki tablo, e-ticaret markalarının yatırım yaparken dikkate alması gereken teknik ve ticari metrikleri açıkça ortaya koymaktadır:

PWA geliştirirken en çok dikkat edilmesi gereken ekosistem Apple WebKit'tir. iOS Safari'nin getirdiği başlıca kısıtlamalar ve Stilmerce'in uyguladığı çözümler:

• 7 Günlük Kullanılmama Durumunda Veri Silinmesi (Storage Eviction): Safari, ana ekrana eklenmemiş sitelerin IndexedDB ve Cache verilerini 7 gün sonra silebilir. Çözüm olarak kullanıcıya ana ekrana ekleme çağrısı yapılır ve navigator.storage.persist() çağrısı ile kalıcı depolama izni istenir.
• iOS Web Push Bildirimleri (iOS 16.4+): Apple nihayet Web Push standardını Safari'ye getirdi. Ancak bildirim alabilmek için kullanıcının PWA'yı ana ekranına eklemiş olması şarttır. Stilmerce, bu koşul sağlandığında VAPID anahtarlarıyla doğrudan Safari Push Service üzerinden anlık indirim ve sipariş bildirimleri iletir.