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.
Bir diğer rapor ise internette geçirilen sürenin platformlara göre bölünmesi ile oluşturulmuş.
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 Edge’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, Manifest Generator, Web Manifest validator ve Google Chrome samples ö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 Mobile Web’in yeni silahı: Web Push adlı yazımdan ulaşabilirsiniz.
3. Kullanıcı Dostu
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 FLIP Your Animations 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.
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 IOWA2015 adlı bir script yazmış durumda. Ancak şu an kullanımı tavsiye edilmiyor. Bu konuda bilgi almak istiyorsanız, https://developers.google.com/web/showcase/case-study/service-workers-iowa 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 https://app.babe.co.id/
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:
- Web Application manifest,
- Chrome for Android Splashscreen,
- Service Worker offline caching with the Platinum SW elements,
- Push Notifications (manual setup required) with the Platinum Push elements.
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 linkteki videodan izleyebilirsiniz.
Zuperkulblog by Rob Dodson (slides)
Snapdrop — an Apple Airdrop-like PWApp built with Polymer and Web RTC
Vanilla JS:
• Voice Memos by Paul Lewis is built using a similar architecture to app-shell (write-up)
• Offline Wikipedia by Jake Archibald (video)
- Air Horner by Paul Kinlan
- Guitar Tuner by Paul Lewis (write-up)
React: iFixit by Jeff Posnick — uses sw-precache for application shell caching (slides)
Virtual-DOM: Pokedex
Angular.js: Timey.in Angular şu an ng2-application-shell üzerinde çalışıyor.
Son olarak e-ticaret sitesi Flipkart’ın Progressive Web apps örneğini sizinle paylaşıyorum.
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.
