PWA Uygulaması Nedir?
PWA uygulaması, tarayıcı üzerinden çalışan ama telefon uygulaması gibi davranan bir web sitesidir. Kısaltma "Progressive Web App" ifadesinden gelir. Kullanıcı siteyi bir kez ziyaret eder, sonra ekrana ekler. Ekrana eklenen simge normal bir uygulama gibi açılır ve ayrı pencerede çalışır.
Arka planda hâlâ bir web sayfası çalışır. İnternet yavaş olsa bile sayfa önbellekten hızlı yüklenir. Bildirim gönderme, çevrimdışı çalışma ve tam ekran görünüm PWA'nın standart özellikleridir.
Bir e-ticaret sitesi örneğini düşünelim. Kullanıcı uygulamayı kurar, ürün sayfalarına internet olmadan da göz atabilir. Sepete ekleme işlemi bağlantı geldiğinde otomatik tamamlanır.
PWA İçin Ne Gerekli?
Bir web sitesinin PWA olabilmesi için üç temel parça gerekir: manifest dosyası, service worker ve HTTPS bağlantısı. Bu üçü olmadan tarayıcı "ana ekrana ekle" seçeneğini göstermez.
- Manifest dosyası: Uygulama adı, ikon ve renk bilgisini tanımlar.
- Service worker: Sayfayı önbelleğe alır, çevrimdışı erişim sağlar.
- HTTPS: Güvenli bağlantı olmadan tarayıcı PWA'yı tanımaz.
Üç şart sağlandığında site otomatik olarak kurulabilir hale gelir. Kullanıcı tarafında ekstra bir uygulama mağazası işlemi gerekmez. Geliştirici tarafında ise birkaç dosya eklemek yeterlidir.
PWA Nasıl Kurulur? Android'de Adımlar
Android telefonlarda PWA kurulumu genellikle Chrome tarayıcısı üzerinden yapılır. İşlem birkaç dokunuşla tamamlanır ve Play Store'a gitmeye gerek kalmaz.
Chrome Üzerinden Kurulum Adımları
- PWA destekli siteyi Chrome'da açın.
- Sağ üstteki üç nokta menüsüne dokunun.
- "Uygulamayı yükle" veya "Ana ekrana ekle" seçeneğini bulun.
- Açılan onay penceresinde "Yükle" butonuna basın.
- Uygulama simgesi ana ekranda belirir.
Bazı sitelerde tarayıcı kurulum önerisini kendiliğinden gösterir. Adres çubuğunun yanında küçük bir yükleme ikonu çıkar, ona dokunmak yeterlidir. Samsung Internet gibi diğer Android tarayıcıları da benzer bir menü sunar.
iOS'ta PWA Nasıl Kurulur?
iPhone kullanıcıları için süreç Safari tarayıcısı üzerinden işler. Apple, Chrome'da bu özelliği tam desteklemez; Safari kullanmak gerekir.
Safari'de Ana Ekrana Ekleme
- Siteyi Safari'de açın.
- Alt menüdeki paylaş simgesine dokunun.
- Listeyi kaydırıp "Ana Ekrana Ekle" seçeneğini bulun.
- İsim alanını onaylayıp "Ekle" butonuna basın.
Simge ana ekrana eklenir ve normal bir uygulama gibi açılır. iOS 16.4 sürümünden önce bildirim desteği yoktu. Yeni sürümlerde kısmi bildirim desteği eklendi.
PWA Kurulumu Ne Kadar Sürer?
Kurulum süresi genellikle otuz saniyeyi geçmez. Menüyü bulup onaylamak dışında herhangi bir yükleme beklemesi yoktur.
İlk açılışta sayfa dosyaları önbelleğe alınır, bu işlem birkaç saniye sürer. Sonraki açılışlarda uygulama neredeyse anında başlar. Klasik uygulama mağazası kurulumlarına göre çok daha hızlıdır.
Masaüstünde PWA Nasıl Yapılır?
Bilgisayarda kurulum Chrome, Edge veya benzeri tarayıcılarla yapılır. Adres çubuğunun sağında bir yükleme ikonu belirir.
İkona tıklandığında küçük bir pencere açılır. "Yükle" seçeneği onaylandığında uygulama masaüstüne veya başlat menüsüne eklenir. Program artık ayrı bir pencerede, tarayıcı çerçevesi olmadan çalışır.
Windows'ta bu simge görev çubuğuna sabitlenebilir. macOS'ta ise Launchpad üzerinden erişilebilir hale gelir. Linux dağıtımlarında da Chrome tabanlı tarayıcılar aynı menüyü sunar.
Hangi Tarayıcılar PWA Kurulumunu Destekler?
Destek seviyesi tarayıcıdan tarayıcıya değişir. Aşağıdaki tablo yaygın tarayıcıların durumunu gösterir.
| Tarayıcı | Masaüstü Desteği | Mobil Desteği |
|---|---|---|
| Chrome | Tam | Tam |
| Edge | Tam | Tam |
| Safari | Kısıtlı | Manuel ekleme |
| Firefox | Yok | Kısıtlı |
Chrome ve Edge en geniş desteği sunar. Firefox tarafında masaüstü kurulumu şu an mevcut değildir.
Android ve iOS Kurulumu Arasındaki Farklar Nelerdir?
İki işletim sistemi PWA'yı farklı seviyede destekler. Aşağıdaki tablo temel farkları özetler.
| Özellik | Android | iOS |
|---|---|---|
| Kurulum tarayıcısı | Chrome, Edge, Samsung Internet | Sadece Safari |
| Bildirim desteği | Tam destek | Kısıtlı, iOS 16.4 sonrası kısmi |
| Çevrimdışı çalışma | Güçlü | Orta seviye |
| Otomatik yükleme önerisi | Var | Yok, manuel eklenir |
Android tarafı PWA teknolojisini daha geniş desteklerken iOS bazı özellikleri kısıtlar. Yine de temel kurulum her iki sistemde de birkaç dakika sürer.
Kurulum Sonrası PWA Nasıl Kullanılır?
Kurulan uygulama ana ekrandan normal bir uygulama gibi açılır. Adres çubuğu görünmez, tam ekran deneyim sunulur.
İnternet bağlantısı kesildiğinde önbelleğe alınan sayfalar yine açılır. Yeni içerik için bağlantı gerekir ama önceden görülen sayfalar erişilebilir kalır.
Uygulamayı kaldırmak normal bir uygulamayı silmek kadar basittir. Simgeye basılı tutup "Kaldır" seçeneği seçilir.
PWA Kurulduktan Sonra Güncellemeler Nasıl Gelir?
Güncellemeler otomatik gelir, kullanıcı hiçbir şey yapmaz. Service worker, arka planda yeni dosyaları kontrol eder ve indirir.
Uygulama tekrar açıldığında güncel sürüm devreye girer. Bazı durumlarda tarayıcı sekmesinin tamamen kapatılıp açılması gerekebilir.
PWA Depolama Alanı Ne Kadar Kullanır?
Klasik uygulamalara göre PWA çok daha az yer tutar. Çoğu PWA birkaç megabayt önbellek kullanır.
Depolama alanı sitenin içeriğine göre değişir. Görsel yoğun siteler biraz daha fazla yer ayırır. Telefon ayarlarından bu alan her zaman kontrol edilebilir.
PWA Kurulumunda Sık Karşılaşılan Sorunlar Nelerdir?
Bazı kullanıcılar "yükle" seçeneğini tarayıcı menüsünde bulamaz. Bunun genel sebebi sitenin PWA gereksinimlerini eksik karşılamasıdır.
- Manifest dosyası eksikse yükleme seçeneği çıkmaz.
- HTTPS sertifikası yoksa tarayıcı kurulumu engeller.
- Eski tarayıcı sürümleri bu özelliği desteklemeyebilir.
- Service worker kaydı başarısız olursa çevrimdışı mod çalışmaz.
Sorun devam ederse tarayıcı önbelleğini temizlemek çoğu zaman yeterli olur. Site sahibiyse geliştirici, manifest ve service worker dosyalarını kontrol etmelidir.
PWA Uygulaması Güvenli midir?
PWA, HTTPS zorunluluğu sayesinde standart bir web sitesinden daha güvenli çalışır. Veri trafiği şifreli olarak taşınır.
Uygulama mağazası incelemesi olmadığı için sorumluluk site sahibine düşer. Bilinmeyen kaynaklardan PWA kurmak yerine güvenilir markaların sitelerini tercih etmek daha sağlıklıdır.
PWA Normal Web Sitesinden Nasıl Ayrılır?
PWA, klasik bir web sitesinin üzerine kurulum ve çevrimdışı özellik ekleyen bir katmandır. Görsel olarak fark küçük, kullanım deneyiminde fark büyüktür.
| Kriter | Klasik Web Sitesi | PWA |
|---|---|---|
| Kurulum | Yok | Ana ekrana eklenir |
| Çevrimdışı erişim | Yok | Var, önbellek sayesinde |
| Bildirim gönderme | Yok | Android'de var |
| Yükleme süresi | Her ziyarette aynı | Sonraki ziyarette hızlı |
Hangi Sektörler İçin PWA Uygundur?
E-ticaret, haber siteleri ve rezervasyon platformları PWA'dan en çok fayda gören alanlardır. Sık ziyaret edilen ve hızlı yüklenmesi beklenen her site aday sayılır.
Bir restoran zinciri örneğinde müşteri menüyü kurup sipariş verebilir. Sağlık randevu sistemleri de aynı mantıkla çalışır; hasta uygulamayı kurar, randevu bilgisine hızlıca ulaşır.
Geliştiriciler İçin PWA Nasıl Yapılır?
Bir siteyi PWA'ya çevirmek için geliştirici önce manifest.json dosyası oluşturur. Uygulama adı, ikon boyutları ve tema rengi bu dosyada tanımlanır.
Sonraki adım service worker dosyasını yazmaktır. Service worker dosyası hangi sayfaların önbelleğe alınacağını belirler. Basit bir yapı için birkaç satır kod yeterlidir.
Site HTTPS üzerinden yayınlanmalıdır; aksi halde tarayıcı service worker'ı çalıştırmaz. Google'ın Lighthouse aracı, sitenin PWA kriterlerini karşılayıp karşılamadığını test eder.
Kriterler karşılandığında tarayıcı otomatik olarak kurulum önerisi gösterir. Ekstra bir uygulama mağazası onayı veya inceleme süreci gerekmez. Bu yüzden PWA, hızlı yayına çıkmak isteyen projeler için pratik bir seçenektir.
PWA Uygulaması Nasıl Kaldırılır?
PWA kaldırma, normal bir mobil uygulamayı silme işlemiyle aynı adımları izler. Android'de uygulama ikonuna basılı tutup "Kaldır" seçeneği seçilir. iOS'ta ikon basılı tutulup "Uygulamayı Kaldır" onaylanır.
Kaldırma işlemi tarayıcı geçmişini veya hesap bilgilerini silmez. Uygulama tekrar kurulduğunda giriş bilgileri genellikle korunur, çünkü veriler sunucu tarafında saklanır. Yerel önbellek ise kaldırmayla birlikte temizlenir.
PWA ile Native Mobil Uygulama Arasındaki Fark Nedir?
Native uygulama, Android veya iOS için ayrı ayrı yazılan koddur. PWA ise tek bir web kod tabanından çalışır ve her platformda aynı deneyimi sunar. Bu fark geliştirme süresini ve maliyeti doğrudan etkiler.
| Özellik | Native Uygulama | PWA |
|---|---|---|
| Geliştirme süresi | Uzun, iki ayrı kod | Kısa, tek kod tabanı |
| Mağaza onayı | Gerekli | Gerekmez |
| Donanım erişimi | Tam | Sınırlı |
| Güncelleme | Mağaza üzerinden | Otomatik, anında |
Kamera, Bluetooth gibi donanım özellikleri native tarafta daha geniş erişime sahiptir. PWA nasıl kurulur sorusuna basit cevap verilse de, karmaşık donanım ihtiyacı olan projelerde native tercih edilebilir.
PWA Kurulumunun Maliyeti Ne Kadardır?
PWA'nın kurulum maliyeti kullanıcı için sıfırdır; herhangi bir ücret veya mağaza ödemesi istenmez. Geliştirici tarafında maliyet, mevcut web sitesine manifest ve service worker eklemekle sınırlıdır.
Basit bir e-ticaret sitesi için bu ekleme birkaç günlük geliştirme süresine karşılık gelir. Sıfırdan native uygulama yazmakla kıyaslandığında bütçe genellikle üçte bir seviyesinde kalır.
PWA Performansı Nasıl Ölçülür?
PWA performansı Google Lighthouse aracıyla ölçülür ve 0-100 arasında puanlanır. Puan; yüklenme hızı, erişilebilirlik ve PWA kriterlerine uyumu birlikte değerlendirir. 90 üzeri puan iyi performans sayılır.
Chrome DevTools içindeki Lighthouse sekmesi tek tıkla rapor üretir. Rapor, önbelleğe alınmayan dosyaları ve eksik manifest alanlarını listeler. Geliştirici bu listeye göre düzeltme yapar.
PWA Kurulumu SEO'yu Nasıl Etkiler?
PWA, arama motoru sıralamasını dolaylı yoldan etkiler. Hızlı yüklenme ve düşük hemen çıkma oranı, Google'ın sıralama sinyalleri arasında yer alır. Service worker sayesinde sayfa ikinci ziyarette anında açılır.
Mobil kullanılabilirlik puanı da PWA ile yükselir, çünkü Google mobil uyumlu ve hızlı siteleri öne çıkarır. HTTPS zorunluluğu ayrıca güvenlik sinyali olarak sıralamaya küçük bir katkı sağlar.
PWA Bildirimleri Nasıl Ayarlanır?
PWA bildirimleri, service worker üzerinden Push API kullanılarak ayarlanır. Kullanıcıdan önce tarayıcı izni istenir; izin verilmeden bildirim gönderilemez. Chrome ve Firefox bu izni açık bir onay kutusuyla sorar, Safari'de destek sınırlıdır.
Geliştirici tarafında bildirim, sunucudan push servisine gönderilen bir istekle tetiklenir. Service worker bu isteği yakalar ve ekranda bildirim gösterir. Bir haber sitesi için yeni makale çıktığında anlık bildirim göndermek bu yöntemle mümkündür. Pwa nasıl kurulur sorusunun cevabı basit olsa da, bildirim altyapısı ek kod gerektirir.
PWA Offline Modda Nasıl Çalışır?
PWA offline modda, service worker'ın önceden cache'lediği dosyalar sayesinde çalışır. Kullanıcı internet bağlantısını kaybettiğinde tarayıcı, ağ isteği yerine önbellekteki kopyayı gösterir. Bu davranış Cache API ile tanımlanır.
Bir stok takip uygulaması, offline modda son senkronize edilen verileri gösterebilir. Bağlantı geri geldiğinde service worker verileri otomatik günceller. Tamamen offline çalışma her PWA için garanti değildir; hangi verinin cache'leneceği geliştirici tarafından belirlenir.
PWA Hangi Cihazlarda Test Edilmeli?
PWA testi en az üç ortamda yapılmalıdır: Android'de Chrome, iOS'ta Safari ve masaüstünde Chrome veya Edge. Her platform manifest ve service worker davranışını farklı yorumlar.
- Android: Kurulum istemi, bildirim desteği ve arka plan senkronizasyonu test edilir.
- iOS: Ana ekrana ekleme, ikon görünümü ve offline erişim kontrol edilir.
- Masaüstü: Pencere boyutu, kısayol davranışı ve güncelleme akışı incelenir.
Lighthouse raporu bu testlerin çoğunu otomatik özetler, ancak gerçek cihazda deneme eksik noktaları ortaya çıkarır.
Sıkça sorulan sorular
- Android telefona PWA uygulaması nasıl yüklenir?
- Android telefonda PWA kurulumu genellikle Chrome üzerinden yapılır. PWA destekli siteyi açın ve sağ üstteki üç nokta menüsüne dokunun. “Uygulamayı yükle” veya “Ana ekrana ekle” seçeneğini seçin. Onay penceresinde “Yükle” düğmesine bastığınızda simge ana ekrana eklenir. İşlem birkaç dokunuşla tamamlanır; Play Store gerekmez.
- İPhone’a PWA eklemek için neden Safari kullanmalıyım?
- İPhone’da PWA kurulumu Safari üzerinden yapılır; Chrome bu özelliği tam desteklemez. Siteyi Safari’de açın ve paylaş simgesine dokunun. Listeden “Ana Ekrana Ekle” seçeneğini bulun, uygulama adını onaylayıp “Ekle” düğmesine basın. Simge ana ekranda görünür ve ayrı bir uygulama gibi açılır.
- PWA uygulamasını telefona kurmak ne kadar sürer?
- PWA kurulumu genellikle otuz saniyeyi geçmez. Tarayıcı menüsünden yükleme seçeneğini bulup onaylamanız yeterlidir. İlk açılışta sayfa dosyaları önbelleğe alınır; bu işlem birkaç saniye sürer. Sonraki açılışlarda uygulama neredeyse anında başlar.
- Tarayıcıda “Uygulamayı yükle” seçeneği neden görünmüyor?
- Yükleme seçeneği görünmüyorsa site, PWA gereksinimlerini karşılamıyor olabilir. Manifest dosyası eksikse veya HTTPS bağlantısı yoksa tarayıcı kurulum seçeneğini göstermeyebilir. Eski tarayıcı sürümleri de kurulumu desteklemeyebilir. Site sahibi geliştirici, manifest ve service worker dosyalarını kontrol etmelidir.
- PWA internet bağlantısı olmadan kullanılabilir mi?
- PWA, önbelleğe alınan sayfaları internet bağlantısı kesildiğinde açabilir. Kullanıcının daha önce gördüğü içerikler erişilebilir kalır. Yeni içerikleri görüntülemek için bağlantı gerekir. Çevrimdışı erişim, service worker’ın sayfaları önbelleğe almasıyla sağlanır.
Kaynakça
- Progressive web apps (PWAs) — PWA’ların web ve uygulama özelliklerini birleştirmesi, kurulumu, çevrimdışı kullanım ve temel avantajları için genel başvuru kaynağıdır.
- Progressive web apps — PWA kavramını, web uygulamalarının kurulum ve platformlar arası çalışma özelliklerini açıklar.
- Service Worker API — Service worker’ların önbellekleme, çevrimdışı erişim ve arka plan işlevlerindeki rolünü teknik olarak açıklar.
- Install criteria — Web uygulamalarının kurulabilirlik koşulları ve tarayıcıların yükleme deneyimi hakkında bilgi verir.
- Add a website to your Home Screen — iPhone’da Safari üzerinden bir web sitesini ana ekrana ekleme adımlarını doğrular.
- Web Push for Web Apps on iOS and iPadOS — iOS ve iPadOS’ta ana ekrana eklenen web uygulamalarına web bildirimi desteğinin gelişimini açıklar.
- Lighthouse overview — Lighthouse’un web sayfalarını değerlendirme ve performans raporu oluşturma işlevlerine dayanak sağlar.
- HTTPS — HTTPS’in web bağlantılarındaki şifreleme ve güvenli iletişim temelini tanımlar.
