Yıllar geçtikçe JavaScript frameworklerinin hızlı gelişimi ile Front End developerların yapabilecekleri farklı bir boyuta geçti ve artık hemen hemen bir projenin tüm ihtiyaçlarını karşılayabilir konuma geldi. Örneğin artık bir web sitesi için NodeJS ile backend tarafını hazırlarken ayrıca React Native ile mobil tarafını hazırlayabiliyoruz veya tasarım aşamasında Angular gibi birçok framework ile işlerimiz kolaylaştırabiliyoruz. Bugün ise son zamanlarda sıkça duyduğum ve Google tarafından geliştirilen Progressive Web App yani PWA’dan sizlere bahsedeceğim.
Progressive Web App Nedir?
Progressive web app en temel mantığı ile ele aldığımızda; tarayıcılarının nimetlerinden faydalanarak web sitelerinin bir uygulama gibi tepki vermesini ve bazı özellikler kazanmasını amaçlamakta.
Son yıllarda tasarım odaklı JavaScript frameworklerindeki artış ile artık responsive tasarıma sahip web sitelerinde çok daha akıcı ve UX için profesyonel çözümler sunuyorken Progressive Web App ile tasarımın yanında uygulamalarda yer alan birçok özelliği web sitelerimize kazandırabiliyoruz.
Peki, PWA ile Neler Yapabiliriz?
Bildiğiniz üzere internet kullanımının yaygınlaşması ile önce bilgisayarlarımızda kullandığımız tarayıcılar sonrasında ise mobil dünyadaki tarayıcılar bize birçok imkan sunmaya başladı. Özellikle Google bu noktada çok fazla atılım yaparak Google Chrome (Chromium) tabanlı işletim sitemi olan Chroimum OS’u sundu. Bu temel mantık Progressive Web App kavramında da karşımıza çıkıyor, hazırladığımız internet sitelerini browserlarımızdaki teknoloji ile birleştiren Google uygulama deneyimine sahip web siteleri oluşturmamızı sağlıyor.
Progressive Web App ile yapabileceklerimiz;
- Splash screen (açılış ekranı) ve tam sayfa gösterim,
- Offline (çevrim dışı) modda web sitemizi kullanabilme,
- Gelişmiş cacheleme işlemleri yapabilme,
- Yavaş internet bağlantısında yüksek performans,
- İşletim sistemlerinden bağımsız hareket edebilme,
- Hızlı güncelleme hizmeti,
- Akıcı animasyonlar sunabilme,
- Uygulama gibi telefonlara yüklenebilme veya desktop uygulaması gibi kullanılabilme
gibi birçok özelliği artık web sitemizi kullanan kişilere sunabiliyoruz.
PWA Entegrasyonu
PWA destekli web siteleri oluşturmak aslında düşündüğünüz kadar zor değil, tabiki işin detayına girildiğinde her özelliği kullanabilmek için farklı geliştirmeler yapılması gerekmekte fakat hali hazır sitenizin PWA destekli olduğunu tarayıcıya söylemek için basit bir manifest dosyası kullanmanız yeterli.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "Bizim Geleceğim - Çok Yakında", "short_name": "Bizim Geleceğimiz", "icons": [ { "src": "bizimgelecegimiz.png", "type": "image/PNG", "sizes": "144x144" } ], "start_url": "/", "display": "standalone", "background_color": "#000fff", "theme_color": "#343643" } |
Yukarıda gördüğünüz PWA için hazırlanmış manifest dosyası. Bu dosyada uygulamanız için title, kısa isim, icon ve renk gibi çeşitli ayarları browsera belirtebiliyorsunuz. Bundan sonra sitemizi ziyaret eden kullanıcılar eğer güncel bir tarayıcıya sahip ise web sitenizi telefonlarına uygulama gibi ekleyebilir hatta bilgisayarda yüklü bir uygulama gibi açabilir.
Service Worker Nedir ?
Yazımın başlarında sizlere PWA ile web sitenizi kullanıcılar çevrimdışı (offline) modda da kullanabileceklerini söylemiştim. İşte bunun için service worker teknolojisinden faydalanıyoruz. Service worker JavaScript ile hazırlanmış bir script. Her ne kadar JS kullanılarak hazırlanmış olsa da service worker DOM özelliklerine müdahale edemez, arka planda sunucudan gelen push notification veya değişiklikleri dinler ve herhangi bir durumda kullanıcıya iletir.
Sunucumuzda service worker entegrasyonu yapabilmek için ise tek şart ise HTTPS protokolünü kullanmak.
PWA ile Performans
Progressive Web App teknolojisinin temel amacı kullanıcılara uygulama deneyimine sahip web siteleri sunmak olduğu için performans da bu noktada çok önemli bir kriter. Bu anlamda Google bazı noktalara dikkat etmemizi istiyor.
Her şeyden önce Google kullanılan animasyonların 60 Fps altında bir değer sunmaması gerektiğini belirtiyor. Eğer PWA kullanan bir siteye sahipseniz Flip adlı animasyon kütüphanesini de kullanabilirsiniz. Bu kütüphane ile sitenizde ki geçişleri çok daha akıcı yapmanız mümkün.
Animasyonların yanında diğer bir önemli konu ise sayfaların yüklenme süreleri ki bu aslında her web sitesi için çok önemli çünkü yine Google açıklamasına göre siteniz rakiplerine göre %1 daha yavaş açılması %11 oranında daha az sayfa görüntülenmesi anlamına geldiğini belirtiyor.
PWA ile bu noktada RAIL Performance modelini kullanmamızı tavsiye ediyor. Bu modelin temel mantığı sayfada ki tüm componentlerin yüklenmesinin parça parça yapılarak kullanıcıları en az oranda bekletmek. Critical Rendering Path bu noktada PWA için çok önemli. Birçok mobil uygulamada aslında bu mantık ile çalışmakta hatta birçoğumuz Instagram veya diğer sosyal medya uygulamalarında bu duruma şahit olmuştur.
Architecture (Application Shell)
Yazı boyunca vurguladığım gibi PWA ile her şeyden önce amaç; performans açısında siteleri bir adım ileriye taşıyabilmek ve uygulama deneyimini kullanıcılara sunabilmek. Bu noktada sitenizde statik olan alanları cacheleyerek kullanıcılara sadece dinamik alanları yüklemesini sağlayabilirsiniz. Örnek vermek gerekirse sitenizde ki menü her sayfada ve uygulama açıldığında standart ise menü yapınızı cacheleyerek ilk yüklenme süresini çok fazla düşürebilirsiniz.
PWA ve Google Arama Sonuçları
PWA her ne kadar Google tarafından geliştirilmiş olsa da aslında arama sonuçları için Google tarafından filtrelenen kriterler arasında değil.
Kısaca Progressive Web App
Progressive web app temel mantığı tüm yazı boyunca bahsettiğim gibi aslında web sitelerinizin tarayıcınızın özelliklerini kullanarak kullanıcılara platform bağımsız bir uygulama sunabilmek. Yani siz ister Android telefofona sahip olun ister IOS telefonlarınızda PWA özelliklerini kullanabilirsiniz. Ayrıca asıl önemli nokta PWA sadece mobil işletim sistemlerinde değil 2018 yılında Google tarafından yapılan bir güncelleme ile bilgisayarlarımızda da kullanılabilir bir formata kavuştu. Daha önce Html + Css ve JavaScript ile masaüstü uygulama yazmamızı sağlayan Electron frameworku mevcuttu fakat bu noktada eksik kalınan nokta sadece masa üstü için bir çözüm sunması ve belirli entegrasyon işlemlerinin gerekmesi, PWA ise hem mobil hem de desktop için bize kolaylık sağlıyor, ayrıca kod yapımızı değiştirmemize birçok noktada gerek yok.
Sizde artık PWA nimetlerini canlı olarak görmek ve bize neler sunduğunu incelemek isterseniz sizlerle birkaç örnek site paylaşıyorum.
Masaüstünde PWA incelemek için Spotfiy web player sayfasına buraya tıklayarak gidebilirsiniz.
Mobil olarak ise Spotify, Twitter, Instagram veya Sturbucks mobil web sitelerini inceleyebilirsiniz.
Ayrıca PWA resmi internet sitesini ziyaret etmek için buraya tıklayabilirsiniz.