Progresif Web Uygulaması (PWA) Nedir ve Nasıl Çalışır?

PWA nedir?

Progresif web uygulaması (Progressive Web App, PWA), standart web teknolojileriyle yazılmış olup tarayıcının sunduğu modern yetenekler sayesinde yerel bir mobil uygulama gibi davranabilen web uygulamasıdır. Ana ekrana eklenebilir, tam ekran açılabilir, zayıf bağlantıda ya da çevrimdışıyken çalışabilir ve izin verildiğinde bildirim gönderebilir.

"Progresif" sözcüğü, uygulamanın her tarayıcıda temel işlevini sürdürmesi, desteği olan tarayıcılarda ise ek yetenekleri kademeli olarak açması anlamına gelir. Tek bir kod tabanı hem masaüstü hem mobil tarayıcıda çalışır; uygulama mağazasından indirme zorunluluğu yoktur.

PWA'yı oluşturan üç parça

Bir web sitesini PWA'ya dönüştüren üç temel öğe vardır:

• HTTPS: Service worker gibi güçlü yetenekler yalnızca güvenli bağlantı üzerinde çalışır. Bu hem kullanıcı güvenliği hem de ağ isteklerinin araya girilebilmesi için bir önkoşuldur.
• Web App Manifest: Uygulamanın adını, simgesini, tema rengini ve açılış biçimini tanımlayan JSON dosyasıdır. Tarayıcı bu dosyaya bakarak uygulamanın ana ekrana eklenebilir olup olmadığına karar verir.
• Service worker: Tarayıcıyla ağ arasında duran, sayfadan bağımsız çalışan bir JavaScript dosyasıdır. Ağ isteklerini yakalar, yanıtları önbelleğe alır ve çevrimdışı davranışı yönetir.

Bu üçü bir arada olduğunda tarayıcı uygulamayı kurulabilir olarak sunar.

Service worker ve önbellek stratejileri

Service worker, sayfa her istek yaptığında devreye girip yanıtı nereden vereceğine karar verir. Bu karar önbellek stratejisi olarak adlandırılır ve içeriğin niteliğine göre seçilir:

• Önce önbellek: Yazı tipi, simge, uygulama kabuğu gibi nadiren değişen dosyalar için hızlıdır. Önce yerelden verilir, gerekirse ağdan güncellenir.
• Önce ağ: Fiyat ya da stok gibi güncel olması gereken veri için kullanılır; ağ başarısız olursa son önbellek kopyası gösterilir.
• Eskiyi göster, arkadan yenile: Kullanıcıya önbellekteki sürüm hemen sunulurken arka planda yenisi indirilir; haber akışı gibi içeriklerde işe yarar.

Service worker'ın bir yaşam döngüsü vardır: kayıt, yükleme, etkinleştirme. Yeni sürüm yayınlandığında eski önbelleklerin temizlenmesi ve kullanıcının güncel sürüme geçişi bu döngüde yönetilir; bu, PWA geliştirmede en çok hata yapılan alandır.

Küçük bir örnek

Örneğin bir saha ekibi, servis kayıtlarını girdiği bir web uygulaması kullanıyor ve bazı lokasyonlarda bağlantı kesiliyor. Uygulama PWA olarak kurulduğunda uygulama kabuğu (menüler, formlar, yazı tipleri) önbellekten anında açılır. Çevrimdışıyken doldurulan form yerel depoya yazılır; bağlantı geri geldiğinde arka plan eşitlemesi kayıtları sunucuya gönderir.

Kullanıcı açısından uygulama ana ekranda simgesiyle durur, adres çubuğu olmadan açılır ve bağlantı kopsa da çalışır. Geliştirici açısından ise iOS ve Android için iki ayrı uygulama yerine tek bir web kod tabanı bakılır.

PWA, yerel uygulama ve duyarlı site farkı

Duyarlı (responsive) bir web sitesi yalnızca ekran boyutuna uyum sağlar; çevrimdışı çalışmaz, kurulamaz. PWA bunun üzerine kurulabilirlik, çevrimdışı çalışma ve bildirim yeteneklerini ekler. Yerel (native) uygulama ise işletim sistemi API'lerine tam erişim sunar: gelişmiş donanım kullanımı, arka plan görevleri ve mağaza dağıtımı gibi alanlarda daha geniştir.

Seçim ihtiyaca bağlıdır. İçerik ve form ağırlıklı, geniş kitleye ulaşmak isteyen ve mağaza onay sürecine bağımlı olmak istemeyen ürünlerde PWA güçlü bir seçenektir. Platforma özgü donanım özelliklerine ağırlıklı ihtiyaç varsa yerel uygulama gerekebilir. Tarayıcılar arasındaki destek farkları, özellikle bildirim ve arka plan işlemlerinde, projeye başlamadan kontrol edilmelidir.

Sık yapılan hatalar

PWA projelerinde ilk hata, önbelleğe her şeyi almaktır: kullanıcı güncel olmayan veriyi görür ve nedenini anlayamaz. İkinci hata, çevrimdışı durumda kullanıcıya hiçbir geri bildirim vermemektir; bağlantının olmadığını ve işlemin sıraya alındığını açıkça göstermek gerekir. Üçüncüsü, service worker güncelleme akışını tasarlamamaktır; eski sürümde takılı kalan kullanıcılar tespit edilmesi zor hatalar üretir.

Son olarak performans ve güvenlik denetimini atlamak yaygındır. Tarayıcı geliştirici araçlarındaki denetim araçları, manifest ve service worker yapılandırmasının eksiklerini gösterir ve yayına çıkmadan önce çalıştırılmalıdır.

Mindset programlarında PWA

Mindset kataloğundaki Progressive Web App (PWA) Geliştirme eğitimi PWA temellerini ve service worker yaşam döngüsünü, önbellek stratejilerini ve ağ yakalamayı, çevrimdışı veri ve senkronizasyonu, kurulabilirlik ve uygulama kabuğunu, push bildirimlerini, performans, güvenlik ve denetim konularını modüller halinde işler.