Progressive Web Apps (PWA) Nedir ?

PWA nedir?

Progressive Web Apps (PWA), kullanıcılara mobil uygulama benzeri bir deneyim sunmak için modern web yeteneklerini kullanan bir web uygulaması dır. Bu uygulamalar belirli gereksinimleri karşılar. Sunucular ile beraber, URL'ler aracılığıyla erişilebilir ve arama motorları tarafından dizine eklenir.

Güncellemenize gerek yok. PWA’leri güncelleme zorunluluğunuz da yok. PWA’ler aslında bir domaine bağlı olarak çalışan web siteleri olduğu için sitenizde yaptığınız herhangi bir güncelleme, doğrudan uygulamanıza da yansır.

Bağlantı durumunuz ne olursa olsun, kullanıcılarınızı kaybetmeyin. PWA’ler en düşük bağlantı hızında bile kullanıcı deneyimini kötü etkileyecek görüntülenme bozuklukları ve geç bağlantı problemleriyle karşılaşmanıza engel olur. “Cache” mekanizmaları ile uygulamanızın yavaş bağlantılardan etkilenmesine engel olursunuz.

İOS'ta PWA'ların yetenekleri

Coğrafi Konum
Sensörler (Manyetometre, İvmeölçer, Jiroskop)
Kamera
Ses çıkışı
Konuşma Sentezi (sadece kulaklıklara bağlı)
Apple Pay
WebAssembly, WebRTC, WebGL yanı sıra bir bayrak altında birçok diğer deneysel özellikleri.

Yerel iOS uygulamalarıyla karşılaştırıldığında sınırlamalar

Uygulama çevrimdışı veri ve dosyaları yalnızca 50 Mb'ye kadar saklayabilir
Kullanıcı uygulamayı birkaç hafta boyunca kullanmıyorsa, iOS uygulamanın dosyalarını serbest bırakır. Simge ana ekranda hala var olacak ve erişildiğinde uygulama tekrar indirilecek
Bluetooth, seri, Beacons, Touch ID, Face ID, ARKit, altimetre sensörü, pil bilgisi gibi bazı özelliklere erişim yok
Arka plandayken yürütme koduna erişim yok
Özel bilgilere (kişiler, arka plan konumu) ve yerel sosyal uygulamalara erişim yok
Uygulama Ödemelerine ve diğer birçok Apple tabanlı hizmetlere erişim yok
İPad'de, diğer uygulamalar ile ekranı paylaşan Side veya Split Views ile çalışmaya erişemezsiniz, PWA'lar her zaman tüm ekranı kaplarlar.
Push Bildirimleri, simge rozeti veya Siri entegrasyonu yok

Android'de, PWA'ların neler yapabileceği

Android'de 50 Mb'den daha fazla depolayabilirsiniz
Uygulamayı kullanmazsanız Android dosyaları silmez, ancak dosyaları depolama baskısı altında silebilir. Ayrıca, kullanıcı tarafından çok yüklü veya kullanılmışsa, PWA Kalıcı Depolama talebinde bulunabilir
BLE cihazları için Bluetooth erişimi
Yerel paylaşım iletişim kutusuna erişmek için Web Share
Konuşma tanıma
Arka Plan Senkronizasyonu ve Web Push Bildirimleri
Kullanıcıyı uygulamayı yüklemeye davet eden Web App Banner
Açılış ekranını ve yönlerini özelleştirebilirsiniz (biraz)

Peki PWA için neler gerekli:

SSL: PWA olarak hazırlayacağınız web sitenizin mutlaka SSL’e sahip olması gerekiyor. Bu uygulamanızın güvenilirliği açısından da çok önemli. Google geçtiğimiz aylarda SSL olmayan web sitelerini arama sonuçlarında güvenli olmayan siteler arasında listeleyeceğini duyurmuştu. Aslında artık SSL kullanımı neredeyse zorunlu hale geldi.

Web App Manifest: Manifest.json aslında uygulamanızın ayar dosyasıdır. Tarayıcıların tanıyabilmesi için dosyanın konumunu HTML içerisinde belirtmeniz gerekiyor. Manifest.json ile uygulamanızın, hangi cihazda hangi ikonu kullanacağını belirleyebilir, tarayıcı çerçevesi görüntülenmeden fullscreen modda gösterimini seçebilir, rengine karar verebilir, yatay ve dikey gösterim modunu düzenleyebilirsiniz. Manifest.json ile hangi ayarların yapılandırılabildiğini daha detaylı incelemek için Google ve MDN sayfalarını inceleyebilirsiniz.

Service Worker: Service worker ile PWA ile anlık bildirimler, seçilen dosyaların “cache”lenebilmesi, offline durumda uygulamanızı çalıştırabilme ve arkaplanda senkronizasyon (background sync) gibi özelliklerle ilgili ayarları yapabilirsiniz. Bunun için öncelikle bir Service worker Javascript dosyası oluşturmanız ve bunu index.html altında Service worker olarak tanımlamanız gerekiyor. Service worker ile ilgili debugging işlemlerini DevTools üzerinden Uygulamalar (Application) altından kontrol edebilirsiniz.

Özetle PWA:

Güvenilir: Hızlı yükleme ve çevrimdışı çalışabilir

Hızlı: Pürüzsüz Animasyonlar, internetsiz gezinti, takılmadan kaydırma(scrolling)

Ek özellik: Ana ekrandan başlatma ve push bildirimi