Progressive Web Apps (PWA): Özellikleri ve Pazarlamadaki Yeri

Progressive Web Apps veya PWA'lar nedir?

Progressive Web Apps, yerel uygulamaların ve bildiğimiz HTML5 tabanlı web uygulamalarının teknolojik birleşimidir. PWA'lar, uygulamalar ve web sayfaları arasındaki teknolojik boşluğu doldurmak için gelmiştir.

Google, bu tür teknolojinin geliştirilmesini teşvik eden ana savunuculardan biri olmuştur. Özelliklerini daha iyi anlamak için, güvenilir, hızlı ve etkileyici olması gereken uygulamalardan bahsetmemiz gerekiyor.

Progressive Web Apps'ın sahip olması gereken özellikler

PWA kavramını yeterince netleştirmek ve açıklamak için, bu teknolojilerin sahip olması gereken temel özelliklere dalalım.

Tabii ki, genel terimlerle konuşuyoruz. Buradan itibaren, her iş/hizmet modeli hedeflerini kendi hedef kitlesinin ihtiyaçlarına uyarlayacaktır.

Hız

Zaman paradır, yalnızca Google için değil, ürünlerinin yavaş yüklenmesinin kullanıcıların potansiyel bir satın alma işlemini bırakmasına neden olabileceği tüm işletmeler için.

Google bu öncülü uzun süredir vurgulamaktadır. AMP projesinin doğuşu bu hedefe sahipti ve şimdi PWA'lar uygulamalardan bilgilere hızlı erişim ihtiyacına katılıyor.

Bugünün kullanıcılarının sabrı yok; bir sitenin tamamen yüklenmesini beklemiyorlar. Think with Google tarafından yapılan araştırmalara göre, kullanıcıların %53'ü bir web sitesinin yüklenmesi için 3 saniyeden fazla beklemeyecek

Güvenilir

Güvenilirlikten bahsederken sitenin işletim garantilerine atıfta bulunuyoruz. Service Workers olarak bilinen şeyler sayesinde, ağ bağlantı sorunları PWA'nın yüklenmesini engellememelidir.

Yüklenebilir

PWA'lar, Chrome Store, Apple Store veya mevcut herhangi bir uygulama mağazasına gitmeden yüklenebilir. Yerel uygulamalar olmadıklarını unutmayın, bu yüzden bu mağazalardan geçmeden onlara erişebiliriz.

Kurulum, basitçe bir kısayol gibi davranır; farklı dosyaları depolamak için yer gerektirmez.

Farklı cihazlar: Mobil ve Masaüstü

Kod tabanı her iki cihaz arasında birleştirilmiştir, bu da duyarlı tasarım tekniklerinin hem mobil hem de masaüstü için geçerli olduğu anlamına gelir.

PWA'ların avantajları ve dezavantajları

İlerici uygulamaların özelliklerini açıklarken yukarıda zaten bazı avantajlardan bahsedildi. Ancak işletmemizde bu teknolojiyi kullanmayı düşünmek için daha birçok neden var.

• ›Kaynak tasarrufu
• ›Kurulum gerektirmez
• ›Çok yüksek yükleme hızı
• ›Akıllı telefonlara doğrudan push bildirimler
• ›Tüm işletim sistemlerinde çalışır
• ›Geliştirilmiş güvenlik
• ›Yerel bir uygulamadan daha az geliştirme ve bakım çalışması.
• ›Yerel bir uygulamadan daha ekonomiktir.

Dezavantajlar

• ›İnternet bağlantısı gerektirir.
• ›Tüm tarayıcılar PWA'ları desteklemez.
• ›Yüksek pil tüketimi

Service Worker nedir?

Kısaca teknik tarafa geri dönerek, ilerici uygulamaların işleyemeyeceği belirli yönlerden bahsetmemiz gerekiyor. Service workers, web uygulamalarına, önbelleğe veya ağın kendisine istekler yapan, arka planda çalışan scriptlerdir.

Bilmemiz gereken önemli bir şey, Service Workers'ın yalnızca bir SSL sertifikanız varsa ve onları https üzerinden sunarsanız işleyebileceğidir.

Şimdi her şeyi bir örnekle görelim: BMW'nin web sitesi ve PWA'sı.

PWA Örneği: BMW

Teknik konulara çok girmeden bir makale yazmaya çalıştım ve şimdi PWA kavramını daha iyi anlamamıza yardımcı olacak bir uygulama örneği göreceğiz.

BMW'nin web sitesine girersek, görseli önceleyen çok çekici bir tasarımları olduğunu görebiliriz, ancak tasarımdan bahsetmenin ötesinde, ne tür bir web sitesiyle uğraştığımızı görelim.

Görünüşe göre "normal" bir web sitesi, ancak kodu kazarsanız ilk sürprizimizi alıyoruz. Aslında, sadece mobil sürüm değil, tamamen AMP'de geliştirilmiş bir web sitesidir.

Ama bugünkü konumuza geri dönelim.

Web sitesine girdikten sonra, Chrome'un "özelleştir ve kontrol et" çubuğuna gidelim.

Görebileceğiniz gibi, BMW web sitesinin içeriği ile bir pencere açıldı. Her iki içeriği karşılaştırdığımızda, pratikte aynı olduklarını görüyoruz.

Web sitesinin tarayıcıdaki (Chrome) görseli

Web sitesinin PWA masaüstündeki görseli

BMW'nin geliştiricileri aynı görsel görünümü korumayı başardı. PWA'nın Chrome uygulamalar klasörümüze veya hatta masaüstüne (OS'ye bağlı olarak, şu anda MacOS kullanıyorum) "kurulumunu" kabul ettiğimizde, PWA'ya bir kısayol indirildi.

Uygulamaları yüklemekten bunaldıysak ve kaldırmak istiyorsak, sadece PWA sürüm penceremize gitmemiz, sağ tarafa Chrome'daki gibi tıklamamız ve kaldırı seçmemiz gerekir.

Mobil sürümde pratik olarak benzerdir. PWA sürümü olan web sitesine girdiğimizde, "kısayol oluştur" bildirimi alırız.

PWA'lı bir web sitesine girerken; bir kısayol oluşturma seçeneğini göreceğiz.

Kabul edersek, mobil masaüstümüzde bir PWA simgesi göreceğiz.

PWA'lar hakkında daha fazla bilgi edinmek için DevTools

Bu noktada, bu tür uygulamaların kavramlarını ve özelliklerini açıklamak için örneklere dalmak istiyorum.

Bunun için Chrome'un sağladığı geliştirici aracını (DevTools) kullanacağız. Sağ tıkla denetleyiciyi açıyoruz ve Application'a gidiyoruz.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifest, ani değişiklikleri önlemek için tarayıcıya sağladığı temel stil yönlerini içeren küçük bir JSON dosyasıdır.

Manifest Örneği (JSON)

Service Workers

Daha önce açıkladığımız gibi, şimdi neyle ilgili olduğunu görebiliriz. JS dosyasını görüyoruz ve içinde kullandığı scriptleri görüyoruz. Service Worker tarayıcıya kurulur. Diğer web uygulamalarından birkaç tane olacak.

Bu tür kodların ana işlevlerinden biri, başka bir sekme açsak bile her zaman aynı sürümün sunulmasını sağlamaktır (önbelleği kontrol eder).

WordPress'te PWA nasıl uygulanır?

Web sitemizi kendi kodumuzla geliştirmişsek oldukça fazla manuel iş yapmamız gerekecekken, durum web sitemizi WordPress'te geliştirmişsek çok farklı olacak. Bu durumdaysa, PWA teknolojisini birkaç tıklamayla etkinleştirmemize olanak tanıyan birkaç eklenti elimizin altında olacak. Aslında SEO Alive'ın PWA sürümü, tavsiye ettiğimiz bu eklentinin sonucudur.

WordPress'te PWA uygulamak için en popüler eklentiler.

Pazarlamada PWA'lar

Pazarlamada çalışan bizler için, Progressive Web Apps her pazarlama departmanının bir markayı büyütmek için aklında olan hedeflere ulaşmamıza yardımcı olabilir.

Sadakat ve Satışlar

Bazı markalar tarafından en kötü işlenmiş hedeflerden biri. Hepimiz cep telefonu markalarının müşterilerine yaklaşırken sahip olduğu düşük katılımı biliyoruz, örnek vermek gerekirse.

PWA'lardaki push bildirimler, en iyi çalışan ve satış yaratımına katkıda bulunan eylemlerden biridir.

Gartner tarafından PWA'lar üzerinde yapılan bir çalışma bize Lancome ve Alibaba hakkında çok ilginç istatistikler veriyor; Lancome dönüşümlerde %17 artış bildiriyor, mobil cihazlardan oturumlarda %51 ve iOS'ta %52. Alibaba (Aliexpress'in ait olduğu grup) dönüşüm oranını %76 iyileştirdi.

2 küresel devden bahsetmiş olsak da, mobil telefonunuzda yükleme ve çalışma süresinin engel olmadığı, ayrıca iyi tasarıma saygı gösteren bir uygulamaya sahip olmanın dönüşüm oranını artırdığı gösterilmiştir.

Sonuç olarak, PWA'ların özellikle büyük markalar arasında giderek yayıldığını söyleyebiliriz. İspanya'da, muhtemelen bu teknolojinin muazzam potansiyelini fark etmek biraz zaman alacak, ancak yakında değil de ileride uygulanacaktır.

Mobil gezinmeyi kolaylaştıran herhangi bir teknoloji büyük öneme sahiptir; akıllı telefonlarımızla çok saat geçiriyoruz ve nihayetinde, hem içeriğe hem de ürünlere erişim iştir.

Referanslar

• ›PWA'lar hakkında Google dokümantasyonu