Progressive Web Apps’in Özellikleri

By | 2 October 2016

Günümüze alışagelmiş web deneyimini tamamen değiştiren özellikle mobil internet tarayıcılarıyla girdiğimiz web sitelerinin bir mobil uygulama kullanırcasına özelleştiren bir teknoloji. Birkaç özelliğinden bahsetmek gerekirse; internet olmasa bile sayfalar arası gezinti, web siteyi mobilde bir uygulama gibi ‘home screen’ ekranına ikon ekleyerek mobil uygulama gibi çalışması, service worker ile düşük internet hızına rağmen yüksek hızda web siteleri, push notification gönderme, full screen ve splash screen özellikleri, responsive ve kullanıcı dostu olması…

Offline Mode

Bu özellik internet olmasa bile sayfaya ilk girildiğinde belirlenen sayfalar ve belirlenen içerikler cache’leniyor. İnternet olmasa bile sayfalara arası gezinti buradan sağlanıyor. En iyisi örnek ile gitmek, bu yüzden aşağıdaki projeyi bilgisayarıma çekiyorum ve Chrome online/ofline modda çalıştırıyorum ki mantığı anlayalım.

git clone https://github.com/GoogleChrome/airhorn.git

Projeyi çektikten sonra bulunduğu dizindeki app dizinine giriyorum. Orada aşağıdaki
komutu veriyorum ve basit bir Python web servisini ayağa kaldırıyorum.

python -m SimpleHTTPServer 3000

Web tarayıcı üzerinden ‘localhost:3000’ adresine giderek, fare ile üzerine tıklanınca ses çıkaran bir havalı korna karşılıyor bizi.

progressive web apps

Şimdi ilk girdiğimizde ServiceWorker sayfayı tamamen belleğe aldı ve artık Offline olsak bile sayfa içerisinde gezebiliyor olacağız. Aşağıda Offline moda geçmeyi ve offline moddayken diğer sayfalar internet bağlantısı hatası verirken, bizim sayfamızın çalıştığını görebiliriz. DevTools’u açıp, ‘Application’ sekmesinden Service Workers tabında, offline seçeneğine tıklıyoruz. Böylece internet ile olan bağımız kopuyor.

service-worker

Arından https://google.com sitesine gidiyorum ve hata alıyorum. Daha sonra localhost:3000’e geldiğimde ise hala web sitesi açılıyor.

progressive web apps  progressive web apps

Burada teknik olarak index.html dosyasının kodlarına bakarsanız orada aşağıdaki kodlar mevcut. Eğer tarayacı service workers destekliyorsa onu kaydediyor ve sw.js dosyasındaki cache’leme kodlarını çalıştırıyor. Orada da istenilen sayfalar bellek altına alınıyor.

if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}

Peki, offline modda Analytics yazılımları kullanıcıyı nasıl takip edecek? Bunun için Google 2015 yılında bir kod yayınladı ama bunu şimdilik kullanmayın diyorlar çünkü hala geliştirme aşamasında.

Web Sitesini Telefon Anasayfasına İkon Olarak Eklemek

Bunun için web sitemize özel ‘package.json’ dosyamızı oluşturuyoruz. İçinde belli kriterlerin zorunlu olduğu alanları ekliyoruz. Aşağıda bunları listeledim;

-İkonda gözükecek kısa bir isim
-Banner tarafında gözükecek bir isim
-İkon için png formatında 144×144 formatında bir resim
-Web sitenin url’i

Ayrıca Service Workes kayıtlı olmalı, Https dışında kabul edilmiyor ve telefondayken ‘Ana sayfaya ekleyeyim mi?’ sorusunu her ziyarette değil, 5 dakika aralıklı ziyaretlerde soruyor. Siz de telefonunuzun Chrome tarayıcıyla ‘https://airhorn.com’ linkine giderseniz, kendiniz de gözlem ve deneyim yapabilirsiniz. Aşağıdaki ki bir soru soracak size ve onay verdikten sonra ana sayfaya ikonu ekleyecek. (Bazı sürümlerde soru sormuyor, sağ üst menüden Ana Sayfaya Ekle yazısına tıkladıktan sonra ekliyor.)

airhorner-progressive-web-app

Push Notification

Web sitelerin masaüstünde tarayıcı üzerinden, mobilde ise native bir app gibi bildirim atmasına olanak sağlayan bir servis. Örneğin; Safari üzerinden ‘https://gilt.com’ girildiği zaman bizden onay istiyor ve onay verdikten sonra sağ üstten tarayıcı bildirimi gönderiliyor.

screen-shot-2016-10-02-at-1-36-05-am   push notification

Mobil tarafta ise bildirim üzerinden soru veya seçenek sorulabiliyor.

progressive web apps

Arayüz

Web sitesi bir uygulama deneyimi yaşatacağı için ona göre animasyonlar, efektler ve tasarım söz konusu oluyor. Bazı standartlar var, örneğin; animasyonların 60 fps olması gerektiği gibi. Flip animasyon hakkında daha fazla bilgiyi buradan alabilirsiniz.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*