PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Written by on Çarşamba 29 Mart 2017

PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları
Bu yazımızda Progressive web uygulamasını meydana getiren 10 temel kullanıcı deneyimini derinlemesine inceleyeceğiz ve bir web sitesi oluşturmak için bu yenilikçi yolu zaten kullanan işletmelerden bazı uygulamalara bakacağız. Google tarafından tanıtılan bu kullanıcı deneyimi, cihaza veya operasyon sistemi fark etmeden uygulama benzeri bir deneyim elde etmek için temel özelliklerdir. PWA'ların asıl amacı budur.
 

Smashing Magazine, Flipkart, Walmart, Washington Post ve Product Hunt'ın web uygulamaları, bu teknolojinin çok özel yönlerinin nasıl çalıştığını ve işletmelerin daha başarılı olmasına nasıl yardımcı olduğunu anlamaya yardımcı olan örneklerden bazıları. Hadi yakından inceleyelim!


Bağlantı bağımsızlığı

 
Progressive Web App'in temel özelliklerinden biri, internet bağlantısı çok güçlü olmadığında da çalışabilme kapasitesidir. PWA, Hizmet Görevlisi adı verilen bir komut dosyası çalıştırır; bu komut dosyasının amacı, içeriğin yerel olarak bulundurulmasını içerdiğinden, uygulamaların neredeyse anında yüklenmesine izin verir. Ayrıca, kullanıcının çevrimdışı olması durumunda uygulama, bağlantı eksikliği hakkında bilgi vermek için bir özel ekran görüntüleyebilir veya bazı durumlarda önceden önbelleğe alınmış içeriği bile yayınlayabilir.

 
Smashing Magazine, editoryal içerik yayınlayan web endüstrisindeki en büyük isimlerden biri olup, dijital trendleri her zaman takip etmiştir. Progressive Web Uygulamaları alanını onlar da savunuyor ve bu teknolojiye yatırım yapıyorlar.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Smashing Magazine, internet bağlantısı olmadığında bile kullanıcılara keyifli bir deneyim sunabilmek için, bu durumda uygulamanın kullanılmaya devam edebilmesi için verileri almasına ve önbelleğe atmasına izin verir. Yukarıdaki örnekte, bir makale yükledik ve hemen çevrimdışı olduktan sonra (uçuş modu sadece emin olmak için) ve sayfayı yeniledikten sonra bile makale okunmaya hazırdı. 

Geliştirici ekibi, kullanıcının bir sayfayı önbelleğe almadığı, ancak bir bağlantıya tıkladığı ve açtığı durumu da düşündü. Mükemmel uygulama deneyimini sağlamaya çalışarak, kullanıcıya neler olup bittiğini ve çevrimdışı koşullar altında uygulamanın nasıl çalıştığını anlatan bir sayfa oluşturdular.

Yeni

 
Bir kez daha, fikir kullanıcıya öncelik vermek, native uygulamalardaki gibi harika bir deneyim sunmaktır. Güncel içerik sağlamak (yine hizmet görevlileri tarafından gerçekleştirilen ) PWA'ların temel bir özelliğidir.
Hizmet görevlisi komut dosyası önbelleğe alındıktan sonra, yalnızca çevrimdışı kullanım için içeriği depolamakla kalmaz aynı zamanda yeni verileri indirmek için arka plan senkronizasyonlarını tetikleyebilir. Ardından, kullanıcı sabit bir internet bağlantısına sahip olduğunda, tarayıcı daha fazla bilgi toplamak ve depolamak için kullanılabilir.

Flipkart, Bangalore, Hindistan merkezli bir e-ticaret şirketidir. Dönüşüm, sayfadaki harcanan zaman ve kullanıcı sadakati gibi iş KPI'lerini iyileştirmede kullanmak amaçlı PWA geliştirmede ilk sıralarda yer alırlar.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

 
Flipkart'ın uygulamasında, uygulamada gezinirken içeriğin bir kısmının yüklendiğini algılayabiliriz. Uygulama yalnızca talep edilen içeriği yüklediğinden kullanıcıların veri tüketiminden tasarruf sağlamasına yardımcı olur, ayrıca uygulamadan bir şeyler satın almak isteyince zengin ve ilgi çekici bir deneyim sunar.

Progressive

 
Bir ilke olarak, Progressive Web App, kullanıcı onlarla etkileşime geçtiğinde gelişir. Dolayısıyla bir kullanıcı Chrome, Safari veya başka bir tarayıcıyla uygulamada gezindiğinde bu PWA'nın sürekli olarak iyileştiği ve geliştiği  anlamına gelir ve ayrıca kullanıcının cihazında ve tarayıcısında bulunan özellikleri kullanabilir. 

Bu özelliği sergilemek için Flipkart'ın uygulamasını Android Chrome tarayıcı üzerinde açtım. Sayfa yüklendiğinde, anında tarayıcı arayüzünün kendisini nasıl adapte ettiğini, renkleri PWA ile eşleşecek şekilde değiştirebildiğini algılayabiliyoruz. Bu, uygulamaların mevcut kaynaklara yanıt vererek nasıl sürekli iyileştirebileceğinin gerçekten iyi bir örneğidir. Bu örnekte de, cihazın titreşim gibi özelliklerinden yararlanarak kullanıcıların dikkatini çekmek istedikleri belirli işlemlere çağırıyor; kullanıcıyı bu durumda ana ekrana uygulama eklemeye davet ediyor. Bunun ötesinde, kullanıcılara daha iyi bir deneyim sunmak ve kullanım verilerini toplamak için telefonun arka plan işlemleri de çalışıyor.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Duyarlı

Native uygulamaların piksel mükemmel tasarımına meydan okuyan Progressive Web Apps son derece duyarlıdır, bu da uygulama düzeninin kendisini form faktörüne (mobil, tablet ve masaüstü) ve ekran boyutuna göre adapte ettiği anlamına gelir. Yanıt verme davranışı, uygulamanın nasıl oluşturulduğuna bağlı olarak değişiklik gösterebilir. Blokların ekrana göre düzenlendiği, sayısının artırıldığı veya dahili olarak değişen tek blokların boyut değişikliklerine tepki gösterdiği, bu serideki blog yayınlarından birinde bahsedilen blok yapısı olabilir.

Walmart, temel amacı alışveriş esnasında kişilerin tasarruf etmesine yardım etmek olan çok uluslu bir perakendecidir. Şimdi, Progressive Web Uygulamasında, müşterilerin nerede oldukları ve hangi cihaz kullandıklarına bağlı olmaksızın müşterilere mükemmel çevrimiçi alışveriş deneyimi sunuyor.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Walmart'ın web sayfası, bir web sitesinin kendisini adapte edebilip, kullanıcının cihaz özelliklerine göre düzenini nasıl değiştirebileceğinin harika bir örneğidir. Örneğin, bir uygulama arayüzüne çok benzeyen mobil sürümde, gezinme butonlarının çoğunun, üst köşedeki bir buton aracılığıyla erişilebilen menüye taşınmış olması. Ayrıca, bazı bilgi ve iç reklamlar dağıtılıyor bu da kullanıcılara daha doğal görünüyor. Diğer iki örneğe geçildiğinde, ekranın oranı o kadar fazla değişmediğinden blokların sadece bir kısmı artırılıp yeniden boyutlandırıldığından artık çok daha benzerdirler.

Bu durumda hala, iPad ve masaüstündeki üst banner'a dikkat etmek ilginç. iPad'de kullanıcıyı native uygulamayı masaüstüne indirmeye davet ederken, bazı özel tanıtım vurgulanır. Bu, pazarlama stratejilerinin farklı platformlar için nasıl uyarlanabileceğine ve mobilin kullanıcıları birinci sınıf müşterilere dönüştürmek anlamında neden önemli bir araç olduğuna bir örnektir.

App benzeri navigasyon

 

Bir PWA yapısı, geliştirilmiş işlevsellik için bir başka önemli faktördür; tüm bunlar, uygulama kabuğu modelini takip etmektedir. Bu yapı, sürekli olarak sayfa istemini minimuma indirir, uygulamadaki sabit parçalarla menü, üstbilgi ve sayfa düzeni; genellikle içerik gibi sürekli güncellenen parçaları ayırır.

Pratik şartlarda, Progressive Web Uygulamaları, sorunsuz ve uygulamaya benzer etkileşimler sunmak için native uygulamaların navigasyonunu taklit eder. İşlemi tekrarlayan kullanıcılar için, uygulamanın ana öğelerinin önbelleğe alınmış oldukları anda görüntülenmesi, performansın iyileştirilmesi ve içeriğin geri kalan kısmının kullanım sırasında alınması anlamına geliyor.

Walmart durumunu takiben, uygulamayı oluşturan tasarım ve geliştirme ekibi, web sitelerini bir uygulama gibi hissettirmeyi başarmış. Özellikle uygulama kabuğu öğelerine bakıldığında, başlık yalnızca bir grafik öğesi olarak değil, aynı zamanda arama çubuğunu ve kullanıcılar için alakalı diğer butonları da tutmak için kullanılmıştır. Daha önce de bahsettiğim gibi şimdi menü web sitesinin gezinme butonlarının çoğunu barındırıyor ve bölümlere ayrılmış halde kullanımı basit. Sayfalar aynı zamanda basit blok düzenlerini izleyerek, içeriği açıkça görüntülüyor ve uygulamanın gerçekten hızlı bir şekilde yüklenmesini sağlıyor.

PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Keşfedilebilir

Belki de native uygulamalar üzerindeki en büyük avantajlardan biri, Progressive Web Uygulamaları'nın temel özelliklerinden bir diğeri olan keşfedilebilirliktir. Doğal olarak, web sayfaları üzerine kuruldukları için, arama motorlarının gücünden yararlanarak arama sonuçlarına uygulamanın indekslenmesini ve dağıtımını yapmak mümkündür. Bir pazarlamacı bakış açısıyla, bu da, bazı arama motoru optimizasyon tekniklerinin uygulamalara uygulanabileceği anlamına gelir. Bu durum, uygulamalar için kullanıcı edinimine yepyeni bir ışık tutuyor ve ASO stratejileri ile birleşmek için yeni fırsatlar sunuyor.

Washington Post, 1877'de  kurulan Amerika Birleşik Devletleri'ndeki en geleneksel medya yayıncılarından biridir. Günümüzde, şirket Progressive Web App alanındaki gelişmelerini dijital katılımlarını artırmak amacıyla devam ettiriyor. 
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Yukarıdaki örnekte The Washington Post tarafından, metin ayrıntısı küçük resimleri gibi zengin özellikler ve progressive web uygulamasına bağlantılar bile olsa, Google'da indekslenen bir makale var. Orijinal içeriği üreten birçok işletme için potansiyel müşteri oluşturmak ve aksi durumda uygulamayı kullanmayacak olan kullanıcılarla bağlantılar kurmaya başlamak harika bir yol olabilir.

Bağlanabilir

Progressive Web Uygulamaları hakkında kesinlikle emin olabileceğiniz bir şey, yeni potansiyel kullanıcılara ulaşmanızı sağlayabilecek bir çok araç içermesi. Bunlardan biri, uygulamayı veya hatta uygulamadaki belirli bir sayfayı paylaşmak istediğinizde, URL'yi basitçe gönderebilmeniz ve diğer kişinin yüklemeye ya da genel bir açılış sayfasına gönderilmesine gerek kalmadan linki kolayca açabilmesi.

PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Bu, web teknolojilerinde yaygın bir özellik olan ve şimdi PWA'ları güçlendiren mükemmel bir örnektir. Washington Post'un uygulaması ile yukarıdaki örnekte, kullanıcı doğal paylaşım seçeneklerini kullanabilir, istediği yere kopyalayıp / yapıştırabilir veya sayfayı sık kullanılanlara ekleyebilir.


Güvenli

Web güvenliği, bu gün büyük bir konudur ve Progressive Web App, web sayfalarını temel aldığından, karşılaması gereken bazı şartlar vardır. Uygulamalar için gerekli güvenlik taleplerini karşılamak için, geliştiriciler PWA'ları veri aktarımının şifrelemesini sağlayan bir Güvenli HTTP yani HTTPS üzerinde sunmalıdır.

Web sitesinde yer alan bilgiler hassas değilse bile, bu özelliği düşünürken kullanıcının gizliliği ve güvenliği temel kaygılardır. Dahası, Apple tarafından belirtilen yeni şartlar ile iOS uygulamaları ve hizmetleri için zaten HTTPS bağlantıları gerekmesi bu özelliği uygulamanın diğer bir nedeni.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

 
Yukarıdaki resimde bunun bir HTTPs sertifikası ile korunan güvenli bir sayfa olduğunu gösteren işareti görebiliriz. Güvenlik prosedürünün üstünde The Washington Post bir adım daha ileri gitmiş ve şirketin adının sayfa için varsayılan URL yerine gezinme çubuğunda görüntülemesine izin veren Paper Validation'ı da yapmış.

Yüklenebilir

 
Bazıları, native uygulamalardaki yükleme işlemini, kullanıcı tarafında daha fazla katılım gerektiren olumsuz bir özellik olarak düşünebilir. Progressive Web Uygulamaları şimdi bunu değiştiriyor ve kullanıcıların uygulamayı akıllı telefon veya tabletlerinin ana ekranına eklemelerini istiyor ve böylece tüm süreci daha basit hale getiriyor.

Web uygulaması manifest ile, geliştiriciler tarayıcıları bir "yükleme paketi" ile besleyebilir bu, grafik varlıklarını (ikon ve açılış ekranı) içerir ve uygulama başlatıldığında uygulamanın nasıl davranması gerektiği konusundaki bilgiyi kapsar. Uygulama kurulduktan sonra genel deneyimi arttırarak en üst düzeyde önemi olduğunu varsayar.

Product Hunt'ın misyonu, kullanıcıların yeni ürünleri paylaşmasına ve keşfetmesine izin vermektir. Artık bir PWA ile web sitesi, uygulamada olduğu gibi kesintisiz bir deneyim sunarak topluluğun daha aktif ve etkileşim halinde olmasına yardımcı oluyor.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Product Hunt, zaten bu özellikten yararlanmaya başladı ve kullanıcıların web sayfalarını akıllı telefonunun ana ekranına yüklemelerine olanak sağladı. Yükleme, İsteğe Bağlı Mesaj Yükle veya tarayıcıdaki Seçenekler düğmesiyle yapılabilir ve kullanıcılar için basit ve hızlıdır.
PWA kurulduktan sonra cihazın springboard'unda bulunmanın belirgin faydalarının yanı sıra, tarayıcı arayüzünü kaybederek giderek daha iyi hale gelir ve böylece servis çalışanlarının daha etkin tepki vermeleri ve genel kullanıcı deneyimini geliştirmeleri sağlanır. Uygulama mağazalarında karşılaşılan kurulum sürecini azaltarak kullanıcıları tekrar etkileşime sokmak ve daha sonra müşteriye veya sadık kullanıcılara dönüştürmek daha kolay hale gelir.

Etkileşime geçilen

 
Progressive Web Uygulamaları'nın bir başka temel özelliği, katılım özellikleridir. Daha önce native uygulamalar için kullanılan anlık bildirimleri geliştiriciler PWA'lar için etkinleştirebilir, bu durum servis çalışanı için arka plan görevi olarak çalışır. Şu anda, PWA'ların anlık bildirimleri masaüstünde Chrome, Firefox, Opera, Safari tarafından desteklenmektedir, ancak mobilde desteklenmemektedir. Bu özelliği kullanan uygulamalar, sitede harcanan zaman oranında % 72 oranında bir artış gördü ve tekrarlanan ziyaretler % 50'nin üzerine çıktı. (Kaynak)

Bunun yanı sıra, üst düzey görev değiştirme ve web'deki herhangi bir yerden tek bir dokunuşla uygulamaya girme gibi bazı etkileşimler kullanıcıların uygulamayı tutarlı bir şekilde kullanmasını daha kolay hale getirir. Bu, işletmeler için iyi bir haber ve bu gelişmeleri nasıl uygulamak gerektiğini anlamak bir oyun değiştirici olabilir.
PWA - Teknoloji temel ilkeleri ve güçlü kullanım alanları

Tekrardan, Product Hunt PWA'nın özelliklerini kendi avantajına kullanıyor; yukarıdaki örnek, web anlık bildirimlerini gösteriyor. Kullanıcılar uygulamada belirli bir süre geçirdiklerinde Progressive Web App'te anlık bildirimlere izin verme talebinde bulunmaları gerekiyor.  

Bütün bu parçaları bir araya getirip bir perspektif olarak sunmak gerekirse, Progressive Web Uygulamaları, kullanıcılar için mükemmel bir deneyim sunan geliştirilmiş web uygulamaları. Bu nedenle güvenilirlik, hız ve etkileşim bu metodun temel öğeleri. 

Örneklerde de gördüğümüz gibi Progressive Web Uygulamaları için kullanım örnekleri oldukça çeşitlidir ve sayısı artan uygulama yaratıcıları ile kuşkusuz daha şaşırtıcı örneklerin de gelişimine tanık olacağız. Sadece heyecanlandığımızı ve gelişmeleri dört gözle beklediğimizi söyleyebiliriz!


Çeviren Hazal Çelik



E-posta adresinizi girin