Progressive Web Apps (PWA) Nedir? Neler Yapılabilir?

Google And Progressive Web Apps (PWA) Nedir? Neler Yapılabilir?

Herkes tarafından bilinen web deneyimini baştan aşağı değiştiren mobil internet tarayıcıları, web site kullanımlarını mobil kullanıcıları için özelleştiren bir teknoloji olmaktadır. Özelliklerine değinmemiz gerekiyorsa, internetin olmadığı zamanda dahi sayfalarda gezinti yapabileceksiniz. Ek olarak, Service Worker’la internet hızının düşük olduğunda dahi yüksek hızda kullanım, Home Screen ekranına sadece ikon ekleyerek mobil bir uygulamayla çalışıyor olması, Splash Screen özellikleri, Push Notification gönderme Full Screen ve mobil kullanıcı dostu niteliği taşıdığını belirtelim.

Google and progressive web apps nedir? Sorusuna yanıt olarak, internet tarayıcı platformundaki web development yaklaşımlı mobil hizmettir diyebiliriz. Bu deneyime ulaşmak için React, Angular, Framework, Polymer ve Vanilla JS kullanılmaktadır. Kısaltma ismi ‘’PWApp’’ olan bu sistemin, Android kullanıcılarının yoğun kullanımıyla önemli bir konumda bulunduğunu söylemeliyiz. Yapılan araştırmalar sonucunda, Chrome üzerinden ayda en az 100 site ziyareti gerçekleştiği bilinmektedir. Aynı zamanda, bir milyardan fazla mobil kullanıcının Chrome uygulamasından yaralandığı da bilinmektedir.

Google firmasının sunduğu, Progressive Web Apss geliş bir sistem olmasıyla da, web üzerindeki uygulamalarla eşsiz bir deneyim şansı sunmaktadır. Mobil dönüşümleri elde etmek için PWA yaklaşımının önemli olduğunu da belirtmemiz gerekiyor.

Progressive Web Apps Neler Sunmaktadır?

Hız: Dilediğiniz içeriğe saliseler içerisinde ulaşabileceksiniz. Navigasyon, Scrolling ve animasyon gibi deneyimleri de üst seviyede yaşayabileceksiniz.

Anlık Yükleme: Uygulamalarınızı kısa sürelerde açabilmek için Servicer Workers’i kullanabilirsiniz. İnternet bağlantınızı tarzının önemli olmadığını da eklemeliyiz.

Güvenlik: Kullanıcı arasında bağlantı kurabilmek için HTTPS güvenliği uygulama geliştiricisini en verimli şekilde kullanabilirsiniz. Kullanıcı bilgilerinizin gizlilik ve güvence altında olması da, kaygılarınızı giderecektir.

Ana Ekrana Ekleyebilme Özelliği: Dilediğiniz uygulamayı sadece tek bir tıkla ana ekranınıza taşıyabilirsiniz. Hızlı bir gezinme ve erişim süreci sunmasının yanı sıra Add To Home Screen’le birlikte ana ekranınızı aktif bir şekilde kullanabilirsiniz.

Offline Erişilebilirlik: Gelişmiş Cache sisteminin, web uygulamalarınızda offline olunduğunda dahi hızlı ve erişilebilir olması büyük bir avantaj olacaktır.

Responsive: Modem kullanıcıların bilgisayar, telefon ve tabletlerle yaşadığı bilinmektedir. Web sitenizin ve uygulamalarınızın cihazlarla olan uyumu önemli olmaktadır. Google and progressive web apps sistemi, kullanıcılara en iyi içerikli deneyimler sunması ayrıcalıklı bir durumdur.

Anlık Bildirim: Anlık web bildirimleri almanız için, web tarayıcınızın açık olmasına gerek kalmadan bu işlemleriniz gerçekleşmektedir.

Background Sync Nedir?

Uygulamalarınızın çalışmadığı zamanlarda proxy görevinde bulunan Background senkronizasyonu, arka planda güncelleme işlemini yapmaktadır. Açıklayıcı bir örnekle detaylandırmak isterse; bir arkadaşınıza çevrimdışı iken gönderdiğiniz mesajlar, çevrimiçi olduğunuzda otomatik olarak iletilmektedir. Farklı bir etkileşime ihtiyaç duymamanız da cabası! Offline durumda erişemediğiniz içerikler, belirli sürelerden sonra unutulabilmektedir. Ancak, PWA yardımıyla online olunur olunmaz bildirim gelmekte ve hızlı bir şekilde içerik ulaşımı sağlanmaktadır.

Application Shell Nedir?

JavaScript, CSS ve minimal HTLM ile ara yüzünü güçlendiren Application Shell, içeriklerdeki dinamik görüntüleme, cache edilmesi ve hızlı yüklenmesiyle bilinmektedir. Google and progressive web apps aplicattion shell, web site ziyaretlerinin tekrarında karşılaşacağı hız kalitesi ise şahane bir gezinme süreci yaratmaktadır.

Geofence Nedir?

Coğrafi sınırlama özelliği taşıyarak, kullanıcılara konum planı belirleyen Service Workers’le birlikte, web sitenizi dilediğiniz kitleye kolay bir şekilde ulaştırabilirsiniz. Bilinçli ve akılcı bir yol izleyerek, mobil web pazarındaki dönüşüm oranı ve payını arttırabilirsiniz.

İleri Web Uygulamaları Tanımı

Google tarafından üretilen ve bir web sitenin çevrimdışı modda, dokunma ve gezinme tecrübesi yaşayabileceği bir mobil uygulamadır. Ortaya çıkan sonuç ise, uygulama mağazalarında bulunan web uygulamalarının yayınlama ve paketle süreçlerini, mobil özellikli ve doğru içeriklerle web uygulaması haline dönüştürmektir. Sürekli olarak gelişim göstermesi ve farklı özellikler eklenmesi de avantajlı bir kullanımı beraberinde getiriyor. Google and progressive web apps hizmetleri arasında, ana sayfa konumlandırma, offline çalışma, dokunma teknolojisi ve bildirim yetisi destekleri gibi hizmetleri de sunmaktadır.

Böylelikle, alışılagelmiş web uygulamalarının yanında, Cross-platform üzerinde mobil uygulamalarda yaşanacak kısıtlamaları, web siteleri üzerinden sürekli geliştirmektedir. Mobil native uygulama ve web teknolojisinin birleşimi olarak görülen ileri web uygulamaları, birçok mobil kullanıcı için umut kaynağı olmuştur.

İleri Web Uygulamaları Karakteristiği

İleri web uygulamalarının Google geliştiricilerine göre özellikleri ise şunlardır;

Responsive: Tablet, mobil, masaüstü formlarına uygundur.

Progressive: Tüm kullanıcılarda çalışan ve tarayıcı fark etmeksizin aktif olan bir sistemdir.

Native görünümü: App Like mobil uygulamalara benzeyen web uygulaması üretmesidir.

Connectivity İndependent: Düşük kaliteye sahip Network ve çevrimdışı modda çalışıyor olmasıdır.

Güvenilir: Bozulma ve gözlemlenmesine izin verilmemesi, HTTPS üzerinden hizmet vermesinden dolayıdır.

Güncel: Service Worker sebebiyle sürekli olarak güncellenmektedir.

Bağlanılabilir: En basit haliyle URL paylaşılma özelliğinin yanında, karmaşık bir yükleme süreci de yaşanmamaktadır.

Kurulabilir: Uygulama mağazalarında zorunlu kullanım ve yükleme olmaksızın, ana sayfada uygulama bulunmasını sağlamaktadır.

Tekrar Ulaşılabilirlik: Push Notification desteği yardımıyla, müşterilerle mobil uygulama bildirimi etkileşimleri mümkün olmaktadır.

Keşfedilebilir: Uygulama olarak tanımlanma özelliği W3C Manifest yapısı sebebiyledir. Aynı zamanda, Service Worker’in kayıt olma özelliğiyle de sorgulama sonuçlarında bulmasına izin verdiğini eklememiz gerekiyor.

İleri Web Uygulamaları Temel İçeriği

İçeriğin ve uygulamanın ara yüzlerinin hızlı bir şekilde yüklenmesi sebebiyle, Worker Responsive web uygulamasındaki basit kullanıcı ara yüzlerini saklamaktadır. Basit kullanıcıların ara yüz terimi ise (Shell) adıyla ifade edilmektedir. Kabuk içeriği, sayfa düzenin dinamik yüklenmesini sağlayan bir yapıyı sağlamaktadır. Kabuğun paketlenmiş bir kod olması, mobil cihaz tarayıcılarındaki Cache’inde tutulmasıyla açıklanabilir. Bundan dolayı, bağlantı hızlarında uygulama yüklenme süresini kullanıcı ve kabuk yapı etkileşimiyle gerçekleştirmektir. Kullanıcı ise, uzun süreler boş bir ekran beklemeksizin, direkt olarak ekranla karşılaşmış olmaktadır. Progressive web apps ve benzeri web uygulamalarının en önemli özelliği, kullanıcılarına eşsiz bir mobil tecrübe ve web teknoloji imkanı sunmasıdır. Chrome tarayıcısı tarafından desteklenen bu uygulamalar, ileri bir gelecekte farklı tarayıcılar üzerinden de olabilir.

Service Workers Mantığı

Yüksek performans ve kullanıcı tecrübesine dayalı çalışan Native uygulamalar, gerekli içeriğin, kaynakların ve bileşenlerin uygulama mağazasından indirilme süresince hafızada konumlandırılmış olmasından kaynaklanmaktadır. Geleneksel web bağlantılarının yükleme ve hız kısıtlanmalarına karşı olarak Service Worker’ın, Web Worker yapısıyla oluşturulduğunu ve eksiksiz bir yükleme imkanı sunduğunu söyleyebiliriz.

Servis Worker web tarayıcısında, web talepleri ve http tekniğini yönetebilmek için kodlanabilir proxy yapısı sunduğu bilinmektedir. Cihazın arasında yer alması ve içeriğin taşınma süreci, Service Worker Network tarafından gerçekleşmektedir. Aynı zamanda, Cache sistemini hatasız ve en verimli biçimde offline konumunda sunmasıyla da bilinmektedir.

Mobil Kullanıcı Tecrübesinin Yükselmesi

Mobil uygulamaların yaygın olmasındaki en büyük faktörlerden birisi de, çoğunlukta olan bir kullanıcı profilidir. Geleneksel web uygulamaları gerçek zamanlı tarayıcı yöntemiyle çalışırken, Native uygulamaların paket bir yapıyla çalıştığını söylemeliyiz. Tarayıcıların, somut olmayan bir sistemle web uygulamaları arasında bulunduğunu bilmelisiniz. Direkt olarak donanıma bağlanma ve paket kaynakları, Native uygulamalarının hızlı bir şekilde çalışmasına etkisi büyüktür.

Farklı uygulama kategorileri ise ‘’ Hibrit uygulama’’ olarak adlandırılmaktadır. Web uygulama özellikleri arasında yer alan Native uygulamalrı, Hibrit uygulamaların karakteristiğini sergilemektedir. Ayrıca, uygulama mağazasından kurulması, indirilmesi ve mobil cihazların hafızalarındaki belirli bölümü tüketmesi de gerekmektedir. Mobil cihaz ekranında görünmeleri belirli bir zorunluluğun işareti olmaktadır. Mobil tarayıcılarda çalışan Hibrit uygulamaları, web üzerindeki paylaşımlara erişim sağlayamamaktadır.

Bir diğer uygulama kategorisi hibrit uygulama olarak adlandırılır, native uygulama özellikleri ile web uygulamaları özellikleri arasında yer alır.

Stlyling ve Markup yapıları gereği arama motorları bağlantılı olmamaktadır.

Hibrit uygulamalarının URL’leri yoktur ve bağlanabilir özelliğine sahip değildir. Web bağlantısının olmadığı bir noktada, web üzerinde bir parça olamayacağı da bilinmelidir.

Açık kaynaklı bir doğaya sahip web, Hibrit uygulamalarının kodlarına erişememektedir.

Sistem yetenekleri, kullanıcı ara yüzü zenginliği ve ek fonksiyonel çekirdekle birlikte, birçok uygulamadan farklıdır.

Progressive Web Apps Çalışma Mantığı

Öncelikle, Android işletim sistemine sahip cihazınızdan Chrome Progressive Web Apps’ye girmenizle birlikte Snackbar, Home ekranında belirecek ekleme isteği sorusunu yöneltmektedir. Onayladığınız anda cihazınıza uygulamalara benzer bir ikon eklenmektedir. Bu ikonun diğer mantığıyla söyleyecek olursak, bir kısa yol olarak da varsayabilirsiniz. İkona tıkladığınız anda mobil browserdan kurtulacak ve mobil uygulama benzeri Google and progressive web apps avantajlarını tam ekran olarak deneyimle şansına sahip olacaksınız.

Progressive Web Apss Özellikleri

Splash Screen ve Full ekran gösterimi

Uygulama kullanımı benzeri telefonunuzun ekranında ikon koyabilme özelliği

Slow internet ve Service Worker’e rağmen hızlı yükleme

Kullanıcıları APP Store’a yönlendirmeksizin, tarayıcı üzerinden Homescreen icon ekleme seçeneği

Push Notification göndermesi

Uygulama interaction ve navigation kullanabilme

Service Worker’in gelişimiyle paralel olarak, çevrimdışı modda çalışmasıyla birlikte Slow Connection’da çalışıyor olması

Kısa yol iconu eklerken mobil uygulama yüklemesinden doğacak yetersiz bellek sorunlarından arınma

Progressive Web Apps Genel Prensipleri

Service Worker

Çevrimdışı kodda (internet erişiminin olmadığı zamanlarda) uygulama kullanımını sağlayan ve tekrar edilen ziyaretlerde kullanıcıya hızlı bir hizmet sunan Service Worker, pratik ve kullanışlı olmasıyla da dikkat çekmektedir.

Web sitelerinin browser mantığından bildirim almasını sağlayan servis, Push Notification olmaktadır. Web Push’un özellikleri ve içeriğiyle bilgi almanız, avantajlı fırsatları yakalamanız demektir.

Web App Manifest

Basit bir JSON File ile başlayan Web App Manifest, App kullanımı ve görünümü konusunda büyük fayda sağlamaktadır. Browser üzerinden Native App görünümünü sağlamakla görevlidir. Splash Screen eklemenize, uygulama ikonu kullanımını sağlamaktadır. Ayrıca, URL barın görünümünden uygulamayı kurtarabilmesiyle de bilinmektedir. Edge ve Firefox’ta Web App Manifest’le alakalı gelişmelerin olduğunu ve Apple tarafından henüz ses çıkmadığını söylemeliyiz. Manifesto ile alakalı dosyaları ise, Manifest Generator, Web Starter Kit, Google Chrome Samples ve Web Manifest Validator örneklerinden kolaylıkla bulabilirsiniz.

Application Shell

CSS and JavaScript, Minimal HTLM ve ara yüzün güçlendirilmesi olarak tanımlanabilmektedir. Açıklayıcı bir söylemde bulunursak, ana sayfa yükleme işlemi bittiğinde, kullanıcıya pratik ve hızlı tepki verebilmesi, (Cachlenebilmesidir.) Application Shell ile birlikte, cache edilme ve hızlı yüklenme etkilerini yaşayacaksınız.

Kullanıcı Dostu Bir Performans

Progressive web apps yararları arasında, hız ve performans konusunda bilmeniz gereken faktörler bulunmaktadır. FLIP temelli animasyon ve RAILL User merkezli performans modelleri.

The RAIL Performance Model

Sayfaların hızlı ve kaliteli bir performans vermesini sağlayan model olmaktadır. Critical Rendering Path’ın ise bu hız ve performans noktasına büyük bir yeri olduğunu belirtmeliyiz. Sayfalarda ise, Compenentin yüklenmesi sürecinin kullanıcıların beklemesi anlamına geldiğini söylemeliyiz. Öncelik sırasını ve sayfa yüklemesini de, Critical Renderin Path Contentin kriterlerine göre belirlemektedir. Bunun sonuçları arasında;

Sayfaların bir saniye kadar gecikmesi,

%11’den az sayfa görüntülenmesi,

%16 müşteri beğeni ve memnuniyeti azalmasına sebep olmaktadır.

FLIP animasyonunun 60 FPS noktasında olması gerektiğini söylediğini bilmelisiniz. FLIP adını animasyonun baş harflerinden almış ve çeşitli özellikleriyle kullanıcıların hizmetine sunulmuştur.

Google and progressive web apps özellikleri nelerdir? Diyorsanız, sizlere birkaç önerimiz olacaktır…

Yeni Özellikler Nelerdir?

Background Synchronisation, cihazınızın çevrimdışı modda kullanımını sağlayan bir yapıdır. Bu yapının offline haldeyken gönderilen mesajları, online konuma gelindiğinde ilettiği bilinmektedir.

Push Notification ve Service Worker, Firefox’da Debuging Mode kriterlerinde test edilmeye başlanmıştır.

Rail Performance Mode’ta, özellikle 3G internet üzerindeki sayfaların hızlı erişim ve yüklenmesi üzerine çalışmaları devam etmektedir. Tekrar edilen web sayfasının hızının 1 saniyeden daha aşağılara çekildiği söylenmektedir.

İOS Safari Progressive Web Apps, App Shell yardımı sayesinde tekrar girilen sitelerin yüklenme ve açılmalarında performans ve hız sağlamıştır. Service Worker’in yalnızca App Shell desteğiyle birlikte İOS’ta kullanıldığı da eklemeliyiz.

Frameworks Ve Örnek Uygulamalar Nelerdir?

Pollymer Starter Kit, Progressive Web App feature’lerini barındırmaktadır;

Chrome for Android Splashscreen,

Web Application Manifest,

Push Notifications with the Platinum Push Elements

Service Worker Offline caching with the Platinum SW Elements

PWA İle Birlikte Neler Gözlemlendi?

Flipkart, cihazlardaki ana ekran ikonundan gelen kullanıcılardan yaklaşık olarak %70 civarında dönüşüm sağlamıştır.

PWA ile birlikte, global ortamda kullanıcı karşısına çıkan ilk web sitesi The Washington Post olmuştur. Muazzam bir deneyim imkanı sunan bu sitenin yüklenme süresi, 80 milisaniye olarak hesaplanmıştır.

Mynet, %22 sayfa derinliği, %76 hızlı sayfa ve sitede geçirilen sürelerin %36’ya ulaşmasıyla özel bir konumdadır. Add To Home Screen ve 1K’dan yukarı kullanıcının ana ekranına eklediği Mynet, kullanıcılarından 2.5 kat fazla Session kazanmıştır.

AliExpress’te ise 3 kat fazla sayfa görüntülenmesi gerçekleşmiştir. PWA ile erişim sağlayan ziyaretçilerin, sitede geçirilen sürelerde %73 ve İOS dönüşümlerinde ise %83 artış görüldüğü belirtilmiştir.

com, e-meal pazarlamasından ziyade PWA ile birlikte Push Notification planı izlemiş, bunun sonucunda ise %35 Open rate ve 10 kat geri dönüşüm şansına sahip olmuştur.

PWA ARAÇLAR

PWA uygulamasını test etmek ve sağlıklı sonuçlar almak için Lighthouse Chrome eklentisinin olduğunu bilmelisiniz. Lighthouse eklentisi, web uygulamasını tarar ve sağlık skoruyla ilgili raporlar paylaşır. Cache sisteminizi kontrol etmeli ve Lighthouse mantığına en uygun yaklaşımlarda bulunmalısınız.

Sonuç

Progressive Web Apps, geniş bir kullanım alanına sahip ve mobil web üzerinden kullanım imkanı sunan bir gelişim olmaktadır. Offline erişilebilir olması, background senkronizasyonu, anlık bildirimler, kolaylık, güvenlik, ve eksiksiz bir kullanıcı deneyimi sunmaktadır. Mobil kitlenizden en iyi sonuçları alabileceğiniz ve pazarlama planları oluşturabileceğiniz eşsiz bir oluşum olduğunu da eklememiz gerekiyor. Mobil kullanımın yaygınlığı sonrasında, eşsiz bir değer olan PWA uygulamaları, kullanım hızı ve yüksek performansıyla göz doldurmaktadır.

“Progressive Web Apps (PWA) Nedir? Neler Yapılabilir?” üzerine 2 yorum

Yorum yapın