Mobil uygulamalar dünyasında yıldızı parlayan genç bir yeteneğimiz daha var: Progressive Web Apps (PWA). Google’ın her platformda artık daha sık duyurduğu ve bilinirliği de her geçen gün artan Progressive Web Apps ile birlikte, “Hibrit mi, native app mi?” tartışmasında yeni bir cephe daha açılmış durumda. Bu yazımızda PWA, sağladığı avantajlar ve kullanımından bahsedeceğiz.
En baştan alalım: Nedir bu PWA?
PWA, modern web teknolojilerinin sağladığı yeni yetkinlikleri kullanarak, web sitenizi mobil cihazlarda birer native uygulama deneyimiyle kullanmanızı sağlıyor. JavaScript ile Service Worker üzerinde yaptığınız düzenlemeler, mobil cihazınızın bir çok yetkinliğine erişebilmenize olanak sağlıyor.
PWA tarafından geliştiricilere sunulan imkanlar oldukça etkileyici. Tıpkı native uygulamalarda olduğu gibi mobil cihazların bir çok özelliğine erişebiliyorsunuz. Örneğin;
- Bildirim gönderebilir,
- Kamera, mikrofon gibi donanımlara erişebilir,
- Diğer uygulamalar arasında listeleyerek, tarayıcı kullanmadan uygulamaya erişebilir,
- Çevrimdışı çalıştırabilirsiniz.
Google tarafından desteklenen PWA’ler, uzun süre sadece Chrome ve Android cihazlar sınırlı kaldı. Özellikle iOS’un 11.3 versiyonu ile birlikte PWA’lerin bir çok özelliği artık iPhone ve iPad cihazlarda da kullanılabilir hale geldi. Android SDK üzerinde PWA’lerle ilgili yapacağınız düzenlemeler ise, geliştirdiğiniz uygulamayı Google Play üzerinden erişilebilir olmasını sağlayabiliyor. Şu an Microsoft Edge‘de “Ana ekrana ekle” özelliği de kullanılabilir durumda. Chrome işletim sistemi de PWA’lerin tarayıcı üzerinden uygulama olarak yüklenip kullanılabilmesini destekliyor. Bazı duyumlara göre, yakın zamanda Windows uygulama dükkanına PWA’ler de eklenebilecek.
Tüm tarayıcıların desteğini almasıyla birlikte bu yıl PWA’in yükselişinin yılı olacağa benziyor. Her geçen gün adını çok daha fazla yerde duymaya devam ediyoruz. Geçtiğimiz günlerde gerçekleştirilen Google I/O ’18 etkinliğindeki sunumların neredeyse yarısından fazlası PWA teknolojisine mutlaka bir noktadan dokunuyordu.
Biraz detaylandıralım: Web sitenizi nasıl PWA’e dönüştürebilirsiniz?
Bir web sitesini PWA’e dönüştürmek aslında çok kolay. Bunun için 3 önemli adımı atmanız gerekiyor. Bunlar:
1) 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.
2) 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.
3) 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.
Gelelim sadede: PWA’lerin sağladığı avantajlar neler?
PWA’lerin sağladığı avantajların başında web sitenizi çok hızlı bir şekilde bir uygulamaya dönüştürebilmeniz geliyor. Native uygulamalar, uygulama marketlerinde listelenir ve güvenlik, performans açısından problem yaşama olasılığınız çok düşüktür. Offline durumda erişilebilir bazı araçlar sunabilirler. PWA’lerin asıl amacı native uygulamaların sağladığı bu olanaklara web sitelerinin de erişebilmesidir. PWA’lerin sağladığı avantajları şöyle sıralayabiliriz:
- Web sitenizi, native uygulamalardan ayırt edilmeden, cihazın uygulama dizininde listeleyin. “Add to Homescreen” opsiyonuyla web sitenizi Android cihazlarda tıpkı bir uygulama gibi listeleyebilir, varsayılan bir uyarı aracılığıyla kullanıcıya bu tercihi sunabilirsiniz.
Ayrıca, eğer isterseniz varsayılan uyarıyı devredışı bırakıp, ziyaretçilerinize istediğiniz an bu aksiyon için bildirim gösterebilirsiniz. Her ne kadar bu özellik şu an iOS cihazlarda olsa da, bildirim göstermenize ya da “Ana ekrana ekle” eventini istediğiniz yerde tetiklemenize şu an izin vermiyor.
- 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.
- Kullanıcılarınızla etkileşim kurmaya devam edin. Anlık bildirimler sayesinde kullanıcılarınızla bağlantı kurmaya devam edebilirsiniz. Onlara uygulamanız/websiteniz kapalı olduğu durumlarda bile, tıpkı native uygulamalar gibi bildirim gönderebilirsiniz. Şunu da belirtmiş olayım: Bildirim gönderimi şu an iOS cihazlarda kullanılabilir değil.
- Güncellemenize gerek yok. PWA’leri yükleme zorunluluğunuz olmadığı gibi 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.
Peki PWA’lerin dezavantajları?
En önemli dezavantajı aslında yeni bir teknoloji olmasından kaynaklanıyor: Henüz yeteri kadar cihaz ve tarayıcı tarafından desteklenmiyor. Özellike iOS tarafında henüz çok yeni. Bu yüzden bir çok özellik kullanılabilir durumda değil ya da sınırlı bir şekilde destekleniyor.
Sosyal medya platformlarındaki uygulama içerisindeki tarayıcılar, PWA’lerin birçok özelliğinin kullanılmasını engelliyor. Aynı şekilde mobil tarayıcıların bir çoğu da hala PWA kullanımına izin vermiyor. Örneğin iOS cihazlarda PWA’i yüklemek için Safari kullanmanız zorunlu. Chrome ve Android cihazlarda ise PWA’lerin desteklediği bir çok özellik, işletim sistemi engelinde dolayı erişilebilir değil.
Ancak dediğim gibi bu dezavantajlar PWA teknolojisinin henüz çok yeni olmasından kaynaklanıyor. Web teknolojilerinin ne kadar hızlı ilerlediğini düşünecek olursak, kısa bir süre içinde bir çok dezavantajın giderileceğini söyleyebiliriz.
Özetleyelim
Uygulama geliştirme konusunda bir karara varmak, bir çok soruyu da beraberinde getiriyor.
- Geliştireceğiniz uygulama sizin için ya da müşteriniz açısından ne kadar faydalı?
- Ayıracağınız bütçe ne kadar olmalı?
- Hangi platformlar için geliştirmelisiniz?
- Kullanıcılar gerçekten bir uygulama daha yüklemek istiyorlar mı?
Gel gelelim PWA teknolojisi sayesinde bu problemlerin hepsini aşabiliyoruz. herhangi bir web sitesini, isteyen kullanıcılarınız için çok hızlı bir şekilde yüklenebilir bir uygulamaya dönüştürebiliyor ve yukarıdaki soruların büyük bir kısmını ortadan kaldırabiliyorsunuz. Böyle bir özgürlük, hem kullanıcılarınız hem de sizin için beliren uygulama ihtiyacı açısından çok daha geniş bir oyun alanı sağlıyor.
PWA’ler henüz çok yeni. Geliştirmeye açık olan bu teknoloji, halihazırdaki özellikleriyle native ve hibrit uygulamalara çok net bir alternatif sunarak çetin bir savaşı başlatacak gibi görünüyor. Web teknolojileri geliştiricilerinin bu alana bakmasında fayda var.