Duyarlı Web Tasarımı ve Aşamalı Web Uygulaması (PWA): Farklar

Bu ikisi görünüm ve performans açısından çok benzer olduğundan, web geliştirme konusundaki iki popüler yaklaşım arasında neden daha ayrıntılı bir karşılaştırma olmadığını merak ediyor olmalısınız: Duyarlı web tasarımı ve Aşamalı Web Uygulaması. İşte bu . Bu yazıda, duyarlı web tasarımını Progressive Web App ile karşılaştıracağız ve birbirlerinden gerçekten nerede farklı olduklarını öğreneceğiz.

Duyarlı Web Tasarımı

Ne olduğunu

Duyarlı web tasarımı (RWD), ilk olarak Ethan Marcotte tarafından 2010 yılında -Progresif Web Uygulaması kavramından beş yıl önce- tanımlanan bir web geliştirme yaklaşımıdır.

Nasıl çalışır

Temel olarak, duyarlı web tasarımının felsefesi, tasarımın ve geliştirmenin kullanıcının cihazına yanıt verme amacıyla yapılması gerektiğidir; bu, kullanımdaki cihazın davranışına, boyutuna, platformuna ve yönüne yanıt vermek anlamına gelir. Bu, akışkan ızgaraların, esnek görüntülerin ve CSS medya sorgularının kullanılmasıyla sağlanır:

Akışkan ızgaralar, esnek görüntüler ve medya sorguları, duyarlı web tasarımı için üç teknik bileşendir…

Ethan Marcotte, Duyarlı Web Tasarımı

Akışkan Izgaraları

Akışkan ızgaralarla tasarlanmış duyarlı web siteleri, piksel tabanlı boyutlar tanımlamak yerine akışkan ızgara yeni bir yüzde tabanlı hesaplama benimsediğinden, piyasadaki değişen ekran boyutlarını daha iyi idare edebilir.

Esnek Görüntüler

Web'deki görüntüler doğal olarak akıcı değildir, ancak bazı yapılandırmalarla ( width özelliği 100% ve height özelliği auto olarak ayarlanmıştır), herhangi bir görüntü tüm cihazlarda duyarlı olacak şekilde yapılabilir.

CSS Medya Sorguları

Esnek görüntülere ve akıcı ızgaralara sahip duyarlı bir web sayfası teknik olarak duyarlı olsa da, olabileceği kadar iyi görünmüyor. Burası, farklı cihazlar için uyarlanmış daha da iyi bir deneyim yaratmak için kullanıldığından, CSS medya sorgularının devreye girdiği yerdir. Bu uyarlanmış deneyimler genellikle belirli ekran boyutlarında etkili olan kesme noktalarının eklenmesiyle sunulur.

Genel olarak, duyarlı web tasarımı, bugünün Web'ini çok daha erişilebilir hale getirdi, çünkü bu yaklaşım, daha önce piyasadaki değişen ekran boyutlarını barındırmak için gerekli olan daha fazla geliştirme aşaması ihtiyacını ortadan kaldırıyor. Ya da yaratıcısının sözleriyle, web geliştirmeye yönelik bu yaklaşım nihayet “ şeylerin gelgitleri için tasarım ” yapmamızı sağlıyor.

Örnekler

Duyarlı web siteleri günümüzde yaygın bir uygulamadır ve karşılaştığınız hemen hemen her web sitesi doğası gereği bir şekilde duyarlıdır.

Aşamalı Web Uygulamaları

Ne olduğunu

İlk olarak 2015 yılında Alex Russel tarafından ortaya atılan Aşamalı Web Uygulaması , tipik duyarlı web sitesine göre birçok avantajı nedeniyle Web'in bir sonraki doğal evrimidir . Google Developer Advocate Pete LePage'e göre “ ilerici ” kısım, “ kullanıcı zamanla uygulama ile aşamalı olarak bir ilişki kurdukça, giderek daha güçlü hale geliyor” olarak açıklanabilir.

Bir PWA, yerel bir mobil uygulamadan bekleyebileceğiniz (neredeyse) anlık bildirimler, çevrimdışı özellikler vb. dahil olmak üzere tüm özelliklere sahip, uygulama benzeri web sitenizdir. Ve bu nedenle, PWA, web tabanlı bir platformla gelen tüm varsayılan faydaları koruyabildiğinden, tüm deneyim, duyarlı web sitesi karşılığına göre bir adım öndedir.

 İlgili makale: Aşamalı Web Uygulaması Nedir?

Nasıl çalışır

Bir PWA'nın temel bileşenlerini özetlemek aslında oldukça kolaydır. Temel olarak, yukarıda bahsedilen tüm ilerici özellikleri mümkün kılmak için gereksinimler şunlardır:

Web uygulaması bildirimi

Web uygulaması bildirimi, PWA'nızın yükleme işlemi için gerekli meta verileri sağlayan ve PWA'nızın kendisini kullanıcının ana ekranında nasıl sunacağını belirleyen bir JSON dosyasıdır.

Servis çalışanları

Evrensel olarak PWA'nın tüm ilerici özelliklerini mümkün kılan temel bileşen olarak kabul edilen hizmet çalışanları, tarayıcıdan bağımsız olarak ve ana JavaScript'ten farklı bir iş parçacığında çalışır.

Güvenli bağlamlar

Web'in yeni bir standardı olarak, bir PWA'nın güvenli bir protokol olan HTTPS üzerinden ayrılması gerekir. Bu, hem kullanıcı hem de sunucu arasında güvenli iletişimi garanti eder ve karşılığında risksiz bir deneyim sağlar.

Örnekler

PWA'lar yerel mobil uygulamalardan farklı davrandığından, daha önce bilmeden bir PWA sitesini ziyaret etmiş olabilirsiniz. Instagram ve Pinterest gibi büyük, uygulamaya benzer siteleri düşünün; hepsi PWA tarafından desteklenmektedir.

 Önerilen okuma: 2020'de En İyi 12 Progresif Web Uygulaması Örneği

Üst üste geldikleri yer

Modern özelliklerle benzer bir deneyim

Şimdiye kadar her şey sizin için anlamlıysa, o zaman kullanıcı deneyimi söz konusu olduğunda duyarlı web tasarımı (RWD) ve PWA'nın çok fazla örtüştüğünü görmelisiniz. Teknik olarak, PWA duyarlıdır - yaklaşımda olduğu gibi, uygulama benzeri özellikleri etkinleştirmek için biraz modern dokunuşla tüm cihazlarda görüntülemeye uygun hale getirilmiştir.

Ve her ikisi de web geliştirme yaklaşımı olduğundan, Web'in aşağıdakileri içeren hemen hemen tüm avantajlarını paylaşırlar:

• Tüm platformlar için tek URL, tek kod tabanı
• HTTPS ile gelişmiş güvenlik
• Daha iyi keşfedilebilirlik ve her zaman güncel

Farklı oldukları yer

Web geliştirmeye yönelik bu iki yaklaşım - görünüşte çoğunlukla benzer olsa da - gerçek dünyadaki etkilerinde çok farklı olduğundan, işlerin ilginçleştiği yer burasıdır.

Özellikler açısından

Bir PWA, tanımı gereği, tipik duyarlı web sitenizden daha fazla özellikle dolu olarak gelir. PWA, hizmet çalışanları ve web uygulaması bildirimi gibi web teknolojilerindeki son gelişmelerden yararlanarak, daha önce yerel mobil uygulamalara özel olan özellikleri sunabilir, örneğin:

Ana ekrana ekle

Kayıtlı hizmet çalışanları ve bir web uygulaması bildirimi ile PWA, destekleyen bir tarayıcıya sahip her cihaza yüklenebilir.

>> Daha fazla bilgi edinin: İlk PWA'nızı Oluşturun

Push bildirimleri

Servis çalışanları aracılığıyla, tıpkı yerel bir uygulamanın yapacağı gibi bildirimler gönderebilir ve bunların kullanıcının cihazlarında görüntülenmesini sağlayabilirsiniz. Bu, Push API, Notifications API ve Web Push Protokolünden yararlanan Web'in nispeten yeni bir özelliğidir; ve yakın gelecekte, bu özellik yalnızca Bildirim Tetikleyicileri ve Rozetleme API'sinin ortaya çıkması sayesinde daha iyi hale gelecektir.

Çevrimdışı Yetenekler

PWA, tarayıcı içi programlanabilir ağ proxy'si yani hizmet çalışanları sayesinde, HTTP önbelleği gibi eski önbelleğe alma mekanizmalarına güvenmek zorunda kalmadan çevrimdışı içeriği proaktif olarak önbelleğe alabilir ve sunabilir.

Notlar : Duyarlı web siteleri, optimum kullanıcı deneyimi sağlamak için web'deki mevcut tüm API'lerden yararlanmaya devam edebilir; yalnızca hizmet çalışanlarına bağlı tüm özellikleri elde edemezsiniz.

 Önerilen okuma: Aşamalı Web Uygulaması (PWA) ve Donanım Erişimi

performans açısından

Duyarlı web siteleri, mevcut HTTP önbelleğe alma mekanizmasıyla ilişkili tüm dezavantajlar tarafından geride tutulan tipik web siteniz olduğundan, hizmet çalışanları adı verilen daha yeni, daha performans odaklı bir önbelleğe alma mekanizması kullandığından PWA'dan daha iyi performans beklemek mantıklıdır.

Daha hızlı önbelleğe alma mekanizması

Kayıtlı hizmet çalışanları ile, tam olarak neyin önbelleğe alındığını kontrol edebilir ve bunun sonucunda geri gelen ziyaretçiler için daha iyi deneyimler elde edebilirsiniz.

Hizmet çalışanlarının gerçek dünyadaki performans etkisi de dikkatle gözlemlenmemiş bir şey değildir. Google, kullanıcının bir web sitesiyle ilk deneyimini ölçmek için bir metrik olarak ilk boyama zamanını kullanarak, kontrollü bir grupla (bir servis çalışanının web uygulamasını kontrol ettiği) Google I/O web uygulamasının performansını gözlemleyen bir çalışma yürütmüştür ve desteklenen bir grup (hizmetin çalıştığı yerde, kullanımdaki tarayıcı tarafından desteklenir, ancak henüz web uygulamasını kontrol etmez).

Sonuçlar özellikle masaüstünde etkileyiciydi, burada servis çalışanlarının orijinal ilk firstpaint süresini (912 ms) yalnızca 583 ms'ye düşürmek için üzerine düşeni yaptığını görebiliyoruz. Bu, anlık bir deneyime olabildiğince yakındır.

Bununla birlikte, mobil cihazlarda işler biraz daha az etkileyici:

Burada, kontrollü grubun kuyruk ucunun hala desteklenen gruba biraz benzediğini görebiliriz. Bunun nedeni büyük ölçüde mobilde hizmet çalışanı iş parçacıklarının optimize edilmemiş olması ve masaüstüne kıyasla başlamak için daha fazla zamana ihtiyaç duymasıdır.

Genel olarak, hizmet çalışanları veya başka bir deyişle PWA ile elde edilen performans artışı olağanüstüdür. Elbette, mobil hizmet çalışanlarının tarafında yapılması gereken bazı işler var; ama bir bütün olarak, Web'in bir zamanlar olduğu şeye hala marjinal bir adım ve bu konuda doğru yönde bir adım olduğunu hissediyoruz.

güvenlik açısından

HTTPS—Bölen çizgi

Tipik bir duyarlı web sitesi bir PWA kadar güvenli olabilirken , duyarlı web sitelerinin güvenli iletişim protokollerini kullanması gerekli değildir . PWA'nın kurucusu Google, bir PWA'daki sunucu ve istemci arasındaki tüm iletişimlerin HTTPS kullanılarak şifrelenmesini gerektirdiğinden, PWA destekli web sitelerinde bu durum tam tersidir.

Coğrafi konum ve hatta hizmet çalışanları gibi bir PWA ile ilgili özelliklerin çoğu, yalnızca uygulama HTTPS kullanılarak yüklendikten sonra kullanılabilir.

MDN web belgeleri, Aşamalı web uygulamaları (PWA'lar)

 İlgili makale: HTTPS'ye ihtiyacınız var mı?

Çözüm

Servis çalışanları ile elde edilen yukarıda bahsedilen performans artışı, push bildirimleri, ana ekrana ekleme (ve yakın gelecekte, coğrafi sınır belirleme ve periyodik senkronizasyon) gibi ek uygulama benzeri özelliklerle birleştiğinde, tümü PWA'yı bir sonraki olmak için uygun aday haline getirdiğini kanıtlıyor. Web'in evrimi. Şu an itibariyle, PWA hareketi, Windows 10'da PWA'yı benimseyen Microsoft da dahil olmak üzere neredeyse tüm büyük adamlar tarafından geniş çapta teşvik ediliyor. Steve Jobs'un öngördüğü kişi:

Tam Safari motoru iPhone'un içindedir. Ve böylece, tıpkı iPhone'daki uygulamalar gibi tam olarak görünen ve davranan harika Web 2.0 ve Ajax uygulamaları yazabilirsiniz. Ve bu uygulamalar iPhone servisleriyle mükemmel bir şekilde bütünleşebilir. Arama yapabilirler, e-posta gönderebilirler, Google Haritalar'da bir konum arayabilirler.

Steve Jobs, 2007