Progressive Web App nedir?
İnternet sitelerinin tıpkı cep telefonlarımızdaki mobil uygulamalara benzeyen görünüme getiren uygulamalara denir. Kısaltması PWA ve PWApp’dir.
Bir web sitesi mobil uygulama gibi kullanmamızı sağlayan bir teknoloji. Aşağı yukarı tüm tarayıcılar destekliyor.
Progressive Web Apps‘in çalışma mantığı:
Android telefonunuzdan Chrome’da Progressive Web Apps bir siteye girdiğiniz an Snackbar bu siteyi telefonunun home ekranına eklemek isteyip istemediğini soruyor,
Kabul edersen telefonuna uygulamalardaki gibi bir ikon ekleniyor. (Bu ikonu kısayol olarak düşünebilirsin.)
İkona bastığın an mobil browserdan kurtulup mobil uygulama gibi tam ekran Progressive Web Apps deneyimini yaşıyorsun.
Progressive Web App’ın özellikleri
SEO çalışması yaparken sıkça bahsettiğim kullanıcı deneyimi kavramı burada da karşımıza çıkıyor. PWA’nın asıl amacı kullancıya daha konforlu bir web deneyimi yaşatmak olduğunu düşünürsek bunun SEO’ya katkısını siz hesaplayın :)
Kullanıcı internet sitenize çevrimdışı olarakta girebilir. Web sitesini indirdip sonra okumak için geri döndüğünü düşünün.
Mobil uygulamalarda olduğu gibi ana ekrana kısayol simgesi ekleyebilirsiniz.
İnternet siteniz responsive yani duyarlı bir tasarıma sahip ise ekranın daha iyi dolmasını sağlar. Dolmaktan kastım şu; ekranın en verimli şekilde kullanılması.
Bildiğiniz gibi son bir kaç senedir Push notification yani “Web sitesi bildirimleri” bayağı popüler olmuş durumda. Bu özelliğe onay veren kullanıcılara bildirim gönderebiliyorsunuz.
PWA olarak hazırlanmış bir uygulamanın kullanımı
İnternet sitenizin PWA olarak algılanabilmesi için manifest denilen bir dosyaya ihtiyaç vardır. Bu dosya uygulamaya ait bilgileri saklar.
Örnek manifest dosyası
{
"name": "Devnot – Yazılımcının Magazini",
"short_name": "Devnot",
"icons": [
{
"src": "devnot.png",
"type": "image/PNG",
"sizes": "144x144"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#282828"
} Manifest dosyası kullanımı
- Aşağıdaki kodu header.php sitenizin üst bölümüne yapıştırın.
- Çalışması için yukarıdaki manifest kodlarını kendinize göre düzenledikten sonra manifest.json olarak kaydedin.
- href=”manifest.json” (href yazan yere sitenizin url adresini yazın.)
<link rel="manifest" href="manifest.json">
Pwa Kullanmak için neler gerekli?
PWA konusunda daha detaylı bilgi almak isterseniz kapsamlı bilgi almak isterseniz https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ adresini ziyaret edebilirsiniz.
Dünyadaki popüler PWA uygumalarını inceleyip test etmek isterseniz de https://pwa.rocks/ bu adrese göz atabilirsiniz.
