1. PWA Nedir?
PWA, web teknolojileriyle (HTTPS, manifest, service worker) “install edilebilir”, hızlı açılan ve gerektiğinde offline/az bağlantıda da temel içeriği gösterebilen deneyimler sunar. Kullanıcı açısından en görünür parçalar: “Add to Home Screen” (Ana ekrana ekle), ikon/launcher hissi ve offline ekranıdır. Teknik açıdan ise esas güç, service worker’ın cache ve ağ stratejisini yönetmesidir.
PWA nedir, klasik web sitesinden farkı nedir?
PWA; bir web sitesinin manifest ve service worker ile “install edilebilir” hale gelmesi ve belirli içerik/varlıkları cache’leyerek offline/low-connectivity koşullarında çalışabilmesidir. Klasik web sitesinde ağ yoksa sayfa genelde tamamen düşer; PWA’da en azından kritik ekranlar, içerikler veya “offline bilgi ekranı” kullanıcıyı yarı yolda bırakmaz.
Mini Check
- •Kullanıcılar sitenize “tekrar tekrar” geri geliyor mu?
- •Mobil kullanım oranı yüksek mi?
- •Kötü bağlantı koşullarında bile kullanıcıya “en azından” sunulacak kritik bilgiler var mı?
Ne yapmalıyım?
- • PWA’yı “install” değil, “kesintisiz görev” (offline task) için değerlendir
- • Kritik 3 görev belirle: otelde “iletişim/konum/rezervasyon başlatma”, B2B’de “dashboard görüntüleme/son rapor” gibi
- • İlk sürümde sadece bu görevleri destekle; her şeyi cache’leme
2. Hangi Kurumsal/Otel Sitelerinde Mantıklı?
PWA, “herkese lazım” değil, doğru senaryoda çok değerli bir çözüm. Karar kriterleri: ziyaret sıklığı, kullanıcı görevi tekrarı, bağlantı kalitesi, içerik güncellik ihtiyacı ve bakım kapasitesi.
Hangi kurumsal ve otel siteleri için PWA mantıklıdır?
PWA; kullanıcıların sık ziyaret ettiği, düşük bağlantı koşullarında bile “temel görevi” tamamlamak istediği sitelerde mantıklıdır. Otel sitelerinde konum/iletişim/rezervasyon başlatma ve tesis bilgileri; B2B’de dashboard/portal ekranları ve tekrar eden rapor görüntüleme senaryoları PWA’dan net fayda görebilir. Buna karşılık, çok nadir ziyaret edilen “broşür” sitelerde PWA bakım yükü çoğu zaman gereksizdir.
“Standart site vs PWA” karar çerçevesi
- •Broşür sitesi: düşük tekrar ziyaret → PWA şart değil
- •Yoğun kampanya/teklif sayfaları: offline gereksinimi düşük → PWA seçici
- •Portal/dashboard: tekrar ziyaret yüksek → PWA güçlü aday
- •Seyahat/low connectivity: offline bilgi ekranı faydalı → PWA aday
Mini Check
- •Kullanıcının offline ihtiyaç duyacağı “kritik bilgi” listesi var mı?
- •İçerik güncelliği çok yüksek mi (stale risk)?
- •Ekipte PWA bakımını sürdürecek kapasite var mı?
Ne yapmalıyım?
- • “Uygunluk matrisi” ile karar ver (aşağıdaki tabloyu kullan)
- • Otelde offline hedefi: “iletişim/konum/tesise dair kritik bilgiler + son arama/son görüntülenen oda” (Varsayım)
- • B2B’de offline hedefi: “son rapor snapshot + temel navigasyon” (Varsayım)
| Senaryo | PWA Değeri | Önerilen Kapsam | Risk / Dikkat |
|---|---|---|---|
| Otel (seyahat/low connectivity) | Yüksek | offline bilgi ekranı + kritik sayfalar cache | stale içerik, CWV |
| Otel (broşür + düşük tekrar) | Düşük | PWA yerine performans optimizasyonu | bakım yükü gereksiz |
| B2B portal/dashboard | Yüksek | login sonrası temel ekran cache + offline fallback | veri güvenliği, yetki |
| B2B içerik sitesi | Orta | statik varlık cache + offline fallback | ölçüm ve SEO uyumu |
3. Manifest, Service Worker ve Cache Stratejisi
PWA’nın kalbi service worker’dır. Manifest “install” deneyimini sağlar; service worker ise cache stratejisini ve offline davranışı belirler. Buradaki kritik tasarım, “neyi cache’leyeceğiz” sorusu değil; hangi içerik hangi stratejiyle cache’lenecek sorusudur.
Manifest (Add to Home Screen) ve ikon tasarımı
- •App name/short name, ikon seti, theme color
- •Start URL (genelde ana sayfa veya “hub” sayfa)
- •Display mode (standalone)
- •Varsayım: Otel sitelerinde start URL genelde “ana sayfa + hızlı arama”; B2B’de “dashboard/login”.
Next.js projelerinde PWA ve service worker nasıl kurgulanır?
Next.js projelerinde PWA yaklaşımı; manifest dosyası, service worker kaydı ve cache stratejisinin seçici tanımlanmasıyla kurulur. Kritik nokta; tüm siteyi cache’lemek yerine “sık kullanılan sayfalar + statik varlıklar + offline fallback” yaklaşımını uygulamaktır. Ayrıca her sürümde cache invalidation planı yapılmazsa kullanıcı eski içerikte kalabilir.
Cache stratejileri (pratik dilde)
- •Cache-first: statik varlıklar için (ikon, CSS)
- •Network-first: güncel olması gereken içerikler için
- •Stale-while-revalidate: kullanıcıya hızlı göster, arkadan güncelle (çok kullanılır)
- •Offline fallback: ağ yoksa bilgi ekranı göster
Mini Check
- •Cache invalidation (sürüm değişince) planı var mı?
- •“Bayat içerik” riski yönetiliyor mu?
- •Service worker hata log’ları izleniyor mu? (Varsayım: mümkün)
Ne yapmalıyım?
- • İlk sürüm: statik varlıklar + offline fallback + 3 kritik sayfa cache
- • Release notlarına “cache sürüm” adımı ekle
- • Staging’de offline test senaryosu çalıştır (uçak modu test)
4. Offline/Low-Connectivity Deneyimi
Offline deneyim, “site açılmıyor” yerine “kontrollü bir ekran” sunmaktır. En iyi offline deneyim, kullanıcıyı boş sayfaya düşürmez; ona bir sonraki adımı verir.
Offline sayfa tasarımı (otel ve B2B farkı)
- •Otel: Konum, iletişim, tesis bilgileri, “rezervasyon için arayın/WhatsApp” kısa yolu, son görüntülenen sayfa (Varsayım)
- •B2B: Son rapor snapshot, temel menü, “bağlantı gelince yenile” mesajı
Low-connectivity (zayıf bağlantı) modu
Zayıf bağlantıda hedef: ağır görselleri azaltmak, skeleton/loading kullanmak, kritik metinleri hızlı göstermek. Burada CWV ve performans bütçesi devreye girer.
Mini Check
- •Offline ekran “ne yapmalıyım?” diyor mu?
- •Zayıf bağlantıda ağır görseller erteleniyor mu?
- •Kullanıcı “son gördüğü” içeriği tekrar görebiliyor mu? (Varsayım)
Ne yapmalıyım?
- • Offline ekranını bir “micro-landing” gibi tasarla: 3 kısa aksiyon
- • Zayıf bağlantıda görsel kalite düşürme/erteleme stratejisi uygula (Varsayım)
- • Otel için “iletişim/konum” bilgilerini offline erişilebilir yap
5. Push Bildirimleri ve Kullanım Senaryoları
Push bildirimleri PWA’nın “en riskli ama güçlü” parçasıdır. Yanlış kullanılırsa kullanıcıyı rahatsız eder; doğru kullanılırsa tekrar ziyaret ve etkileşimi artırabilir.
Ne zaman push mantıklı?
- •Otel: rezervasyon hatırlatması, kampanya bildirimi (izinli ve sınırlı) (Varsayım)
- •B2B: rapor hazır, sistem durumu, görev hatırlatma (Varsayım)
- •Push için en kritik kural: “kullanıcıya değer ve kontrol.”
İzin yönetimi ve frekans disiplini
- •İzni “ilk ekranda” istemek yerine, değer anında istemek
- •Frekans limitleri ve kapatma seçenekleri
- •KVKK/pazarlama uyumu (Varsayım: kurum politikası)
Mini Check
- •Push “değer” anında mı isteniyor?
- •Bildirim frekans limiti var mı?
- •Kullanıcı kolayca kapatabiliyor mu?
Ne yapmalıyım?
- • Push’ı MVP kapsamına hemen alma; önce offline + cache’i oturt
- • Push senaryolarını 2–3 ile sınırla ve ölç (opt-in oranı)
- • Bildirim metnini style guide’a bağla (Varsayım: governance)
6. Lighthouse, CWV Etkisi ve Bakım Süreci
PWA kurmak “bir kere yap bitti” değildir. Service worker ve cache, doğru yönetilmezse CWV’yi bozabilir veya stale içerik yaratabilir. Bu yüzden teknik nottaki gibi Lighthouse ve CWV etkisi düzenli izlenmelidir.
Lighthouse ve performans test rutini
- •PWA audit: manifest, service worker, offline support
- •Performance audit: LCP/INP/CLS riskleri
- •Technical SEO Notu: PWA kurulurken Lighthouse testi ve CWV etkisi düşünülmeli; teknik SEO ile uyum (/tr/seo/teknik-seo) ve bakım süreçleri (/tr/yazilim/bakim-ve-destek) birlikte planlanmalıdır.
Cache invalidation ve release disiplini
Her release’te cache sürümleme ve invalidation kuralı olmalı. Aksi halde kullanıcı “eski siteyi” görürken siz yeni siteyi deploy etmiş olursunuz.
Key Statistics / Data Point (sheet): PWA’nın doğru kurgulandığı projelerde, özellikle mobil kullanıcılar için tekrar ziyaret ve etkileşim metriklerinde artış raporlanıyor. (Gözlemsel veri noktası olarak kullanıldı.)
Mini Check
- •Her deploy sonrası PWA test senaryosu var mı?
- •Cache sürüm stratejisi dokümante mi?
- •CWV ve Lighthouse skorları izleniyor mu?
Ne yapmalıyım?
- • “PWA bakım checklist”ini bakım-destek sürecine ekle
- • Release sonrası 30 dk: offline ve update testini zorunlu yap
- • CWV düşüşünde PWA/cache etkisini ayrıca analiz et
7. PWA Uygunluk & Offline UX Planlama Şablonunu İndir — Yazılım / PWA
PWA Uygunluk & Offline UX Planlama Şablonunu İndir — Yazılım / PWA (v1.0)
Bu şablon, PWA’yı “hype” yerine iş hedefiyle değerlendirmek için uygunluk kriterlerini puanlayıp kapsamı netleştirir. Manifest, service worker ve cache stratejisini “hangi sayfalar offline olacak?” sorusuna göre planlar; offline/low-connectivity ekranını tasarlatır. Ayrıca Lighthouse/CWV etkisini ve bakım sürecini (release sonrası test) planın parçası yapar.
Kim Kullanır?
Ajans teknik lideri, ürün/UX, otel dijital ekipleri, B2B portal sahibi, QA.
Nasıl Kullanılır?
- Uygunluk bölümünde senaryonuzu puanlayın ve MVP kapsamını seçin.
- Cache stratejisini (cache-first/network-first/stale-while-revalidate) sayfa/varlık bazında doldurun.
- Offline ekranı ve test planını tamamlayıp 14 günlük sprint ile uygulayın.
Ölçüm & Önceliklendirme (Kısa sürüm)
PDF içinde: Problem→Kök Neden→Çözüm tablosu + 14 gün sprint planı + önce/sonra KPI tablosu
8. Sonuç: PWA hedef değil, doğru senaryoda süreklilik stratejisidir
PWA, her kurumsal veya otel sitesi için otomatik olarak uygulanması gereken bir özellik değildir. Asıl değer, kullanıcıların tekrar ettiği görevlerde, mobil kullanımın yüksek olduğu senaryolarda ve offline/low-connectivity koşullarında kritik deneyimi sürdürebilme ihtiyacında ortaya çıkar.
Bu nedenle en sağlıklı yaklaşım; önce uygunluk matrisini çıkarmak, ardından manifest, service worker, cache kapsamı, offline ekran, Lighthouse/CWV testleri ve bakım sürecini birlikte planlamaktır. Doğru kapsamla PWA; otel ve B2B projelerinde app-like UX, daha güçlü mobil süreklilik ve daha kontrollü kullanıcı deneyimi sağlayabilir.
Bir Sonraki Adım
PWA’nın sizin senaryonuzda değer üretip üretmeyeceğini netleştirip cache/offline planını CWV’yi bozmadan kuralım.
Sık Sorulan Sorular
PWA nedir, klasik web sitesinden farkı nedir?▾
Hangi kurumsal ve otel siteleri için PWA mantıklıdır?▾
Next.js projelerinde PWA ve service worker nasıl kurgulanır?▾
Offline ve zayıf bağlantı deneyimini nasıl tasarlamalıyım?▾
Push bildirimleri PWA’da şart mı?▾
PWA SEO’yu bozar mı?▾
İlgili İçerikler