Progressive Web App Nedir?

Tamamen çevrimdışı çalışan bir web sitesi oluşturma yeteneğinizin olduğunu, kullanıcılarınıza anında yükleme süreleri sağladığınızı ve aynı zamanda güvenilir olmayan ağlara karşı güvenli ve esnek olduğunuzu düşünün.

Kulağa hem imkansız hem de inanılmaz gibi geliyor! İster inanın ister inanmayın, çoğu modern tarayıcı zaten bu özelliklere sahiptir ve bunların sadece kilidinin açılması gerekir. Bu güçlü özelliklerden yararlanan bir web sitesi oluşturduğunuz zaman Progresif Web Application(PWA) sahip olursunuz.

PWA ile ilgili bir tanım yapmam gerekirse web sitelerinin native bir uygulama gibi kullanılabilmesini ve çevirimdışındayken bile çalışmasını sağlayan bir teknolojidir.

Progressive Web App fikri nasıl ortaya çıktı?

Aslında PWA’ nın arkasında kim olduğuna bakmak lazım. Tasarımcı Frances Berriman ve Google Chrome mühendisi Alex Russell, mobil deneyimini ve modern tarayıcılardan gelen desteği bir araya getirmeyi düşünerek 2015 yılında “PWA” terimini tanıttı. Alex Russell “Progressive Web Apps: Escaping Tabs Without Losing Our Soul“ adlı makalesinde PWA’nın temellerini oluşturdu. Google ise bu kavramı ilerleterek sağlamlaştırdı.

Progressive Web App & Native App

İlerleyen yıllarda mobil uygulamaların %50 si PWA olacağı söyleniyor. Bu iddiayı güçlendiren noktalara bakacak olursak Native App’ler ile Progressive Web App’leri karşılaştırmamız gerekir.

1- Progressive Web App’ler native pluginlere sahiptir.

2- Progressive Web App’lerin store’dan indirilme ihtiyacı yoktur.

3- Progressive Web App’lerin uygulama boyutu native app’lere göre daha küçüktür.

4- Native App’lere göre daha hızlı yüklenir.

5- Progressive Web App’lerin arama motorlarında bulunma olasılığı daha fazladır.

Neden Progressive Web App kullanmalıyım?

Günlük hayatta kullanıcıların yaşadığı hali hazırdaki problemler bizi bu alt yapıyı kullanmaya itebilir.

Bunları inceleyecek olursak:

1-İnternet Hızı:

Yaşadığımız lokasyona göre farkedemeyebiliriz ancak Dünya nüfusunun %60'ı hala 2G internet kullanmaktadır.

Peki internet kalitesinin düşük olduğu veya internetin bulunmadığı ortamlarda Progressive Web App’in ne gibi bir yararı olabilir?

Service Worker alt yapısı sayesinde verileri cache’lediği için internetin olmadığı hatta düşük kaliteli ağlarda bile uygulamamızı yüksek performanslarda kullanmamızı sağlar.

2-Yavaş Yüklenme

Web sitesinin yüklenme süresi çok yavaş ise kapatmak için ne kadar süre bekliyorsunuz?

3 SANİYE! Kullanıcıların %53’ü çok yavaş ise siteyi terk eder.

App Shell mimarisi ve Service Worker yardımıyla Progressive uygulamalar statik verileri cache’ler ve versiyon değişikliğinde içeriği dinamik olarak alma eğilimi gösterir. Böylece uygulamamız her zaman hızlı çalışır.

3-Kullanıcı Etkileşimi

Kullanıcılar vakitlerinin çoğunluğunu mobil uygulamalarda geçirmeyi tercih ediyor. Ancak Web’e erişim, mobil uygulamaların neredeyse 3 katıdır.

Tam bu noktada devreye PWA giriyor. Web deneyimini kusursuz bir şekilde mobil’e dönüştüren teknolojisi sayesinde yaptığınız uygulamalar daha erişilebilir bir düzeye gelecektir.

4- İndirme Problemi

Kullanıcılar vakitlerinin %80’ini en beğendikleri 3 uygulamada harcıyor.

Native uygulamaların cihazda fazla yer kaplaması ve store’dan indirilme süreçlerinin uzun sürmesi Progressive Web App’in artı yönlerini açığa çıkarmasına olanak sağlıyor.

Progressive Web App’lerin boyutlarının küçük olması ve herhangi bir storedan indirilme ihtiyacı duyulmadan kullanılabilmesi sayesinde bir adım öteye çıkıyor.

PWA’ya neden ihtiyacımız var? Kısacası : F.I.R.E

1-Fast

Kullanıcı uygulamayı indirmeye başladığı andan itibaren süreci çok hızlı ilerler. Veriyi cachelediği için ağır ve kesintili ağlarda bile yüksek performansla çalışır.

2- Integrated User Experience

PWA’nın kullanım hissiyatı ve davranışları native uygulamalar gibidir.

Örneğin:

• Icon olarak cihazın ana ekranına eklenebilir.
• Cihazın native özelliklerine erişebilir.
• Push Notifikasyonu gönderebilir.

3- Reliable Experience

Network’de kesinti olması durumunda bile service worker yardımıyla app’e erişilebilir.

4- Engaging

Kullanıcıya push notifikasyon göndererek, kullanıcıyı etkileşimleri noktasında bilgilendirir. Bu sayede uygulamanın kullanımında süreklilik sağlar.

5-Hangi browserlar destekliyor?

PWA ‘nın geleceği hakkında düşündüğümüzde ise şu konular üzerinden ilerlemek daha faydalı gibi gözüküyor.

2020 yılına gelindiğinde Apple ve Google’ın Store’larında milyonlarca uygulama olacaktır. Bu uygulamalar arasında küçük ölçekli olan uygulamaların keşfedilebilirliği oldukça düşecektir. Bu yüzden herşey için native uygulama yapılmalı mottosu pek sürdürülebilir gözükmüyor. PWA’lar geliştirici şirketleri için maliyet olarak oldukça düşüktür. Zaman ve geliştirici ekibi olarak düşünüldüğünde kısa zamanda az maliyetle bir PWA’ya sahip olabilirsiniz.

Peki Microsoft, Google ve Apple için tek bir uygulama standartı olabilir mi?

PWA bunun için çok güzel bir equalizer olabilir. Evrensel ortak bir platform, geliştirilmesi kolay, kısa sürede geliştirilebilen düşük maaliyetli uygulamalar demektir.

Microsoft & Google

Microsoft’un program yöneticilerinden Jeffrey Burtoft, Google ile birlikte ilerlemek ve web geliştiricilerine tüm platformlarda çalışan uygulamalar sağlamak için ortak bir platform sağlayacaklarını söylemiştir.

Windows 10 ile beraber Progressive Webb App’leri Microsoft Store’da görmeye başladık.Microsoft Store aracılığı ile yüklenen PWA’lar browser’ın kaynak yükü olmadan, kendi sandbox container’ında çalışır.Windows 10’da bir appx olarak yüklenmiş olur. Peki bunun ne gibi faydaları var?

Mağaza aracılığı ile yüklenen PWA’lar, start ve cortana gibi “app” bağlamlarında görünebilecek ve UWP uygulamalarının kullanabileceği tam kapsamlı WinRT API’larına erişebilecekler. Bu sayede takvim,rehber ve daha fazla özelliklere erişerek Windows 10 deneyimlerini arttırabilecekler.

Microsoft Store’da bulunan bazı Progressive Web App’ler:

• Skyscanner
• Student Doctor Network
• OfferFinder.net
• Ziprecruiter
• ASOS
• Space
• Daytrip
• The Pennyy Hoarder

IOS & Progressive Web App

Ocak 2018’de Apple, IOS 11.3 beta ile ilk PWA desteğini vermiştir. Bu sürümde çıkan bugları Ocak 2019da çıkan IOS 12.2’nin beta sürümüyle iyileştiremeye çalışmışlar. Ancak hala bazı eksiklikleri bulunuyor.

Progressive Web App Bileşenleri

Bu 3 bileşenle çevirimdışı çalışabilen ve cachede static veriler tutabilen temel bir PWA’ya sahip oluruz.

1-WEB APP MANIFEST

Bu json dosyası web uygulaması hakkında meta bilgiler verir.

• “name” ve “short_name” uygulamamızın isim ve kısa isim bilgilerini içerir
• “start_url” uygulamamızın başlangıç noktasını verir.
• “scope” manifest.json’ın geçerli olacağı scope’u belirler. Burada “.” diyerek tüm projede geçerli olduğu belirtilmiştir.
• “icons” uygulamamızın farklı iconları bu array içerisine size’ı ile beraber tanımlanır.
• “display”: 4 farklı modu vardır. Uygulamamız açıldığı zaman ana ekranda nasıl gözükeceğini belirler.

• “dir”: yazılış yönünü verir.
  ltr (left to right) Türkçe, İngilizce gibi diller için geçerli, rtl (right to left) Arapça gibi diller için geçerli

Uygulamayı Ana Ekranımıza Eklememiz İçin Gerekli Değerler

Uygulamanızı cihazınızın ekranına eklemek istiyorsanız manifest dosyanızda minimum şu değişkenlerin olması gerekir.

1. name
2. short_name
3. icons
4. start_url

2-Service Worker

Uygulamamız çalıştırılmaya başlandığı andan itibaren service worker ağ durumuna bakmaksızın PWA’ yı etkinleştirir. Service worker bir proxy gibi davranır.

Sizin cache’ i nasıl denetleyeceğinize ve isteklere karşı nasıl yanıt vereceğinizi yönetir. Service Worker uygulama ile ağ arasına konumlanır. İçeriğin cachedan ne zaman alınması gerektiğine ve ağa ne zaman geçeceğine karar verir.

Periyodik arka plan senkronizasyonu, push notifikasyonlar, çevrimdışı çalışma gibi native uygulama özellikleri Service Worker yardımıyla Web’e geliyor!

Service Worker’lar Browser’ın arkasında çalışır ve çalışırken kullanıcı etkileşimine ihtiyaç duymazlar.

Service Worker Çalışma Mantığı

Service Worker arka planda birçok iş yapıyor ve uygulamayı çevrimdışı bir hale getiriyor. Böylece internetimiz olmasa bile uygulamamızı kolaylıkla kullanabiliyoruz.

Normal javascripti incelemek ile işe başlayalım. Bilinmesi gereken en önemli şey ise javascript dosyaları tek bir iş yapar.

Yani bir web uygulamasını ziyaret ettiğinizde o sayfa veya o uygulama size javascript uygulayan bir HTML sayfası döndürürse, bu sayfada yüklenen javascript kodu tek bir thread’de çalışır. Eğer birden fazla JS varsa bunlarda bu tek tread’i paylaşır. HTML sayfaları tarafından yüklenen javascript dosyaları bu sayfaların DOM’larına erişebilir.

Service workerlar bir javascripttir. Ancak farklı özelliklere erişebilir. Diğer javascript dosyalarından ayrı bir thread de çalışırlar. Service Worker başlangıçta HTML sayfası sayesinde kayıt edilsede bir kez kayıt olduktan sonra belli bir kapsamı olur.

Service Worker tarayıcıdaki tüm sekmeler kapatılsa bile yaşarlar. Özet olarak Service Worker arka planda yürütülen arka plan işlemleridir diyebiliriz. .

Service Worker Özellikleri

1-Fetch

Fetch gönderilen olayların tümüdür. Request ve responselar ile iligli bilgileri içerir.

Örneğin: index.html ile ilgili bir get isteği yaptım. Belirtilen isteğin içeriği ile ilgili kaynakları getirir.

2-Push Notification

3-Notification Iteration

Örneğin kullanıcı ekranına düşmüş bir bildirime dokunduğunda onunla ilgili birşeyler yapmak için bu eventi dinleyebilir. Bu event ile Service Worker’daki bildirimlerle kullanıcı etkileşimine tepki verebilirsiniz.

Neden Service Worker ile yapıyoruz?

Bu bildirim açık bir sekme ile ilgili olmayabilir veya uygulamanız açık olmayabilir. Service Worker hep çalıştığı için bildirim etkileşimini işlemenin en iyi yoludur.

4- Background Sync

Örneğin internet bağlantınız düşük veya kesildi. Siz bir işlem yaptınız. Internet bağlantınız kurulduktan sonra bu işleminizin gerçekleşmesini istiyorsunuz.Bunun için kullanılır.

Peki neden Service worker ile yaptık?

Uygulamayı kapatsanız bile arka planda internet bağlantısının tekrar kurulduğunu anlar ve bu işlemi gerçekleştirir.

Service Worker Lifecycle

1- Register

Bir Service Worker dosyasını normal bir JavaScript dosyasından ayıran şeylerden biri Service Worker’ın arka planda çalışmasıdır. Service Worker’ı kullanmadan önce, arka plan işlemi olarak kayıt etmeliyiz. Bu lifecycle’ın ilk aşamasıdır.

Service Worker’ı tüm tarayıcılar desteklemediği için, kodda öncelikle browser’ın Service Worker’ı destekleyip desteklemediğini kontrol edilir. Navigator nesnesi ile browser’ın Service Worker özelliği olup olmadığı kontrol edilir. Bu süreçten sonra aslında projeye bir Service Worker eklenmiş olur.

Google Developer Tool üzerinden ise Service Worker’ın durumu ile ilgili bilgileri görebiliriz.

2- Install

Service Worker kurulduktan sonra bir install olay başlatılır. Bu olayı dinleyebilir ve uygulamaya özel bazı görevler gerçekleştirebiliriz.

Örneğin, uygulama statik değerleri bu noktada cache’e alabiliriz.

self diyerek Service Worker’a atıfta bulunuyoruz. addEventListener komutuyla arka plan işlemleri için Service Worker ‘dan izin istiyoruz.

3- Activate

Bir Service Worker kurulum sırasında hemen active olmaz. Active olduğu durumlar şunlardır:

• install eventinde self.skipWaiting() çağırılırsa
• Kullanıcı sayfayı yenilerse
• Şu anda aktif servis worker yoksa

Activate ile uygulamaya özel bazı işler yapabiliriz. Örneğin, cache’i temizlemek için kullanılabilir.

Yukarıdaki kod parçası, tüm cache verileri arasında dolaşır ve cache mevcut service worker’a ait değilse bunu siler.

Service Worker aktif olduktan sonra fetch, push ve sync artık tetiklenebilir.