Desktop ve Mobil Web’in Geleceği: Progressive Web Apps

ataman
ataman
Mar 30, 2016 · 5 min read

Mobile Neden Önemli?

2015, 2016, 2017 ve 2018… “Bu yıl mobilin yılı olacak” sözünü sıkça duyuyoruz. Bu sözün arkasında yatan sebebi grafikler açıklıyor.

Aşağıda 2015 yılına ait platformlara göre geçirilen ortalama süre gösteriliyor.

Mobil, TV’den sonra en çok zaman geçirdiğimiz ekran.

Bir diğer rapor ise internette geçirilen sürenin platformlara göre bölünmesi ile oluşturulmuş.

Internette geçirilen sürede mobil en önde.

Yazının devamına aşağıdaki linkten ulaşabilirsiniz.


Progressive Web Apps Nedir?

Progressive Web Apps, mobil internet tarayıcısı üzerinden uygulama deneyimine ulaşmaya çalışan yeni web development yaklaşımıdır.

Bu deneyime ulaşmak için Vanilla JS, React, Polymer ve Angular gibi frameworkleri kullanır.

Kısaltması PWApp’dir.

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 Apps’in Özellikleri

  • Service Worker ile slow internet rağmen hızlıca yüklenme,
  • Bir uygulama gibi telefonun ekranında icon koyabilme,
  • Full Screen sayfa gösterimi ve Splash Screen,
  • Push Notification gönderme,
  • Service Worker’ın gelişimi ile offline mode çalıştığı gibi slow connectionda da sorunsuz çalışma,
  • Kullanıcıyı Google Play Store’a yönlendirmeden tarayıcı üzerinden home screen icon ekleme,
  • Uygulama navigationunu ve uygulama interactionlarını kullanabilme,
  • Cep telefonunuza sadece kısayol iconu eklediği için mobil uygulamaları yüklerken karşılaştığımız yetersiz hafıza sorunu ile karşılaşmama.

Progressive Web Apps Prensipleri

1. Web App Manifest

Manifesto basit bir JSON file ile başlar. Appinin görünümü kullanıcıların onu nasıl çalıştıracağı Web App Manifest’in temel konusudur. Browser üzerinden native app görünümünü sağlar. URL barın görünümünden uygulamayı kurtarır ve Splash Screen (uygulama açılış ekranı) eklemenizi ve uygulama ikonu kullanmanızı sağlar.

Firefox ve ’te Web App Manifest’le ilgili geliştirmeler başlandı. Apple tarafından ise henüz bir ses yok.

Manifesto ile ilgili gerekli dosyaları Web Starter Kit, , ve örneklerinden bulabilirsiniz.

2. Service Worker

Service Worker, offline modda (örneğin metroda internetiniz yokken) uygulamayı kullanmayı sağladığı gibi siteyi tekrar ziyarete gelen kullanıcının ana sayfayı hızlı bir şekilde yüklemesini de sağlar.

3. Push notification

Push Notification, web sitelerinin browser üzerinden bildirim göndermelerini sağlayan bir servis olarak tanımlıyoruz. Web Push’la ilgili ayrıntılı bilgiye adlı yazımdan ulaşabilirsiniz.

3. Kullanıcı Dostu

User merkezli performans modelidir. Her Webapp aşağıdaki kurallar üzerinden RAIL performans modeli uygular.

Performans konusunda Progressive WebApp’de uymamız gereken kriterler var: RAIL user merkezli performans modeli ve FLIP temelli animasyon.

The RAIL Performance Model

Kullanıcı merkezli sayfanın daha hızlı aksiyon almasını sağlayan performans modelidir. Critical Rendering Path bu performanslama konusunda önemli bir yer tutar.

Sayfanın tüm compenentinin birden yüklenmesi kullanıcı için bir bekleyişi ifade eder. Critical Renderin Path contentin öncelik sırasına göre sayfayı yükler.

Sayfanın bir saniye gecikmesi,

%11 daha az sayfanın görünmesine

%16 müşteri memnuniyetinin azalmasına neden oluyor. Aşağıdaki video bu konu hakkında ayrıntıları bize sunuyor.

Flip Based Animation

FLIP, animasyonun 60 fps olması gerektiğini bize söyler. FLIP adı animasyonun baş harflerinden türetilmiştir.

FLIP animasyonunun tüm ayrıntılarına makalesinden öğrenebilirsiniz.

4. Architecture (Application Shell)

Minimal HTML, CSS and JavaScript ile arayüzün güçlendirilmesi olarak tanımlanabilir. Bunun anlamı sayfa bir kere yüklendiğinde artık o sayfa bir sonraki yüklemede kullanıcıya daha hızlı bir şekilde tepki verecek ve cachelenecektir. Kısacası Application Shell hızlı yüklenme ve cache edilebilmeyi sağlar.

Application Shell sayfanın iskeletinin daha hızlı yüklenmesini sağlar. Bu sayede kullanıcılar sadece contentin yüklenmesini bekler.

Yeni Özellikler

Background synchronisation

Cihazınızı offline mode’da kullanmanıza olanak sağlayan bu yapı offline olarak gönderdiğiniz mesajları online olduğunuz an alıcısına ulaştırıyor.

Wikipedia örneğinde ise offline mode’da ulaşamadığınız içerik online olduğunuz anda bir notification ile size bildiriliyor.

Service Worker ve Push Notification Firefox’da debuging mode’ta test edilmeye başlandı.

Rail performance mode’ta, 3G internette sayfanın daha hızlı yüklenmesi konusunda çalışmalar yapılıyor. Sayfanın ikinci ziyaretinde yüklenme hızı 1 saniye ve daha aşağılara çekildi.

Offline mode’da Google Analiytics kullanıcı davranışlarını nasıl ölçümleyecek? Londra’da yapılan son Progressive Web App eventi bu konudaki sorulara cevap veriyor. Google, Offline Analiytics konusunda adlı bir script yazmış durumda. Ancak şu an kullanımı tavsiye edilmiyor. Bu konuda bilgi almak istiyorsanız, makaleyi okumanızı tavsiye ederim.

iOS Safari Progressive Web Apps, App Shell desteği ile tekrar ziyaret edilen sayfaların yüklenme hızında bir artış sağlanmış. Örnek olarak

Service Worker şu an sadece App Shell desteği ile iOS’da kullanılabiliyor.

Frameworks ve Örnek Uygulamalar

Pollymer Starter Kit

Pollymer aşağıdaki Progressive WebApp feature’larını barındırıyor:

Pollymer Starter Kit’in son hali tam olarak güncel değil. Bazı advance featurelar listede yok. Application shell ve async loading gibi. Pollymer ile en son gelişmeleri videodan izleyebilirsiniz.

by Rob Dodson ()

— an Apple Airdrop-like PWApp built with Polymer and Web RTC

Vanilla JS:

by Paul Lewis is built using a similar architecture to app-shell ()

by Jake Archibald ()

React: by Jeff Posnick — uses sw-precache for application shell caching ()

Virtual-DOM:

Angular.js: Angular şu an üzerinde çalışıyor.

Son olarak e-ticaret sitesi Flipkart’ın Progressive Web apps örneğini sizinle paylaşıyorum.

Flipkart Lite tanıtım
Flipkart Lite Demo

Yazının ikinci bölümü mobilin neden önemli olduğu, kolay üye girişi ve hızlı satın alma konuları üzerine eğilliyor.


Kullanıcı deneyimi konusunda eğitim almak için atamanonur@gmail.com adresine mail atabilirsin.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store