Aşamalı Web Uygulamaları (PWA): İlk 3 Vaka Çalışması

Yayınlanan: 2019-06-19

İçindekiler

Yeni bir startup kurduğunuzu ve web sitenizin harika göründüğünü, ancak iş stratejiniz için önemli olabilecek bir mobil uygulama geliştirmek için yeterli bütçenizin olmadığını hayal edin. Ancak, çok pahalı ve biraz riskli. Ayrıca yerel bir uygulama oluşturmak için çok zaman harcamanız gerekecek, ancak kimse markanızı iyi tanımıyor. İnsanlar uygulamanıza App Store veya Google Play Store'dan indirecek kadar güvenecek mi?

Dahası – müşterileriniz/okuyucularınız web sitenizi kapatmak, Google Play'i veya App Store'u açmak ve ardından uygulamanın yüklenmesini sabırla beklemek gibi bazı ek adımlar atmaya kararlı mı?

İnsanların bu günlerde çok daha talepkar olduğunu unutmayın. Başka bir deyişle, onlar da çok sabırsızlarhızlı çözümler bekliyorlar. Böyle bir uygulamayı harici bir mağazadan indirmek çok hızlı bir işlem gibi görünmüyor ve yerel uygulamalar her kullanıcı için çok erişilebilir değil. Kullanıcı Deneyimi açısından, müşterinin (ve sizin) hedefine ulaşmasından önce önünde birçok engel vardır.

Ve başka bir şey daha – müşterilerinizin uygulamanızı indirmek için yeterli dahili depolama alanına sahip olacağından emin misiniz?

Yani bir mobil uygulama (hem IOS hem de Android için) oluşturmak için çok para yatıracaksınız ve insanların bunu gerçekten kullanacağından emin olamazsınız. Ahh… ve reklam ve tanıtım için harcamanız gerekecek tüm bu büyük pazarlama bütçenizi unutmayın!

Ama bekleyin, paniğe kapılmayın, iyi ki 2019'da yaşıyorsunuz.   Progresif Web Uygulamaları, mobil uygulamalar oluşturmak söz konusu olduğunda yaygın bir çözüm haline geliyor!

Progresif Web Uygulamalarını hiç duydunuz mu? Değilse, şimdi bu son teknoloji trendini yakalama şansınız var, yoksa geride kalacaksınız! Bunların ne olduğunu ve neden bu seçeneği seçmeye değer olduğunu açıklayan kapsamlı bir makale yazdık.

Bugün size biraz ilham vermek ve Aşamalı Web Uygulamaları geliştirmiş olan markaların başarı öykülerini tanıtmak istiyoruz.

TRİVAGO

trivago logosu

Trivago, 33 farklı dilde mevcut olan otel arama motoru için iyi bir üne sahiptir. Otel bilgilerine, resimlere, derecelendirmelere, incelemelere, filtrelere ve diğer özelliklere dayanarak, Trivago kullanıcılarının en iyi teklifi bulmalarına yardımcı olur.

Sorun

Trivago Sembolü

Sorun şu ki, Trivago son yıllarda mobil kullanıcılarda önemli bir artış fark etti. Marka, mobil deneyimin müşterileri için giderek daha önemli hale geldiğini fark etti.

Ancak mobil çözümler üretmek çocuk oyuncağı değil ve bu da zor seçimler yapmak anlamına geliyor. Spesifik olarak şirket, insanların beklentilerine uyup uymadığını kontrol etmek için bir mobil uygulamayı indirmenin maliyetini kabul edip etmeyeceklerinden emin değildi. Ayrıca birçok insanın kaliteli bir mobil bağlantıyla ilgili sorunları olduğunu fark ettiler. Bu nedenlerden dolayı Trivago, yerel bir uygulamadan farklı fırsatlar arıyordu.

 Önerilen okuma: Aşamalı Web Uygulamaları ve Yerel Uygulamalar: Hangisi Size Daha Çok Yakışıyor?

Çözüm

Sonunda, özellikleri ihtiyaçları için mükemmel görünen Aşamalı Web Uygulamalarını keşfettiler. O zamanlar, kendilerine push bildirimleri , çevrimdışı mod ve ana ekran kısayolları sağlayacak bir çözüm arıyorlardı. Ve Trivago için en önemli faktör, bu uygulamaya standart bir mobil tarayıcı üzerinden erişilebilirlikti .

Trivago Aşamalı Web Uygulaması
Trivago Aşamalı Web Uygulaması

Bu PWA çözümü, büyük yazılım geliştirici ekiplerini dahil etmek zorunda kalmadan bir uygulama oluşturmalarına yardımcı oldu. Push bildirimleri, çevrimdışı erişim ve uygulamayı ana ekrana ekleme imkanı gibi başlangıçta en önemli özelliklere odaklandılar. Elbette başta zorluklar oldu. En büyük zorluklardan birinin sezgisel bir Kullanıcı Arayüzü oluşturmak olduğunu söylediler çünkü mobil bir görünüm tasarlamak standart web sitelerinden çok daha farklı. PWA tasarımcısı Laura Oades'e göre:

"Mobil cihazlarda, platformdan bağımsız ve kafa karıştırıcı olmayan bir kullanıcı arayüzü oluşturma konusunda ek bir sorununuz var" ve "PWA, tasarımda büyük ölçüde keşfedilmemiş bir bölge ve yaratıcı sorun çözücülerin kendilerini yeni bir standart tanımlamak için genişletmeleri için gerçek bir fırsat."

Sonuçlar

Trivago PWA istatistikleri
Kaynak: pwastats.com
  • Trivago mobil web sitesi 55 ülkede 33 dilde mevcuttur.
  • 500.000'den fazla kişi ana ekranlarına bir Trivago kısayolu ekledi ve katılımları %150 arttı .
  • Önceki mobil web sitelerine kıyasla, Progressive Web App çok daha fazla kullanıcıyı cezbetti. PWA'dan önce sadece %0,8 tekrar ziyareti kaydedilirken, şimdi bu sayı ortalama %2'ye yükseldi.
  • Anında iletme bildirimlerinin mükemmel bir iletişim aracı olduğu ortaya çıktı - dönüşümün artmasına yardımcı oldular - PWA'da otel tekliflerine yapılan tıklamaların sayısı %97 arttı.
 Önerilen okuma: Seyahat Endüstrisindeki En İyi 7 Progresif Web Uygulaması

PINTEREST

Pinterest logosu

Pinterest , kullanıcıların kendilerinin veya başkalarının panolarına (yani, genellikle ortak bir tema) ve diğer kullanıcıların sabitlediklerine göz atma

Sorun

Pinterest sembolü

Kimliği doğrulanmamış mobil web kullanıcıları için kullanımı analiz ettikten sonra, eski, yavaş web deneyimlerinin kullanıcıların yalnızca %1'ini kaydolma, oturum açma veya yerel uygulama yüklemelerine dönüştürmeyi başardığını fark ettiler. Bu konuşma oranını artırma fırsatı çok büyüktü ve onları PWA'ya yatırım yapmaya yönlendirdi.

Pinterest PWA, onları mobil web'e yönlendiren uluslararası büyümeye odaklandıkları için başladı.

Çözüm

Pinterest, 3 ayı aşkın bir süredir React, Redux ve web paketini kullanarak mobil web deneyimini yeniden oluşturdu. Mobil web yeniden yazma işlemleri, temel iş metriklerinde birkaç olumlu gelişmeye yol açtı.

Pinterest Aşamalı Web Uygulaması
Pinterest Aşamalı Web Uygulaması

Sonuçlar

Mobil web yeniden yazmaları, performansta çeşitli iyileştirmelere yol açtı.

Eski mobil web deneyimine kıyasla harcanan süre %40 , kullanıcı tarafından oluşturulan reklam geliri %44 ve temel etkileşimler %60 arttı :

Kaynak: Orta
Pinterest PWA istatistikleri
Kaynak: pwastats.com

Pinterest'in eski mobil web deneyimi bir monolitti - Pin sayfalarının ne kadar hızlı yüklenip etkileşime girebileceğini zorlayan büyük CPU ağırlıklı JavaScript paketleri içeriyordu.

Yeni mobil web deneyimleri ciddi bir gelişmedir.

Çekirdek paketlerinin boyutunu 650 KB'den 150 KB'ye indirerek yalnızca JavaScript'lerini parçalayıp yüzlerce KB'yi azaltmakla kalmadılar, aynı zamanda temel performans ölçümlerini de geliştirdiler. İlk Anlamlı Boya 4,2 saniyeden 1,8 saniyeye düşürüldü ve Etkileşim Süresi 23 saniyeden 5,6 saniyeye düşürüldü.

Yerel uygulama boyutuna kıyasla Pinterest PWA boyutu

Pinterest, iOS ve Android uygulamaları satsa da, bu uygulamaların web'de yaptığı aynı temel ana besleme deneyimini peşin indirme maliyetinin çok altında bir fiyata sunabildiler - yalnızca ~150 KB küçültülmüş ve sıkıştırılmış halde. Bu, Android için bu deneyimi sunmak için gereken 9,6 MB ve iOS için 56 MB ile çelişiyor

twitter

heyecan logosu

Bildiğiniz gibi Twitter, insanların tweet adı verilen kısa mesajlar gönderdiği bir sosyal medya platformudur. Mart 2006'da oluşturuldu. Şimdi 335 milyondan fazla aktif kullanıcısı var (Temmuz 2018).

Sorun

heyecan sembolü

Twitter, kullanıcıların mobil web sitelerini kullanırken birçok engeli aşmak zorunda kaldıklarını fark etti.

Bazıları yavaş mobil ağlardaydı ve mobil cihazların depolama alanında çok az alana sahipti. Sonuç olarak, ziyaretçiler Twitter'ın web sitesinde vakit geçirmek veya daha fazla gönderi paylaşmak ve yorum yapmakla ilgilenmek konusunda isteksizdi. Twitter, kendi yerel uygulamasını kullanmayan veya bunu indirmek için yeterli alana sahip olmayan kişiler için çekici bir alternatif bulmak istedi.

Çözüm

Twitter Aşamalı Web Uygulaması
Twitter Aşamalı Web Uygulaması

Twitter, modern bir web sitesi ile yerel özelliklerin en iyi kombinasyonu gibi göründüğü için bir Aşamalı Web Uygulaması oluşturmaya karar verdi. Anında yükleme, daha düşük veri tüketimi ve geniş erişilebilirlik, Twitter'ın aradığı özelliklerdi.

Sonuçlar

Sonuçların çok etkileyici olduğu ortaya çıktı – rakamlar kendileri için konuşuyor:

  • Hemen çıkma oranında %20 düşüş,
  • Oturum başına sayfa sayısında %65 artış,
  • Gönderilen Tweetlerde %75 artış.
Twitter PWA istatistikleri
Kaynak: pwastats.com

Önceki başarı öykülerinde olduğu gibi, “ ana ekrana ekle ” istemi ve push bildirimleri, kullanıcının katılımını önemli ölçüde artırdı . Bu Vaka Çalışmasında bildirildiği gibi, Twitter, 250 000 benzersiz günlük kullanıcının Twitter Lite'ı ana ekrandan günde ortalama 4 kez çalıştırdığını fark etti. Dahası, günde 10 milyondan fazla push bildirimi gönderiyorlar.

Twitter yükleme süresi PWA istatistikleri
Kaynak: pwastats.com

Twitter'ın amaçlarına göre, PWA yerel Android uygulamasından (23,5 MB) çok daha az yer kaplar (yalnızca 600 KB), bu nedenle insanların dahili depolamalarında onu kurtarmak için yeterli alana sahip olma olasılığı daha yüksektir.

Dahası, Twitter, kullanıcıların kullanılan mobil veri miktarını kontrol etmelerine yardımcı olan bir veri tasarrufu modu ekledi. Bu seçenek sayesinde, hangi resimlerin veya videoların tam olarak yüklenmesini istediğinizi ve hangilerinin sadece önizleme olarak kalabileceğini seçebilirsiniz.

 Önerilen okuma: PWA SEO: Aşamalı Web Uygulamaları (PWA'lar) SEO'dan Yarar Sağlar mı? (Stat ve Örneklerle)

Web Sitelerinin Geleceğini Kucaklayın

PWA, mobil uygulamaların geleceğidir. Zamanla yerel uygulamaları değiştirip yerel uygulama ve web sitesinin mükemmel bir kombinasyonu haline gelme olasılıkları var. Yeni teknolojiyi benimseme hızının rekabet avantajı olduğu bir dünyada, PWA anını daha erken benimsemeyi başaran işletmeler, önemli ölçüde gelir sağlayabilir, rekabette bir adım önde kalırken kullanıcı katılımını artırabilir.

Geçmişte Apple'ın Aşamalı Web Uygulamaları için bazı sınırlamaları vardı, ancak şimdi PWA'ları giderek daha fazla destekliyorlar. Magento e-Ticaret web siteleri için her yönüyle mükemmel bir PWA arayan çevrimiçi tüccarlar için burada SimiCart'ta siz ve mağazanız için eksiksiz bir paket sunuyoruz.