50 PWA Örneği ile 2022'de Aşamalı Web Uygulamaları İçin Nihai Kılavuz

Yayınlanan: 2021-03-18

Aşamalı bir web uygulaması oluşturmakla ilgileniyor musunuz? Bu kılavuz, bilmeniz gereken her şeyi size anlatacak - piyasadaki en iyi PWA'ların 50 örneği!

Yıllardır durmaksızın vaaz veriyoruz: yerel bir uygulamaya ihtiyacınız var. Bunun için iyi sebepler vardı ve biz hala onun yanındayız.

E-Ticaret için News, Canvas ve Canvas platformlarımız, müşterilerimizin mobil UX'i büyük ölçüde geliştirmelerine, trafiği artırmalarına, daha fazla bağlılık oluşturmalarına ve gelirlerini artırmalarına yardımcı oldu. Yerel uygulamalar, temel kullanıcı tabanınızla daha derin bir ilişki kurmak için mükemmel bir şekilde çalışır ve sadakat, katılım ve elde tutmaya değer veren tüm markalar için bir zorunluluktur.

Ancak hiçbir şey mükemmel değildir. Yerel uygulamalar, harika web deneyimlerinin yerini alamaz .

Yerel uygulamalar yalnızca uygulamayı yüklemiş olanlar için geçerlidir. Sizi web'de ilk kez kontrol eden yeni ziyaretçiler, ara sıra uğrayan ve henüz uygulamayı yüklemek için yeterince kararlı olmayan sıradan kullanıcılar veya masaüstünde olan müşteriler için hiçbir şey yapmazlar.

Bu potansiyel müşteriler de başarı için kesinlikle çok önemlidir. İlk izlenimler çok önemlidir ve yerel uygulamalar dönüşüm hunisinin ilk aşamalarında her zaman yardımcı olur. Tüm yolculuk için hızlı ve sorunsuz bir deneyim sağlamanız gerekir. Nasıl?

Aşamalı web uygulamalarına (PWA'lar) girin. Bir web siteniz varsa ve bu sizin veya işiniz için uzaktan önemliyse, bir PWA'ya ihtiyacınız vardır.

Bu makalede, aşamalı web uygulamalarını tanımlayacağız, en önemli faydalarını tartışacağız ve internetteki en iyi PWA'ların 50 örneğini paylaşacağız.

Bir PWA'nın nasıl oluşturulacağına ve kazanan bir mobil UX kombosu oluşturmak için yerel mobil uygulamalarla nasıl çalıştıklarına ilişkin bazı ipuçlarıyla bitireceğiz. Gelelim. Bu makalenin sonunda, aşamalı web uygulaması projenize başlamak için bilmeniz gereken her şeyi öğreneceksiniz.

Temel soruyla başlayacağız – PWA nedir?


PWA'lar, web ziyaretçilerine daha iyi bir deneyim sunmak için harikadır. Ancak iOS ve Android genelinde push bildirimleri göndermek istiyorsanız, uygulama mağazalarında yer almak ve kullanıcılarınıza bir mobil uygulamadan istedikleri deneyimi yaşatmak istiyorsanız beklentilerin altında kalabilirler. MobiLoud, haber siteleri, bloglar, e-ticaret mağazaları ve kullandığınız teknoloji yığını ne olursa olsun herhangi bir site veya web uygulaması için çözümlerle web sitenizi yerel mobil uygulamalara dönüştürmenize yardımcı olur. Daha fazla bilgi edinmek ve siteniz için nasıl çalışabileceğini görmek için ücretsiz bir demo edinin.


Aşamalı Web Uygulaması Tam Olarak Nedir ? Bir PWA tanımlayalım

Aşamalı web uygulamaları, web'in en iyilerini, daha önce yalnızca yerel uygulamalarda mümkün olan özelliklerle birleştirir.

PWA'lar, geleneksel bir web sitesi gibi tarayıcıda yaşar ve web'in bağlantı altyapısına ve arama motoru dizinlerine tamamen bağlıdır. Bir ana ekran simgesinden başlatılabilmelerine, kullanıcının cihazına anında iletme bildirimleri göndermelerine, bir saniyede yükleyebilmelerine ve çevrimdışı çalışmak üzere oluşturulabilmelerine rağmen yerel uygulamalar gibi.

Aşamalı web uygulamaları sitenizden ayrı değildir. Bunlar, sitenizi mevcut en iyi uygulamalarla güncel hale getiren ve bir mobil tarayıcıdan uygulama benzeri bir deneyim sağlamak için hizmet çalışanları gibi en son web teknolojisinden yararlanan bir geliştirmedir .

Belki de hala tam olarak ne olduklarından emin değilsiniz.

Bu anlaşılabilir bir durumdur, çünkü terim çok fazla çarpıktır, ancak sağlam tanımlar zor. Bazı şeyleri açıklığa kavuşturmak için terimin tarihine bakalım.

Aşamalı Web Uygulamasının Orijinal Tanımı

“Progresif Web Uygulaması” terimi, 2015 yılında Francis Berriman ve Google mühendisi Alex Russell tarafından ortaya atıldı. Yeni bir web uygulamaları sınıfının ortaya çıkışını gözlemliyorlardı ve akşam yemeğinde onları tanımlamaya ve adlandırmaya karar verdiler.

Aşağıdaki kriterlerle geldiler:

  • Duyarlı: herhangi bir form faktörüne uyacak şekilde
  • Bağlantıdan bağımsız : Servis Çalışanları ile çevrimdışı çalışmasına izin vermek için aşamalı olarak iyileştirildi
  • Uygulama benzeri etkileşimler: Uygun gezinmeler ve etkileşimler oluşturmak için bir Kabuk + İçerik uygulama modelini benimseyin
  • Taze : Service Worker güncelleme süreci sayesinde şeffaf bir şekilde her zaman güncel
  • Güvenli : Gözetlemeyi önlemek için TLS (bir Hizmet Çalışanı gereksinimi) aracılığıyla sunulur
  • Keşfedilebilir : W3C Manifests ve Service Worker kayıt kapsamı sayesinde arama motorlarının onları bulmasını sağlayan “uygulamalar” olarak tanımlanabilir
  • Yeniden bağlanabilir : İşletim sisteminin yeniden etkileşim kullanıcı arayüzlerine erişebilir; örneğin Anında Bildirimler
  • Yüklenebilir : tarayıcı tarafından sağlanan istemler aracılığıyla ana ekrana, kullanıcıların en yararlı buldukları uygulamaları bir uygulama mağazasının sıkıntısı olmadan "saklamalarına" olanak tanır
  • Bağlanabilir : sıfır sürtünme, sıfır kurulum ve paylaşması kolay oldukları anlamına gelir. URL'lerin sosyal gücü önemlidir.

Bu kriterlerin tanımın “web uygulaması” kısmını nasıl karşıladığını görebilirsiniz.

Uzun yıllar bizim gibi şirketler ve diğerleri, işletmelerin web teknolojileriyle uygulama deneyimleri oluşturmasına olanak tanıyan platformlar oluşturdu. Bu, bugüne kadar harika çalışıyor, ancak ödünleşimler var. Harika bir yerel uygulama deneyimi yaratmak için web'in keşfedilebilirliğini ve bağlanabilirliğini kaybedersiniz.

Hizmet çalışanları (bunlara daha sonra değineceğiz) gibi yeni web teknolojileri ortaya çıktı ve bazı şeyleri değiştirdi - geliştiricilerin yerel uygulama UX'inin en iyilerini alan ve bunu tarayıcıya yerleştiren deneyimler oluşturmasına olanak tanıyarak web'in tüm avantajlarını elinde tutmasını sağladı.

Artık insanları gerçek anlaşmayı elde etmek için yerel uygulamalarınızı indirmeye zorlarken vasat bir mobil web UX'i kabul etmenize gerek yok. Markanızla çevrimiçi olarak etkileşime giren herkese App Store'larda ve web'de harika bir mobil deneyim sunabilirsiniz.

Berriman ve Russell'ın gözlemlediği şey buydu. Hiçbir şey icat etmediler, web'de bir değişiklik fark ettiler ve adını verdiler.

Peki ya “ilerici” kısım?

Bu bağlamda, uygulamaların aşamalı geliştirme ile oluşturulduğu anlamına gelir . Bu, herkes için çalışan, ancak daha gelişmiş cihazlarda yükseltilen ve geliştiren bir "temel" deneyim oluşturmaya odaklanan bir tasarım tekniğidir. Aşamalı bir web uygulamasının deneyimi, tüm kullanıcılar için mutlaka aynı değildir, cihazlarının gücüne ve verdikleri izinlere göre uyarlanır.

Peki Berriman ve Russell'ın tanımı yeterli mi? Sorun şu ki, çok az PWA aslında bu kriterlerin hepsini yerine getiriyor. Daha çok bir dilek listesi, hedeflenecek bir hedef veya bir örnek vaka gibidirler.

Google'ın Aşamalı Web Uygulaması Tanımı

Microsoft, bir süredir PWA'lar konusunda hevesli. Apple biraz ikna oldu ve şimdi (çoğunlukla) işin içinde. Yine de, büyük teknolojiler arasında, PWA'ları en başından beri gerçekten destekleyen Google'dı.

Bununla birlikte, Google'ın kendisi tanımdan %100 emin görünmüyor. 2015'te 10 özellikten oluşan bir liste çıkardılar, sonra bunu altıya indirdiler, ardından üç yeni özellik eklediler.

Şu anda, Google'ın aşamalı bir web uygulaması tanımı üç sütun içermektedir. Giriş sayfalarında PWA'ların şunlar olduğunu belirtiyorlar:

Yetenekli, güvenilir ve kurulabilir olacak şekilde tasarlanmış web uygulamaları . Bu üç sütun, onları platforma özel bir uygulama gibi hissettiren bir deneyime dönüştürüyor”

Bu daha faydalıdır, ancak çok geniş olduğu için o kadar da yararlı değildir. Yine de kilit noktada, PWA'ların geleneksel olarak yalnızca yerel platformlarla ilişkilendirilen deneyimleri web'e getirdiğini ima ediyor.

Aşamalı Web Uygulamasının Teknik Tanımı

Bir PWA'yı tanımlamanın üçüncü bir yolu, UX kriterlerinden ziyade tamamen teknik kriterler belirlemektir.

Web geliştiricisi ve yazarı Jeremy Keith'in 2017 blog yazısında bunu denedi. Aşamalı Web Uygulaması Nedir? .

Keith, PWA tanımlarıyla ilgili kafa karışıklığının temelsiz olduğunu ve temel olarak üç kriterin karşılanması gerektiğini düşünüyor:

  1. HTTPS – PWA'lar, HTTPS kullanan güvenli sunucularda çalışmalıdır. Hizmet çalışanları potansiyelleri için gereklidir ve yalnızca yerinde HTTPS varsa kullanılabilirler.
  2. Hizmet Çalışanı – esas olarak ana tarayıcı "iş parçacığından" ayrı olarak çalışan ve geliştiricinin uygulamanın ağ isteklerini ve önbelleğe almayı nasıl ele aldığını kontrol etmesine izin veren bir JavaScript dosyasıdır. Bu, PWA'ların etkileyici hızını ve çevrimdışı yeteneklerini artırmaya yardımcı olur.
  3. Web Uygulaması Bildirimi – ad, yazar, simge, açıklama ve uygulamayı çalıştıracak kaynaklar gibi ayrıntılar da dahil olmak üzere tarayıcıya uygulamanın açıklamasını sağlayan bir JSON dosyası. Bu, uygulamanın keşfedilebilir olmasını sağlar.

Keith, bunun minimal, çıplak kemik bir tanım olduğunu not etmeye devam ediyor. PWA'lar çok daha fazlasını yapabilir, ancak kesinti yapmak için bu üç teknik kriteri yerine getirmeleri gerekir .

Böylece orijinal gözlemsel/istekli tanımı, Google'ın UX odaklı tanımını ve minimalist bir teknik tanımı gördük. Neyi tahmin edebiliriz? Hala biraz belirsizlik olsa da, artık ilerici bir web uygulamasının ne olduğu hakkında iyi bir fikrimiz var.

PWA, bu özellikleri elde etmek için en son web teknolojilerini kullanan modern, güvenli, hızlı yüklenen bir web sitesidir. Geleneksel web sitelerinden farklı olarak, kullanıcıya yerel bir uygulama gibi davranır ve hissettirir ve bu süreçte tarayıcı sekmesinden "kaçar".

url'yi arayın veya yazın
Sekmeden kaçmak ( kaynak )

Alex Russell'ın dediği gibi:

"Bu uygulamalar mağazalar aracılığıyla paketlenip dağıtılmıyor, sadece tüm doğru vitaminleri alan web siteleri"

Bunu koymak için harika bir yol. PWA'lar web'in en yeni neslidir. Modern tarayıcı teknolojisinin potansiyelinden yararlanabilen web uygulamalarıdır. Kendi web sitenizi bir PWA'ya çevirerek, ona optimum performans göstermesi için gerekli olan "vitaminleri" vermiş olursunuz.

Şimdi, projenize ilham verecek 50 PWA örneğine bakmadan önce, aşamalı bir web uygulaması oluşturmanın faydalarına geçeceğiz.

Aşamalı Web Uygulaması Avantajları

Bir web siteniz varsa ve bu herhangi bir şekilde işinizin başarısına bağlıysa, bir PWA oluşturmanız gerektiğini daha önce belirtmiştik.

Bu cesur bir ifade gibi görünebilir, ancak gerçek bu. Niye ya?

Özetle, bir PWA oluşturmayarak, muhtemelen müşteri, gelir ve büyümeyi masada bırakıyorsunuz. Google'ın web ekibinden Pete LePage ve Sam Richard'ın dediği gibi:

“Rakamlar yalan söylemez! Progressive Web Apps'ı başlatan şirketler etkileyici sonuçlar elde etti. Örneğin, Twitter oturum başına sayfa sayısında %65 artış, Tweet sayısında %75 artış ve hemen çıkma oranında %20 düşüş elde ederken, tüm bunların yanı sıra uygulamalarının boyutunu %97'nin üzerinde küçülttü. Nikkei, PWA'ya geçtikten sonra 2,3 kat daha fazla organik trafik, %58 daha fazla abonelik ve %49 daha fazla günlük aktif kullanıcı gördü. Hulu, platforma özel masaüstü deneyimini bir Aşamalı Web Uygulaması ile değiştirdi ve tekrar ziyaretlerde %27'lik bir artış elde etti."

Bu sadece yüzeyi çizer.

PWA'ları piyasaya sürmenin doğrudan bir sonucu olarak diğer tanınmış markaların elde ettiği sonuçlara bir göz atalım.

  • Alibaba , mobil web dönüşümlerini %76 artırdı, iOS'ta %14 ve Android'de %30 daha aktif kullanıcı gördü
  • Debenhams , mobil gelirde %40 artış, dönüşümlerde %20 artış ve pazarın üzerinde çevrimiçi büyüme elde etti
  • Pinterest , harcanan toplam sürede %40 artış, kullanıcı tarafından oluşturulan reklam gelirinde %44 artış ve %60 daha fazla çekirdek etkileşim elde etti
  • Forbes , kullanıcı başına oturum sayısında %43, reklam görüntülenebilirliğinde %20 ve etkileşimde %100 artış elde etti.
  • BMW , satış sitelerinin TO'sunda %30 artış, 4 kat daha hızlı yükleme süreleri, mobil kullanıcılarda %50 büyüme ve %49 daha fazla organik trafik elde etti
  • MakeMyTrip sayfa hızını %38 artırdı, dönüşüm oranlarını üç katına çıkardı ve alışveriş oturumlarında %160 artış sağladı
  • AliExpress , yeni kullanıcılar için dönüşüm oranlarını %104 artırdı (iOS'ta +%82) ve oturum başına 2 kat daha fazla sayfa ziyaret ederek oturum başına harcanan süreyi %74 artırdı
  • Housing.com %38 daha fazla dönüşüm, %10 daha uzun ortalama oturum, %40 daha düşük hemen çıkma oranı ve genel olarak %30 daha hızlı sayfa yükleme süresi elde etti
  • Wego , reklam TO'sunu üç katına çıkardı ve toplamda %26 daha fazla ziyaretçi ve %95 daha fazla dönüşüm elde etti. iOS'ta, dönüşümde %50'lik etkileyici bir artış ve oturum süresinde %35'lik bir artış elde ettiler
  • Treebo , dönüşümlerde yıldan yıla 4 kat artış gördü. Tekrar eden kullanıcılar 3 kat daha fazla dönüştürülür.
  • Tinder , yükleme sürelerini 11,91 saniyeden 4,69 saniyeye indirdi ve yerel uygulamalarından %90 daha küçük bir PWA ile tüm alanlarda etkileşimi gördü

Tüm bu şaşırtıcı sonuçlar nasıl mümkün olabilir? Çoğu, PWA'ların çok daha iyi bir kullanıcı deneyimi sağladığı gerçeğine dayanıyor ve bundan harika iş sonuçları çıkıyor.

Gerçi bundan daha fazlası var. En önemli olan hızdan başlayarak, ilerici web uygulaması avantajlarından bazılarına daha ayrıntılı bir göz atalım.

PWA'lar Yıldırım Hızındadır

Modern tüketiciler anında yükleme bekliyor. Bir şey bir kalp atışında yüklenmezse, çoğu kişi ilgisini kaybeder, belki de kalıcı olarak. Bu hem kendi kendini açıklayıcı hem de tonlarca veriyle destekleniyor:

  • Kullanıcıların neredeyse %50'si, mobil cihazlarda en büyük hayal kırıklığının yavaş sayfaların yüklenmesini beklemek olduğunu söylüyor (kaynak)
  • 2 saniye içinde yüklenen sayfaların hemen çıkma oranı %9, 5 saniye süren sayfaların hemen çıkma oranı %38 (kaynak)
  • "Dönüşüm oranında keskin bir düşüş", ortalama yükleme sürelerinin 1'den 4 saniyeye yükselmesiyle ilişkilidir (kaynak)
  • Yükleme süresindeki her 1 saniyede bir iyileştirme, dönüşüm oranını %2 artırırken, 100 milisaniyelik bir iyileştirme, %1'e kadar daha fazla gelir artışı sağlar (kaynak)

Esasen siteniz ne kadar hızlı yüklenirse o kadar iyidir. Müşterilerinizi/okuyucularınızı/kullanıcılarınızı bekletirseniz, bunların iyi bir yüzdesi geri dönecek ve size paralarını vermeyecektir.

Site hızının iyileştirilmesi, her alanda daha iyi sonuçlar alınmasını sağlar. Hepsi bu kadar.

Peki bir PWA bunu başarmanıza nasıl yardımcı olabilir? Aşamalı web uygulamaları hızlıdır. Çok hızlı.

Örneğin Pinterest, “etkileşimli olma süresini” 23 saniyeden sadece 5,6 saniyeye indirmeyi başardı. Bu, yavaş bir 3G bağlantısı üzerinden ortalama Android donanımıydı. Bunun, temel metrikler üzerinde hoş bir zincirleme etkisi oldu.

eski mobil web'i yeni mobil web ile karşılaştırma
Kaynak

Hiç de fena değil. Pinterest'in sonuçları hiç de sıra dışı değil.

Akış platformu ZEE5, bir PWA oluşturarak site hızını üç katına çıkardı ve ara belleğe alma süresini yarıya indirdi. Uber'in PWA'sı 2G ağlarında 3 saniyeden daha kısa sürede yüklenir. Forbes, önceki mobil sitesinde 6,5 saniye olan mobil yükleme sürelerini PWA ile sadece 2,5 saniyeye indirdi.

İyi, iyi tasarlanmış ilerici bir web uygulaması oluşturduğunuzda hız iyileştirmeleri garanti edilir.

Aşamalı Web Uygulamaları Neden Bu Kadar Hızlı?

Çok önemli hizmet çalışanları sayesinde PWA'lar çok hızlıdır. Jason Grigsby'nin mükemmel kitabı Progressive Web Apps'te belirttiği gibi:

"Aşamalı web uygulamaları, olağanüstü hızlı bir deneyim sağlamak için hizmet çalışanlarını kullanır. Hizmet çalışanları, geliştiricilerin, tarayıcının yerel önbelleğinde hangi dosyaları depolaması gerektiğini ve tarayıcının önbelleğe alınan dosyalardaki güncellemeleri hangi koşullar altında kontrol etmesi gerektiğini açıkça tanımlamasına olanak tanır. Yerel önbellekte depolanan dosyalara, ağdan alınan dosyalardan çok daha hızlı erişilebilir”

Grigsby bunu açıklamaya devam ediyor:

“Birisi aşamalı bir web uygulamasından yeni bir sayfa istediğinde, o sayfayı oluşturmak için gereken dosyaların çoğu zaten yerel cihazda depolanıyor. Bu, sayfanın neredeyse anında yüklenebileceği anlamına gelir, çünkü tarayıcının indirmesi gereken tek şey o sayfa için gereken artımlı bilgilerdir”

Yerel uygulamaların geleneksel avantajlarından biri, ışık hızında olmalarıdır. Bunu da benzer şekilde başarırlar - uygulamayı çalıştırmak için gerekli tüm dosyalar, yüklediğinizde indirilir ve yalnızca yeni verileri alması gerekir. Hizmet çalışanları, ilerici web uygulamalarının web'e benzer etkileyici bir performans getirmesine izin verir!

PWA'lar Web'de Uygulamaya Benzer Bir UX Sağlar

Daha önce tartıştığımız hız, açıkçası UX'in büyük bir parçası. Yine de başka önemli faktörler var ve PWA'lar burada da yardımcı oluyor.

Yerel mobil uygulamalar, mobil UX için uzun süredir altın standarttı. Hâlâ öyleler (en azından bazı yönlerden), ancak PWA'lar artık hislerinin ve işlevlerinin çoğunu doğrudan tarayıcıdan eşleştirebilir.

Örneğin, PWA'lar şunları yapabilir:

  • Çevrimdışı veya zayıf ağ koşullarında çalışın (bundan sonra daha fazlası)
  • Kullanıcının cihazına yüklenebilir ve yerel bir uygulama gibi bir ana ekran simgesi aracılığıyla erişilebilir
  • Cihazın kilit ekranına push bildirimleri gönderin (maalesef yalnızca Android'de)
  • Yerel bir uygulamayı taklit eden bir gezinme yapısıyla tam ekran, "sürükleyici" bir deneyim sunmak için geliştirilebilir.
  • Yerel bir uygulama gibi animasyonlardan yararlanın
  • Cihazın kamera ve GPS gibi donanımına erişmek için geliştirilebilir

Erken mobil web oldukça kabaydı. Bir masaüstü tarayıcısının eski paradigması, gerçekten uymadığı akıllı telefonlara “cıvatalandı”. Duyarlı tasarım dönemi bunu önemli ölçüde geliştirdi, ancak her zaman bir şeyler eksikti.

Yerel uygulamalar açık bir şekilde akıllı telefonlar için oluşturuldu. Cihazın deneyimini her zaman daha iyi yerine getirdiler. PWA'lar bu çizgiyi bulanıklaştırdı, ancak deneyim açısından ayrımı saptamak zor olabilir.

Örneğin – hiç Instagram Lite, Google Maps Go veya Twitter Lite kullandınız mı?

Bunları Google Play mağazasından indirebilir ve kontrol edebilir ve diğer yerel uygulamalar gibi nasıl hissettiklerini görebilirsiniz.

Bunların, ana yerel uygulamalarının daha hafif, daha yalın sürümleri olduğunu varsaydığınız için affedilirsiniz. Tahmin edebileceğiniz gibi – bunlar ilerici web uygulamalarıdır.

Bu, PWA'ların hepimizin bildiği ve sevdiği yerel uygulama deneyimlerini yeniden yaratma potansiyelini gösteriyor. Biraz sonra örneklere geçtiğimizde ne demek istediğimizi tam olarak anlayacaksınız!

Not: Bu PWA'ların Google Play mağazasında yayında olduğunu fark etmiş olabilirsiniz. Google, Play Store'u 2019'un başlarında PWA'lara açtı! Bu, gerçek anlamda çapraz platform uygulamaları olarak PWA'ların geleceği konusunda ne kadar emin olduklarını gösteriyor. PWA'nızı oraya getirmek için birkaç çemberden atlamanız gerekiyor, ancak bu kesinlikle mümkün. Şu an için Apple'dan bunun iOS App Store'da mümkün olup olmayacağına dair bir bilgi yok.

PWA'lar Güvenilirdir

Hepimiz, titrek bir mobil bağlantıda bir web sitesi veya web uygulaması kullanmaya çalışma deneyimine sahibiz. Bu eğlenceli değil.

Tarayıcının yerel olarak neyi önbelleğe alması gerektiğini özellikle tanımlayan hizmet çalışanları sayesinde, PWA'lar, kullanıcının bağlantısı zayıf olduğunda bile hızlı ve eksiksiz bir deneyim sunmak için oluşturulabilir.

Bu bir adım daha ileri götürülebilir. Tüm uygulamanın ilk ziyarette indirilip depolandığı “ön önbelleğe alma” sayesinde, PWA'lar tamamen çevrimdışı olarak da çalışabilir!

Kırsal kesimde ve yetersiz hizmet verilen bölgelerde hala kaç kişinin yaşadığını ve önümüzdeki birkaç yıl içinde ilk kez çevrimiçi olan milyarlarca kişiyi düşündüğünüzde bu gerçekten önemlidir - bunların çoğu kusursuz bağlantıdan yararlanamayacak.

PWA'lar Güvenli, Verimli ve Uyarlanabilir

Servis çalışanlarının işlerini yapabilmeleri için web sitenizin HTTPS ile tamamen güvenli olması gerekir .

Umarım zaten öyledir, ancak bir PWA oluşturmazsanız, sitenizi %100 güvenli hale getirmek için gerekli tüm işleri yapmaya zorlarsınız.

PWA'lar da çok verimlidir . İnsanları yerel mobil uygulamaları indirmekten alıkoyan önemli bir faktör, cihazlarındaki kullanılabilir depolama alanıdır. The PWA Book'un yazarlarının dediği gibi:

"Kameralar, bilgisayarlar, not defterleri, asistanlar gibi mobil cihazlarına ve - en önemlisi - bir hatıra hazinesi gibi davranıyorlar. Bir uygulamayı indirmek, değerli fotoğrafları veya mesajları feda etmeleri gerektiği anlamına geliyorsa, evet'i tıklatmadan önce üç kez düşünürler."

PWA'lar insanları bu kadar zor kararlar almaya zorlamaz. Yerel uygulamalardan çok daha hafiftirler ve yükleme işlemi daha az sürtünmeye sahiptir (bir düğmeye tek dokunuş ve ana ekranda bir kısayol oluşturulur). PWA, cihazda biraz yer kaplıyor, ancak buna kıyasla ihmal edilebilir.

twitter yerel uygulaması vs pwa

Bu verimliliği sağlayan hizmet çalışanları, sunucu yükünü azaltmaktan ve yoğun dönemlerde performans düşüklüğü ve çökme riskini en aza indirmekten de sorumludur.

Aşamalı web uygulamaları da çok uyarlanabilir. Web tabanlı olduklarından, yerel mobil uygulamalardan daha kolay bakım ve güncelleme yapılabilir.

Hızlı hareket edebileceğiniz bir şeyi değiştirmek veya güncellemek istediğinizde, App Store ağ bekçileriyle uğraşmanıza, kullanıcının manuel olarak güncelleme yapmasını istemenize veya uzmanlaşmış yerel uygulama geliştiricileriyle sözleşme yapmanıza gerek yoktur.

Sitenizi güncellemek bugün olduğu kadar kolaydır ve güncellemeler (bir sunucuya dağıtılır) neredeyse anında kullanıcıya sunulur.

PWA'lar, Kullanıcıları Anında Bildirimlerle Etkileşime Geçmenize olanak tanır

Push bildirimlerinin gücünden yıllardır bahsediyoruz. Kitlenizle mobil cihazlarda etkileşim kurmanın ve iletişim kurmanın en iyi yoludur - hiçbiri yoktur. Bunları kullanıcıları güncellemek, uygulamalara geri yönlendirmek, teklifleri ve ürünleri tanıtmak ve yoğun yaşamlarında genellikle akıllarında kalmak için kullanabilirsiniz.

Aşağıda, farklı işletmelerin anında iletme bildirimlerini nasıl kullanabileceğine ilişkin bazı örnekler verilmiştir:

  • Haber Yayıncıları

"Son Dakika Haberi, X ve Y az önce oldu!"

Anında iletme bildirimleri, dijital yayıncılar için harika çalışır ve trafiği en iyi haberlerine geri çekmelerine ve zamana duyarlı son dakika haberleri ile kullanıcıları uyarmalarına olanak tanır.

  • e-Ticaret Mağazaları

“Özel teklif / sepetinizi terk ettiniz / ürünleriniz gönderildi”

Push, e-ticaret için harika çalışıyor. Alışveriş uygulamaları, kullanıcıları teklifler ve yeni ürünler konusunda uyarmak, teslimat süreciyle ilgili güncel bilgileri tutmak ve yalnızca uygulamaya özel özel kupon kodları göndermek için düzenli olarak bildirimler gönderir.

  • Sosyal Platformlar ve Topluluklar

"Arkadaşın sana bir mesaj/arkadaşlık isteği gönderdi/cevap verdi"

Hepimiz muhtemelen daha önce sosyal platformlardan gelen push mesajları yaşamışızdır. Sosyal uygulamaların sizi platformlarına geri döndürmek, diğer kullanıcılarla etkileşim kurmak ve etkileşim kurmak için kullandığı gizli içeriktir.

Bunlar kullanım durumlarından birkaçı. Ancak gerçekten push bildirimleri, herhangi bir işletme için büyük bir destek olabilir. Yerel uygulamalar oluşturmanın en güçlü nedenlerinden biriydiler (ve hala da öyleler).

Arkadaş hizmeti çalışanlarımıza tekrar teşekkürler - push bildirimleri göndermek için artık yerel uygulamalara ihtiyacınız yok. Bunları web sitenizden gönderebilirsiniz (PWA'ya dönüştürürseniz).

Anında iletme bildirimlerinin uygun şekilde kullanılması ve kötüye kullanılmaması gerekir, ancak birçok fayda sağlayabilirler ve bir PWA oluşturmanın büyük yararlarıdır.

Örneğin, bir PWA oluşturduktan sonra Lancome, bir push bildirimine dokunan tüketicilerin %8'inin bir satın alma işlemi gerçekleştirdiğini ve push bildirimleri aracılığıyla kurtarılan sepetlerdeki dönüşüm oranlarını %12 oranında iyileştirdiğini gördü.

Bir diğeri ise Suudi Arabistan'ın önde gelen elektronik perakendecisi eXtra Electronics. eXtra, web push yoluyla gelen kullanıcılardan %100 daha fazla satış yaptı ve push bildirimlerini seçenlerin 4 kat daha sık geri döndüklerini ve sitede 2 kat daha fazla zaman harcadıklarını fark etti. Baş İş Geliştirme Sorumlusu Mujeed Hazzaa şunları söyledi:

“Push Bildirimleri, mobil etkileşim stratejimizin büyük bir parçası. Müşterilerimizle iletişim kurmanın daha kişisel bir yolu. Bu bizim alt çizgimiz için inanılmaz derecede değerli.”

Sitenizi aşamalı bir web uygulamasına dönüştürdüğünüzde, işletmeniz için de güçlü sonuçlar elde edebilirsiniz. Büyük bir uyarı var – bunları yalnızca Android'de kullanabilirsiniz. iOS onları desteklemiyor ve destekleyip desteklemeyeceği kimsenin tahmininde değil. Anında iletme bildirimleri sizin için önemliyse ve bunları tüm kullanıcılara göndermek istiyorsanız, yerel mobil uygulamalar oluşturmanız gerekir.

Aşamalı Web Uygulamaları İşinizi Büyütecek

Sitenizi aşamalı bir web uygulamasına dönüştürmenin en önemli avantajlarından bazılarını inceledik.

Sonuç olarak, bir web sitesine sahip herhangi bir işletme için tamamen mantıklı olmalarıdır. Tüm web UX'inizi yükseltmenize olanak tanır ve temel ölçümleri geliştirmesi neredeyse garanti olan hızlı, modern bir deneyim sunar.

PWA oluşturmanın dezavantajları nelerdir?

Gerçekten hiçbiri, bir tane inşa etmek için yatırım yapmanız gereken zaman ve para dışında. Buna rağmen, bir PWA nispeten uygun maliyetlidir ve zaman içinde kendi maliyetini (daha fazla) karşılaması çok muhtemeldir - özellikle siteniz reklam, e-ticaret veya üyelikler yoluyla herhangi bir gelire bağlıysa.

Hala ikna etmeye mi ihtiyacınız var?

Her şeyi birkaç örnekle birleştirelim. İnternetteki en iyi 50 ilerici web uygulaması örneğini vurgulayacağız ve şimdiye kadar tartıştıklarımızı ilk elden size göstereceğiz.

Aşamalı Web Uygulaması Örnekleri: 2020'de İnternetteki En İyi 50 PWA

Etkileyici bir PWA geliştirmek istiyorsanız, ilk adım ilham almak için başarılı ilerici web uygulaması örneklerine bakmaktır.

Size ilham verme misyonumuzun bir parçası olarak, şu anda piyasadaki en iyi PWA'ların 50 model örneğini topladık. Kendi işinizle en alakalı bölüme atlayabilir, gözünüze çarpana kadar listeyi gözden geçirebilir veya iyi bir genel bakış elde etmek için tüm ilerici web uygulaması örneklerini okuyabilirsiniz!

En iyi 50 PWA örneğimize geçelim.

e-Ticaret ve Perakende

Starbucks

starbucks uygulaması

Dünyanın en popüler kahve zincirlerinden biri için Starbucks, sadakat programları ve daha kolay bir sipariş süreci sunarak müşteri katılımını artırmak için PWA'sını geliştirdi.

Uygulama, cihaz ne olursa olsun etkileşimini daha iyi tutmak için eski mobil uygulamasının yerini alacak şekilde tasarlandı.

Kullanıcılar, öncelikle müşterilerin akıllı telefonlarından sipariş verirken ücretsiz yiyecek ve içeceklerini, doğum günü ikramlarını, yedeklerini ve ödeme seçeneklerini kullanabilecekleri Ödüller bölümünü görüntüleyebilir.

Uygulama sayfasının geri kalanında özel siparişler, mağaza kullanılabilirliği, teslimat ayrıntıları ve uygulama menüsü bulunur.

Ve tıpkı bir baristadan sipariş vermek gibi, en sevdiğiniz içeceği sipariş etmek de içeceğin boyutunu, eklentilerini ve atış seçeneklerini özelleştirmenize olanak tanır. Starbucks ayrıca diyetlerini izleyenler için Beslenme Bilgileri, Malzemeler ve Alerjenler bölümleri de ekler.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Zayıf ağ bağlantılarında bile iyi çalışır
  • Spotify, Lyft ve Ford gibi diğer markaların diğer platformları ve hizmetleriyle tamamen entegre
  • Sorunsuz mobil ödeme ve ödeme süreçleri
  • Son derece kullanıcı dostu tasarım

Jumia

jumia uygulaması

Çin için Alibaba ne ise, Afrika için Jumia odur. Bu başarılı çevrimiçi pazar yeri ilk olarak 2012'de Nijerya'da başlatıldı ve o zamandan beri Afrika'nın e-ticaret endüstrisini hızla devraldı.

2016 yılında, Sahra altı bölgesindeki istikrarsız internet bağlantılarına yanıt olarak PWA'sını başlattı. PWA ile, veri sınırları olan 2G ağlarına güvenerek pazarın önemli bir bölümünü ele geçirmeyi başardı.

PWA'yı tanıtmak, büyük veri bant genişliği tüketmeden uygulama benzeri bir kullanıcı deneyimi sunmak için mükemmel bir çözümdü.

Sonuç? Google'a göre şirket, dönüşüm oranını %33 artırdı ve kullanıcılarını (yerel uygulamalara kıyasla) 12 kat daha fazla büyüttü. Ayrıca, hemen çıkma oranını ve kullanıcı cihazı depolama gereksinimlerini büyük ölçüde azalttı.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Güvenilir çevrimdışı erişim
  • Hızlı arama özelliği
  • Hızlı yükleme işlemi
  • Kolay kurulum

OLX.in

olx uygulaması

Çevrimiçi pazar için PWA söz konusu olduğunda, Hintli sınıflandırılmış reklam şirketi OLX.in'e güvenin. Mülklerden modaya uzanan güçlü kategorileri ile satıcılar ve alıcılar, şirketin PWA'sı ile daha iyi eşleşir.

Kullanıcılar, belirli ürünleri aradıklarında veya satıcılardan harika fırsatlar elde ettiklerinde uygulamayı kullanmanın kolaylığını kolayca fark edebilirler.

OLX, Google tarafından bildirildiği üzere PWA'ya geçişinden bu yana reklamlarında daha yüksek TO ve hemen çıkma oranlarında %80'lik büyük bir düşüş yaşadığını açıkladı.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Çevrimdışı modda bile bildirimleri itin
  • Satıcılar için geliştirilmiş kolay kamera entegrasyonu özelliği
  • Arama geçmişi özelliği

Flipkart

flipkart uygulaması

Hindistan e-ticaret sahnesindeki bir diğer rakip de Flipkart, PWA ile çevrimiçi alışveriş deneyimini yeniden tanımlamaya devam ediyor.

Kullanıcılar uygulamada aşağı doğru ilerledikçe, müşteriyi uygulamaya göz atmak ve uygulamada daha fazla zaman harcamak amacıyla ürün kategorileri, sınırlı teklifler, en çok satanlar ve indirimler sunulur.

Flipkart'ın PWA'sı 2015 yılında Flipkart Lite aracılığıyla başladı. Şirket, çoğu bölgede internet bağlantıları kesintili olsa bile alışverişi Hintliler arasında daha erişilebilir hale getirmek istedi.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • En son haberler ve güncellemeler için anında iletme bildirimleri tutarlıdır
  • Çevrimiçi satın alma süreci kolaylaştırıldı
  • Arama özelliği doğru

Saf Formüller

saf formüller uygulaması

Sağlık takviyeleri pazarının her zamankinden daha rekabetçi hale geldiğini fark eden ABD merkezli Pure Formulas, kendi PWA'sını piyasaya sürme konusunda bu sektörde öncü olarak kabul ediliyor.

Yavaş bir ödeme süreci nedeniyle web sitesinin ve mobil uygulamasının çok yüksek hemen çıkma oranlarından muzdarip olduğunu keşfettikten sonra şirket, onlara tam bir geri dönüş sağlayan bir PWA geliştirdi.

Daha yüksek dönüşümler ve ortalama sipariş değerinde (AOV) artış bildirdi.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Çok uygun ödeme işlemi
  • Minimalist tasarım
  • Çok hafif cihaz depolama gereksinimi
  • Yüksek güvenlikli işlemler

AliExpress

aliexpress uygulaması

Son derece duyarlı bir PWA ile Ali Express, B2C işlemleri için bugün en çok talep gören uygulamalardan biri olarak kabul ediliyor.

Şirketin geniş ürün kategorileri kapsamı sayesinde kullanıcılar, PWA'yı kullanarak sayfa yüklemeyi yavaşlatmadan binlerce seçeneğe göz atabilir.

AliExpress, piyasaya sürülmesinden bu yana, PWA sayesinde daha iyi yeniden etkileşimler ve dönüşüm istatistikleri elde ettiğini duyurdu.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Kolay ürün navigasyonu
  • Daha hızlı yükleme süresi
  • Kullanıcı dostu düzen

Alibaba

alibaba uygulaması

Jack Ma'nın Alibaba Grubu, Alibaba PWA'sının başarısı söz konusu olduğunda daha fazla tanıtıma ihtiyaç duymaz. B2B e-Ticaret uygulaması, herhangi bir PWA için ideal bir modeldir: hızlı, duyarlı, hafif ve çok ilgi çekici.

Alibaba, mobil web ve mobil uygulama lansmanlarında başarılı oldu. Bununla birlikte, geliştirilmiş etkileşim yoluyla pazarın büyük bir bölümünü ele geçirmesi gerekiyordu. Ve şirketin PWA'sı bunun için mükemmel bir çözümdü.

Google'a göre toplam dönüşümlerde %76'lık bir artış bildirdi.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Kolay ürün navigasyonu
  • Feeds, Messenger ve My Alibaba hesabı gibi web sitesinin araçlarıyla entegrasyon
  • Daha hızlı yükleme süresi

Hedef

hedef uygulama

Amerika'nın sekizinci en büyük perakende zinciri olan Target, rakipleri tarafından geride kalmamak için müşteri analitiği çalışmasına göre hızla harekete geçti. 2015 yılında müşterilerinin yolculuğuna mobil cihazlarından başladıklarını ve ardından bilgisayarlarını kullanarak satın alma işlemini gerçekleştirdiklerini keşfetti.

Yönetim, bir PWA'yı tanıtmayı düşündü ve o zamandan beri, uygulama kullanıcıları çok sayıda arttı ve çevrimiçi işlemler, kullanıcıları farklı cihazlarda yabancılaştırmadan önemli ölçüde iyileşti.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Kolay sepete ekleme seçeneği
  • Boyutundan bağımsız olarak hızlı yüklenen görüntüler

Walmart

walmart uygulaması

Sorunsuz bir uygulama deneyimi için Walmart'ın PWA'sı, bir uygulama geliştiricisinin uzun kontrol listesine ulaştı. Binlerce ürün teklifiyle perakende devi, her işlem için çevrimiçi satın alımları ve teslim alma/teslimat seçeneklerini entegre edebilmektedir.

Coğrafi izleme özelliği, kullanıcının alanındaki en çok satan ürünleri izleyerek uygulamanın böyle bir listeye dayalı öneriler sunmasını sağlar.

Son olarak, push bildirimlerinin etkin kullanımı, şirketin sadık hayran kitlesini muhteşem fırsatlar ve yeni keşiflerle tanıştırmasına olanak tanır.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Geri bildirim bölümü
  • Coğrafi izleme özelliği
  • Çok duyarlı arayüz
  • Kararsız ağda kusursuz performans

Macy'nin

macys uygulaması

Üst düzey perakende markası Macy's, PWA'sını piyasaya sürdüğünde aklında bir hedef vardı: milyonlarca aylık ziyaretçisi için en iyi deneyimi sağlamak.

Uygulama kullanıcılarının büyümesini tanıyan şirketin PWA'sı, alışveriş yapanların mağaza raflarındaki yeniliklerden haberdar olmalarını sağlamak için tüketici araçlarına hoş bir ek oldu.

Bu e-Ticaret PWA'sının beğendiklerimiz:

  • Güvenilir mağaza bulma aracı
  • Organize ürün düzeni

Lancome

lancome uygulaması

Fransız lüks kozmetik markası Lancome, çevrimiçi satışlarında bir engelle karşılaştı: mobil kullanıcılar arttı ancak dönüşümler düşüyordu.

Şirket, sorunu anlamak için müşteri davranışlarını inceledi ve mobil uygulamada korkunç bir kullanıcı deneyimi yaşadıklarını öğrendi.

Marka, yükleme süresini azaltmak ve uygulamayı yüksek düzeyde erişilebilir kılmak için PWA'ya geçti. Google'a göre, anında iletme bildirimleri dönüşümlerde %12'ye katkıda bulundu ve mobil oturumlar %51'e yükseldi.

What we like about this eCommerce PWA:

  • Fast search results
  • Easy navigation

News

Financial Times

ft.com app

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

  • Reliable offline
  • Very fast loading time
  • Real-time updates on content
  • Seamless video content experience

Infobae

infobae app

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

  • Very fast loading time
  • High-quality visuals loading seamlessly
  • Easy navigation

Nau.ch

nau.ch app

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

  • Impressive user interface
  • Easy navigation
  • Content loads much faster relative to other news-related PWAs

Nikkei

nikkei app

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

  • Prefetch feature (instant page navigation)
  • Preloaded key requests
  • Optimized JavaScript bundles
  • Optimized images
  • Enabled HTTP caching

The Washington Post

the washington post app

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

  • Fast loading time
  • Real-time live updates
  • Same look and feel as the website

Orta

medium.com app

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

  • duyarlı
  • Seamless functionality even on an unstable connection

Wired

wired.com app

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

  • Fast loading time
  • Highly responsive
  • Reliable background caching

Forbes

forbes app

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

  • Stunning visual content
  • Fast loading times
  • Unique number of readers infographic

The Guardian

the guardian app

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

  • Customizable sections
  • News alert feature
  • Offline access

Sports Mole

sports mole app

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

  • Search functionality
  • Seamless video playback
  • Real-time updates
  • No lag on page transitions

The Weather Channel

weather.com app

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

  • Search functionality
  • Multiple language availability
  • Push notifications

MyNet

mynet app

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

  • Gerçek zamanlı güncellemeler
  • Arama işlevi

dizin

Kopa

kopa uygulaması

Eskiden PadPiper olarak bilinen Kopa, mobilyalı daireler ve kiracılar için bir pazar yeridir. Hem kiracılar hem de kiralık ev sahipleri için doğrulama sunar, bu nedenle onları eşleştirmek daha güvenlidir.

PadPiper, öğrencilerin okul yılı boyunca veya stajlarına başladıklarında uygun konut bulmalarına yardımcı olmak için ilk olarak PWA'sını başlattı. Ayrıca, daha kolay oda arkadaşı eşleşmeleri için öğrencileri birbirine bağlama ve yanlarında kimin çalıştığını bulma fırsatından yararlanmayı da düşündü.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Hızlı arama sonuçları
  • Kiralık barındırma özellikleri
  • Minimalist tasarım

kira

rentjo uygulaması

Bu kamera ve beyaz eşya kiralama pazarı, bu tür ürünlere geçici olarak ihtiyaç duyanlar için bir çözümdür.

Kullanıcılar çevrimiçi olarak sipariş verir ve ürünün aynı gün içinde gönderilmesini bekler. Kiralama süresi sona erdikten sonra, kullanıcının ürünü iade etmesi veya satın almayı seçmesi gerekecektir.

Rentio'nun PWA'sı (Japonca veya İngilizce), gezinmesi kolay arayüz, hızlı arama sonuçları, bol kategori ve hızlı yanıt süresi sunar.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Arama yetenekleri
  • Hızlı işlem süreci
  • Kullanışlı navigasyon

neşeli

neşeli uygulama

Bir geliştirici işe alım platformu olarak Joppy, yetenek avında olan şirketlere ve teknik iş fırsatları için en iyi başvuru sahiplerinden bazılarına hizmet vermektedir.

Bu platform, başvuranların tercihlerini işe alım görevlileri tarafından belirlenen gereksinimlerle eşleştirmeye odaklanır. Ancak diğer çevrimiçi iş kurullarından farklı olarak, iş arayanlar profillerini anonim olarak ayarlayabilirler, böylece kimse istenmeyen tekliflerle onları rahatsız edemez.

Joppy'nin PWA'sı, başvuru sürecini daha akıcı hale getirmek için hem işe alım görevlisi hem de başvuru sahibi (çoğunlukla Barselona'da bulunan) için açıkça tasarlanmıştır.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Hızlı tepki süresi
  • Hızlı eşleştirme süreci

AçıkKira

açık kira uygulaması

Birleşik Krallık kiralık emlak piyasası aramak, doğru çevrimiçi araç olmadan başınızı ağrıtabilir. OpenRent'in PWA'sı ile kiracılar ve ev sahipleri, uygun mülkler söz konusu olduğunda uygun olanı rahatlıkla arayabilirler.

PWA, hızlı yanıt ve gerçek zamanlı güncellemeler sağlar. Bu, site için çok önemlidir, çünkü OpenRent, potansiyel kiracıları hayal kırıklığına uğratan hayalet reklamlardan kaçınmak için izin verilir verilmez listeleri kaldırır.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Sonuç filtreleme özelliği
  • Kolay özellik ekleme
  • Hızlı tepki süresi

Araba satışları

PWA'daki bir çevrimiçi otomobil pazarı için, Avustralya'daki otomobil alıcılarının en popüler destinasyonlarından biri olan Carsales, kullanıcılarına birçok kolaylık sunuyor.

Alıcılar kasa tipi, marka, fiyat, özel tekliflere göre araba arayabilirler. Satıcılar ise arabalarının değerlendirilmesini isteyebilir ve gerisini Carsales halleder.

PWA ayrıca, otomobilinizin bakımıyla ilgili incelemeler, öneriler ve tavsiyeler aracılığıyla uzman ipuçları sunar.

Bu dizinde sevdiğimiz şey PWA :

  • Mobil öncelikli harika deneyim
  • Her ekran boyutuna duyarlı
  • Kolay çevrimdışı deneyim

carigami

carigami uygulaması

Carigami, tedarikçileri ve kiracıları birbirine bağlayan bir Fransız otomobil perakende brokeridir. PWA, kullanıcının şehir, sürücü yaşı, tarih ve saat gibi arama tercihlerine göre otomobillerin güvenilir fiyat karşılaştırmalarını sağlar.

Uygulama, her bir araç kiralama işleminin tüm ayrıntılarıyla birlikte saniyeler içinde arama sonuçlarını döndürür.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Hızlı yükleme süresi
  • Doğru arama sonuçları
  • Arama filtreleri

Parlaklık

parlaklık.com uygulaması

Shine, 2008'de kurulan Hindistan'ın en iyi ikinci iş portalıdır. Adayları çeşitli sektörlerden 15.000'den fazla şirketle eşleştirir.

PWA'sı bir iş eşleştirme sitesi için en iyilerden biridir. Örneğin, belirli işleri aramak becerilere, göreve, departmana, sektöre, konuma ve eğitime göre kolayca filtrelenebilir.

İş uyarıları da sorunsuz bir şekilde kullanıcının cihazına iletilir.

Bu PWA dizini hakkında sevdiğimiz şey:

  • Push bildirimleri
  • Tamamen erişilebilir
  • Özel çevrimdışı sayfa

Sosyal veya Topluluk

Tinder

tinder uygulaması

Tinder flört sahnesi pazarını alt üst ettiğinde, birçok kullanıcı çöpçatanlığa yenilikçi yaklaşımı nedeniyle uygulamaya bayıldı.

2017 yılında şirket, üç aylık geliştirme sürecinin ardından kendi PWA'sına yatırım yaptı. Faydaları anında gözlemlendi. İlk olarak, yerel uygulamasında 30 MB olan veri yatırımını PWA'da yalnızca 2,8 MB'a düşürmeyi başardı.

Ayrıca, daha hızlı sayfa yükleme ve kullanıcılar tarafından daha iyi etkileşim (kaydırma, mesajlaşma, satın alma ve oturum harcama açısından) bildirdi.

Bu sosyal PWA hakkında sevdiğimiz şeyler:

  • Push bildirimleri
  • Kullanım kolaylığı
  • Optimize edilmiş performans (rota tabanlı kod bölme)

Pinterest

ilgi alanı uygulaması

Popüler görsel paylaşım ve sosyal medya platformu Pinterest, uluslararası kullanıcı tabanını genişletmek için üç ay boyunca bir PWA kurdu. Google'a göre 650 KB olan eski mobil sitesine kıyasla PWA'nın 150 KB boyutu kullanıcılarını etkilemeye yetiyordu.

Pinterest aboneleri, önceki mobil uygulamada önceki 23 saniyeye kıyasla artık kullanıcı arayüzünün kullanılabilir olması için yalnızca 5,6 saniye bekleyebilir.

PWA'ya geçişin ilk sonuçları umut vericiydi: Uygulamada harcanan sürede %40'tan fazla artış, kullanıcı tarafından oluşturulan reklamlar %44, reklam tıklamaları %50 ve temel etkileşimler %60 arttı.

Bu sosyal PWA hakkında sevdiğimiz şeyler:

  • Push bildirimleri
  • Düşük bant genişliği kullanımı
  • Etkileyici çevrimdışı destek

Telgraf

telgraf uygulaması

Telegram, farklı cihazlarla uyumlu bulut tabanlı bir araç sağlayarak 2013 yılında anlık mesajlaşma hizmetini bozdu.

Bu yazı itibariyle, aylık 400 milyondan fazla aktif kullanıcı, metin mesajları, fotoğraflar, videolar ve ses dosyaları alışverişinde bulunmak için bu platformlar arası güvenli hizmete güveniyor.

PWA, yerel mobil uygulamasıyla aynı işlevselliği (ancak daha hafif bir boyutta) sağlamak üzere piyasaya sürüldüğünde, şirket, kullanıcı başına oturum sayısında ve elde tutma süresinde %50'lik bir artış bildirdi.

Bu sosyal PWA hakkında sevdiğimiz şeyler:

  • iOS ve Android'e yüklenebilir
  • Çevrimdışı destek
  • Belirgin

heyecan

twitter uygulaması

Başlatılan en eski PWA'lardan biri, 2017'de Twitter Lite PWA ile Twitter'dan geldi. Uygulama geliştiricileri daha sonra bunu web ve yerel uygulama özelliklerini mobil için daha ideal bir uygulamaya entegre etmek için bir model olarak kullandı.

Google'a göre, PWA'nın amacı, hesaplarını her gün ortalama dört kez kontrol eden 250.000 günlük kullanıcısının yeniden etkileşimini iyileştirmekti.

Şirket, veri tüketimini azaltarak, anında yüklemeyi (3G ağı üzerinden 5 saniye) iyileştirerek ve kullanıcı etkileşimini geliştirerek, oturum başına sayfa görüntülemelerinde %65, gönderilen Tweetlerde %75 artış ve hemen çıkma oranında %20 düşüş bildirdi. .

Bu sosyal PWA hakkında sevdiğimiz şeyler:

  • Tarayıcı için optimize edilmiş (rota tabanlı kod bölme)
  • Daha az bant genişliği kullanımı
  • Hızlı güncellemeler

Instagram

instagram uygulaması

Instagram, Twitter'ın PWA'nın uygulaması yayınlanır yayınlanmaz bir PWA sunma stratejisini izledi. 2020'nin başlarında Instagram, Windows 10 uygulamasını doğrudan mesajlaşma ile eksiksiz bir PWA olacak şekilde güncelledi.

Yerel uygulaması pazarlanmaya devam ederken, bir cihazın mobil tarayıcısındaki site aynı işlevselliği ve kullanıcı deneyimini sunar. Kullanıcılar, uzun zamandır sahip oldukları özelliklerin aynısını masaüstü ve mobil uygulamadan elde eder.

Bu sosyal PWA hakkında sevdiğimiz şeyler:

  • Push bildirimleri
  • Anında yükleme süresi
  • Hızlı cevap

Seyahat ve Rezervasyon

Airbnb

airbnb uygulaması

Airbnb, dünya çapında kiralama ve turistik deneyimler için uygun düzenlemeler sunan çevrimiçi bir platformdur. 2008 yılında şirket, ekstra odalarını kiralamak isteyen ev sahiplerini uygun fiyatlı konaklama arayan gezginlerle buluşturmaya başladı.

On yıl sonra, PWA, Windows 10 mobile'da Edge ile iyi çalışacak şekilde yükseltildi. Sonuç, müşteriler için daha sorunsuz bir anlık sayfa geçişidir. Bugüne kadar Airbnb'de, çoğunluğu kendi uygulamasında olmak üzere aylık 80 milyondan fazla ziyaretçi var.

Bu PWA hakkında sevdiğimiz şey:

  • Push bildirimleri
  • Hızlı cevap
  • Saniyeler içinde yüklenen yüksek kaliteli görüntüler

ağaç

ağaç uygulaması

Online rezervasyon endüstrisindeki bir diğer lider, bir otel rezervasyon platformu olan Treebo'dur. Hindistan'da 165'ten fazla şehirde konaklama seçeneği sunan kullanıcılar, en iyi fırsatlar için seçenekleri karşılaştırabilir.

Google'a göre, PWA'sı 3G ağı üzerinden sadece dört saniyede yükleniyor. Site ayrıca beş kat daha fazla tıklama elde ettiğini ve dönüşüm oranını üç kat artırdığını bildiriyor.

Bu PWA hakkında sevdiğimiz şey:

  • Sunucu tarafı oluşturma
  • Hızlı etkileşim süresi
  • Aşamalı oluşturma (HTML akışı)

Biz gideriz

wego uygulaması

Asya Pasifik ve Orta Doğu bölgelerinde seyahatle ilgili en büyük site olarak adlandırılan Wego, PWA'sını tasarlarken tüketicilerinin davranışlarını göz önünde bulundurmuştur.

Çoğu gezgin fotoğraf kaydetmek için telefonlarına güvendiğinden, depolama alanı kolayca tükenebilir. Ayrıca, farklı yerlere seyahat etmek, yavaş ve kararsız internet bağlantılarıyla sinir bozucu olabilir.

Kullanıcılarına otel odası ve uçuş rezervasyonu yapma rahatlığını sağlamak için bir PWA inşa edildi. Wego, Google'a göre sayfa yükleme süresini 12 saniyeden üç saniyenin biraz altına indirdiğini duyurdu.

Bu PWA hakkında sevdiğimiz şey:

  • Son derece hızlı yanıt
  • Minimalist tasarım
  • Doğru arama sonuçları
  • Hafif

MakeMyTrip

makemytrip uygulaması

Hindistan'ın önde gelen çevrimiçi seyahat acentelerinden biri olan MakeMyTrip, aylık 8 milyon ziyaretçisine daha iyi hizmet verebilmek için PWA çoğunluğuna katıldı.

Yerel uygulamasında başarı elde ettikten sonra şirket, düşük kaliteli akıllı telefonlarda veri sınırları olan ülkede sınırlı bağlantının, kullanıcı erişimini çok sinir bozucu hale getirebileceğini öğrendi.

Ayrıca, ziyaretçilerin web sitelerinde yerel uygulamalarından daha fazla zaman harcadıklarını fark etti. Aynı deneyimi tekrarlamak bu nedenle cep telefonu kullanıcıları için çok önemlidir.

Sonuç, Google'a göre müşteri oturumlarında %160 gibi büyük bir artış ve hemen çıkma oranında %20'lik bir düşüş. Ayrıca, ilk kez alışveriş yapanların, yerel uygulamayı daha önce kullananlara göre üç kat daha fazla dönüşüm sağlama olasılığı daha yüksekti.

Bu PWA hakkında sevdiğimiz şey:

  • Kolay gezinme
  • Herhangi bir işletim sistemine kurulabilir
  • Hızlı yükleme süresi

Seyahat başlangıcı

travelstart uygulaması

Çevrimiçi pazarının başarısından yararlanan Jumia, Jumia Travel ile seyahat endüstrisine giriş yaptı. Google'a göre PWA, trafiği on iki kat ve dönüşüm oranlarını %33 artırmada etkili oldu.

Jumia Travel daha sonra seyahat endüstrisindeki en büyük platformlardan birini oluşturmak için 2019 yılında Travelstart tarafından satın alındı. Jumia Travel'ın mobil kullanıcıları, uçuş, otel konaklama ve kiralık araba rezervasyonu yapabilecekleri PWA'da bile Travelstart'a yönlendirilir.

Bu PWA hakkında sevdiğimiz şey:

  • Hızlı yükleme süresi
  • Basit arayüz

trivago

trivago uygulaması

Ayda 120 milyon ziyaretçisini ağırlamak için Alman teknoloji şirketi Trivago, daha fazla kullanıcının seyahate çıkmadan önce otel fiyatlarını aramasına ve karşılaştırmasına yardımcı olmak için PWA'sını başlattı.

Yaklaşık 200 rezervasyon sitesini kapsayan uygulama, fiyat karşılaştırmaları oluşturma açısından hızlı çalışıyor. Kullanıcılar ayrıca zamandan ve bant genişliğinden tasarruf etmek için Trivago haritasını, gerçek otel incelemelerini kullanabilir ve önceki aramalara başvurabilir.

Google'ın raporuna göre, 55 ülkeden yarım milyondan fazla kullanıcı tarafından ana ekranlarına eklenen PWA, etkileşimde %150 ve otel fırsatlarına yapılan tıklamalarda %97'lik bir artışla sonuçlandı.

Bu PWA hakkında sevdiğimiz şey:

  • Android ve iOS'a yüklenebilir
  • Mükemmel çevrimdışı destek
  • Hızlı cevap
  • Arama filtreleri
  • Çoklu dil desteği

Uber

uber uygulaması

Uber'in PWA'sı, günümüzün en benzersiz şekilde tasarlanmış uygulamalarından biridir. Araç çağırma şirketi, Windows 10 uygulamasını 2018'de perde arkasına, ilk olarak Temmuz 2019'da piyasaya sürülen PWA'nın lehine yerleştirdi.

Yerel mobil uygulamasıyla karşılaştırıldığında, Uber'in PWA'sı yalnızca 50 KB depolama alanı kaplar. Çok hızlı yüklenir, bu da ağın zayıf olduğu bir alanda sıkışıp kaldığınızda çok kullanışlı olmasını sağlar.

Uber, kişinin konumuna bağlı olarak, kişinin mobil cihazına bir dokunuşla araç çağırma hizmetleri, yemek teslimatı, bisiklet ve scooter kiralama ve hava yolculuğu paylaşımı sunar.

Bu PWA hakkında sevdiğimiz şey:

  • Hızlı yükleme süresi
  • Çevrimdışı destek
  • Hafif
  • Son derece hızlı rezervasyon süreci

Lyft

lyft uygulaması

Uber'in 2012 yılında kurulan rakibi Lyft, Amerika Birleşik Devletleri ve Kanada'daki sürücü ve sürücü tabanlarını genişletti.

Daha ucuz fiyatlar sunan (sık yolcular için bir abonelik planı açısından) şirket, bir zamanlar Uber'in hakim olduğu büyük bir pazar payı aldı. PWA'sını 2016'da tanıttı

Yeni kullanıcılar için PWA, yerel uygulamasıyla bilinen rezervasyon hizmetlerinin yanı sıra kolay bir kayıt süreci de sağlar.

Bu PWA hakkında sevdiğimiz şey:

  • Hızlı tepki süresi
  • Güvenilir gerçek zamanlı güncellemeler

Tecaval

tejawal uygulaması

BAE'de çok popüler bir uçuş ve otel rezervasyonu uygulaması olan Tajawal, gezginler için 450'den fazla havayoluna ve binlerce otele erişim için eksiksiz çözümler sunuyor.

PWA çok hızlı çalışır ve basitleştirilmiş bir süreçle kolay rezervasyon çözümleri sunar. Arayüz basittir ve esas olarak rezervasyonlara odaklanır.

Bu PWA hakkında sevdiğimiz şey:

  • Çok hızlı sayfa yükleme
  • Güvenli işlemler

FlyHafta Sonu

flyweekend uygulaması

Bu eşsiz seyahat rezervasyon şirketi, 2017 yılında Amsterdam'da kuruldu. Amaç, kullanıcıların uçağa atlayabilmeleri ve sistemin önerisine göre iki günlük bir geri çekilme deneyimi yaşayabilmeleri için yalnızca hafta sonu seyahat güzergahları sunmaktır.

FlyWeeked kullanıcıları sadece mevcut konumlarını girer ve mola vermek istedikleri bir hafta sonu seçerler. Ardından sistem, kullanıcının ilgilenmiyorsa "kaydırıp kaydırabileceği" veya bunun yerine gezi rezervasyonu yapabileceği tıklanabilir şehirlerin bir listesini sağlar.

PWA'nın kullanımı kolaydır ve benzersiz konsepti sayesinde daha yüksek etkileşimi garanti eder.

Bu PWA hakkında sevdiğimiz şey:

  • Hızlı tepki süresi
  • Hızlı sayfa yükleme

havalı kuzen

havalı kuzen uygulaması

İlgi alanlarınızı paylaşan bir yerli, seyahatiniz sırasında size rehberlik ettiğinde, yabancı bir ülkeyi ziyaret etmek daha heyecanlı hale getirilebilir. Cool Cousin ile ziyaretçiler, kullanımı kolay platformlarında güvenilir yerel şehir rehberlerini seçebilirler.

Sözde "kuzenler", cerrahlardan müzisyenlere kadar çeşitlilik gösterir, ancak hepsi memleketlerinde turistlere ev sahipliği yapmak için aynı tutkuyu paylaşır.

PWA, kullanıcıları arasında daha hızlı ve sorunsuz erişim deneyimi sağlamak için 2018'de piyasaya sürüldü. Şirket, resmi güncellemesinde, uygulamanın yükleme süresini %25 oranında azalttığını ve kullanıcıların diğer çevrimiçi kaynaklara erişimini azalttığını duyurdu.

Bu PWA hakkında sevdiğimiz şey:

  • Hızlı tepki süresi
  • Kolay gezinme

Eğlence

ses dilimi

Soundlice uygulaması

Müzik notalarını gerçek sesle senkronize eden bir uygulama olan Soundslice ile gitar, piyano, saksafon veya banjo çalmayı öğrenmek artık daha kolay.

Soundslice'ın PWA'sı, bir mobil cihaz kullanarak kendi kendine öğretme oturumları için mükemmeldir. Bir kullanıcının perdeyi, döngü bölümlerini değiştirmesine ve müziği not almasına izin verir. Öte yandan, müzik öğretmenleri aracı kullanarak etkileşimli oturumlar geliştirebilir.

Örnek "dilimler", kullanıcıların müzik sayfasında hareketli bir dikey çizgi kılavuzu eşliğinde sesi çalmasına olanak tanır.

Bu PWA hakkında sevdiğimiz şey:

  • Etkileşimli tasarım
  • Hızlı yükleme süresi

Spotify

spotify uygulaması

Dijital müzik akışı hizmeti Spotify için, daha fazla aboneyi takip etmek için PWA aracılığıyla hafif bir uygulamadan yararlanmak şart.

Spotify'ın masaüstü ve mobil uygulaması PWA'da çoğaltılarak dinleyicilere çevrimdışı dinlerken bile aynı kolaylık sağlanır. PWA çok daha hızlı yüklenir ve arka plan renkleri daha kişiselleştirilmiş bir dokunuş için albüm türlerine uyarlanır.

Bu PWA hakkında sevdiğimiz şey:

  • Uyarlanabilir Kullanıcı Arayüzü
  • Çevrimdışı destek
  • Etkileşimli tasarım

1 tuner

1 tuner uygulaması

Popüler inanışın aksine, radyo ölmedi. 1Tuner ile herhangi bir kullanıcı radyo istasyonlarını (kelimenin herhangi bir yerinde) ve podcast'leri dinleyebilir.

Brezilya yayınlarını veya yerel Londra istasyonlarında çalınan en iyi parçaları dinlemeyi kaçırmamak için çalma listeleri bile oluşturabilirler.

PWA da mükemmel çalışıyor. Belirli bir radyo istasyonunu seçmek, yayını gerçek zamanlı olarak dinlemenizi sağlar. Öte yandan, podcast'ler mükemmel ses kalitesinde sunulur.

Bu PWA hakkında sevdiğimiz şey:

  • özelleştirilebilir tema
  • Çok sayıda içerik önerisi

9GAG

9gag uygulaması

9GAG'ın piyasaya sürülmesinden bu yana çevrimiçi mizah hiçbir zaman aynı olmadı. Dünyanın her yerinden kullanıcılar tarafından paylaşılan internet meme'leri, videolar ve görseller ile site bir eğlence kaynağı haline geldi.

Ancak kısa süre sonra, özellikle trend olan içerik çok sayıda video içerdiğinde, eski yerel uygulamasının yüklenmesinin daha uzun zaman aldığını fark etti.

9GAG, sayfa yükleme hızlarını azaltmak ve daha iyi kullanıcı katılımını teşvik etmek için PWA'ya geçti. Site, kullanıcılarının uygulamada yerel uygulamasına kıyasla yüzde 25 daha uzun süre kaldığını ortaya koydu.

Bu PWA hakkında sevdiğimiz şey:

  • Android ve iOS'a yüklenebilir
  • Çevrimdışı destek
  • Hızlı yükleme süresi

Lotto.de

loto.de uygulaması

Bu PWA'daki en son Euro loto sonuçlarıyla ilgili derlenmiş gerçek zamanlı bilgiler, oyuncular için kullanışlı bir kaynak sağlar.

PWA son derece hızlı yüklenir ve düşük kaliteli cihazlarla ve zayıf internet bağlantılarında iyi çalışır. En son sonuçları öğrenmek için sabırsızlanan herhangi bir loto oyuncusu için bu PWA kullanışlı bir arkadaştır.

Bu PWA hakkında sevdiğimiz şey:

  • Sorunsuz kullanıcı deneyimi
  • Almanca ve İngilizce olarak kullanılabilirlik

En İyi 50 PWA Örneğinin Özeti

Umarım bu ilerici web uygulaması örnekleri, bu kılavuzda belirttiğimiz bazı ana noktaları vurgulamıştır.

Bu markalar mobil UX'lerine yatırım yaptı ve avantajlardan yararlandı. Kendi işiniz için etkileyici bir ilerici web uygulamasıyla onların ayak izlerini takip edebilir ve “önce mobil” olabilirsiniz. Size nasıl olduğunu anlatacağız, ancak önce kilit bir soruyu yanıtlayacağız – “ya yerel uygulamalar ne olacak?”

Belki de iOS ve Android uygulamalarını kendiniz oluşturma fikriyle oynuyordunuz ve bunun yerine PWA'lara bakma konusunda yan yola saptınız. Belki de App Store'lara giriş yapmak konusunda o kadar telaşlı değilsiniz ve sadece çok daha iyi bir web sitesi istiyorsunuz.

Her iki durumda da – kısaca “yerel ve PWA” tartışmasını ele alacağız ve neden bir PWA'nın minimum ve PWA + yerel uygulamanın en uygun olduğunu düşündüğümüzü açıklayacağız.

Ne Tür Bir Uygulama Yapmalısınız? Aşamalı Web uygulamaları ve Yerel Uygulamalar

Aşamalı web uygulamalarının ve yerel uygulamaların rakip olduğuna dair bir fikir var. Bu PWA'lar yerel uygulamaları alakasız ve gereksiz hale getirecek. İşletmelerin bir PWA ve yerel bir uygulama oluşturma arasında seçim yapacakları ve her zaman ikincisini seçecekleri.

Bu anlatı yanlış yönlendirilmiştir ve yerel uygulamaları PWA'lara karşı bir/veya seçim olarak sunar, bu da yanlış bir ikilemdir. Gerçek şu ki, PWA'lar ve yerel uygulamalar mükemmel bir kombinasyondur ve birlikte sinerjik olarak çalışır. Birbirlerinin temellerini korurlar ve kanaldan bağımsız olarak herkese en iyi kullanıcı deneyimini sunmanızı sağlarlar.

app store ve google play'de mevcut

PWA'lar, web'in erişiminden, keşfedilebilirliğinden ve her yerde bulunabilirliğinden yararlanır. Organik trafik çekerler ve ilk kez gelen ziyaretçileri hızlı ve şık bir deneyimle etkileyerek onları sitenizde daha fazla zaman (ve para) harcamaya ikna ederler. Sürtünmeyi ve kapı bekçilerini azaltan kolay bir kurulum seçeneği sunarlar ve sınırlı cihaz depolama alanı konusunda endişe duyanlara bile hitap edebilirler.

Yeni ziyaretçilerle ve geri dönecek kadar meşgul olan ancak herhangi bir nedenle yerel uygulamalarınızı indirmek için yeterli olmayanlarla bağlantı kurmak için mükemmel araçlar sağlarlar. PWA'lar, huniniz aracılığıyla insanları beslemenin mükemmel yoludur.

Yerel uygulamalar ise PWA'lara kıyasla daha zayıf erişime ve görünürlüğe sahiptir. Bunlar, App Store'ların "duvarlarla çevrili bahçelerinin" arkasındadır ve bunları yüklemek ve indirmek için kullanıcının daha yüksek düzeyde taahhütte bulunmasını gerektirir. Öte yandan, mevcut kullanıcı alışkanlıklarıyla daha uyumludurlar, iOS kullanıcılarına anında iletme bildirimleri göndermenize izin verirler ve App Store'larda markanızı güçlendiren görünürlük/varlık sağlayabilirler.

Yerel uygulamalar, temel okuyucularınız/müşterileriniz/kullanıcılarınız için harikadır. En sadık tabanınız, yerel uygulamalarınızı indirmeye ve bunlara bir giriş ekranının veya ödeme duvarının arkasından bile erişmeye teşvik edilmelidir, böylece onları tek bir yerde toplayabilir ve gerçekten onları anlamaya ve etkileşime geçmeye, LTV'yi ve elde tutmayı mümkün olduğunca en üst düzeye çıkarmaya odaklanabilirsiniz.

Yerel uygulamalar, en büyük hayranlarınız için harika bir "ev"dir.

Google bunu şöyle ifade ediyor:

“PWA'ların yerel uygulamaları değiştirmesi gerekmiyor; onlarla birlikte çalışabilirler. Örneğin perakendeciler, bir uygulamayı yükleme olasılığı daha yüksek olan sadık kullanıcılarla etkileşim kurmak için yerel bir uygulama kullanabilir, ancak yeni kullanıcılara kolayca ulaşmak için bir PWA kullanabilir. PWA ile etkileşime giren kullanıcılardan gelecekte mobil uygulamayı indirmeleri istenebilir.

Tavsiyemiz – ikisini de oluşturun!

Bütçeniz kısıtlıysa bir PWA alın. Yerel bir uygulamanız varsa ancak PWA'nız yoksa kesinlikle bir ASAP oluşturmalısınız. Optimum mobil öncelikli bir UX oluşturmaya tamamen kararlıysanız ve bunu başarmak için yatırım yapabiliyorsanız, her ikisini de oluşturun ve birbirlerinin güçlü ve zayıf yönlerini tamamlamalarını sağlayın.

MobiLoud ile harika yerel uygulamalar edinebilirsiniz, tek ihtiyacınız olan bir web sitesi veya web uygulamasıdır. Daha fazlasını öğrenmek için ekibimizle iletişime geçin!

Aşamalı Bir Web Uygulaması Nasıl Oluşturulur

Bu kılavuzun amacı, size PWA'lar hakkında eksiksiz bir üst düzey genel bakış sunmaktır. Gelişimlerinin inceliklerini ele alacağımız bir konu değil, ancak seçimi kendiniz yapabilmeniz için seçeneklerinizi ortaya koyacağız.

"10 dakikada" bir PWA'yı nasıl oluşturabileceğiniz konusunda internette dolaşan pek çok içerik var. Bu yerel uygulama hissini geleneksel bir web uygulamasına sıfırdan bir saatten daha kısa bir sürede getirme vaadiyle, bu öğreticiler ile baştan çıkarmak çok kolay.

Yine de yasal mı?

Evet ve hayır. Bu PWA "hack'leri" aynı zamanda mutlak minimum kriterleri a – HTTPS, web manifestosu ve hizmet çalışanının yerine getirilmesi içindir. Çok temel, işlevsel, aşamalı bir web uygulaması oluşturmakla ilgileniyorsanız, Microsoft'un PWABuilder'ını deneyebilirsiniz. Biraz kurcalama ve teknik bilgi ile düzgün bir şeyi çalışır duruma getirebilirsiniz.

Benzersiz, optimize edilmiş ve zengin özelliklere sahip ilerici bir web uygulaması oluşturmak için – bu potansiyelini gerçekten yerine getirir – daha fazla yatırım yapmanız gerekir. Nedenini görmek için temel adımları inceleyelim.

  1. Barındırma hizmetiniz aracılığıyla yapılandırılacak bir SSL sertifikası satın alın
  2. Bir uygulama kabuğu geliştirin
  3. Tarayıcının servis çalışanlarını destekleyip desteklemediğini doğrulayın
  4. Servis çalışma dosyasını kaydedin
  5. Anında iletme bildirimleri ve web uygulaması bildirimi ekleyin
  6. Kurulum istemini ayarlayın
  7. Uygulamanın işlevlerini test edin
  8. Uygulama tabanlı Lighthouse'un kontrol listesini denetleyin
  9. Hataları düzelt
  10. Uygulamayı başlat

Kulağa kolay geliyor, değil mi?

Gerçekte, bunu iyi yapmak ve iyi bir özel aşamalı web uygulaması oluşturmak için karmaşık web uygulamaları oluşturma deneyimine sahip ön uç geliştiriciler gerekir.

Servis çalışanını kurma ve optimum performans için önbelleğe alma gibi hayati bir iş karmaşıktır ve gerçek beceri gerektirir. Ardından, gereksinimlerinize bağlı olarak, yerel uygulama kullanıcı deneyimini ve bunun web'de nasıl etkili bir şekilde uygulanacağını anlayan tasarımcılara da ihtiyacınız olabilir.

Oldukça büyük bir şirket değilseniz, muhtemelen ne yapacaklarını söylemenizi bekleyen bir sürü yetenekli ön uç geliştiriciniz yoktur. Onları bulmanız, işe almanız ve bir ekip kurmanız ve yönetmeniz gerekir - bu tür şeylerde deneyimli değilseniz zor bir iştir. İyi bir ön uç geliştirici de her zaman talep görmektedir ve sözleşme oranları bunu yansıtmaktadır.

Aşamalı bir web uygulaması oluşturmanın maliyeti ve zaman çizelgesi

Peki bu ne kadara mal olur? Eh, biraz klasik "bir ip parçası ne kadardır?" gibi.

Tamamen oluşturmak istediğiniz uygulamanın karmaşıklığına bağlıdır. The PWA Book'un yazarlarına göre:

Sıfırdan bir PWA oluşturmak, 3400 wh (küçük bir uygulama için) ile 9000 wh (yaptığımız özel bir proje) arasında bir zaman alacaktır. Bu, 400 bin dolar ile 1 milyon dolar arasında bir maliyet anlamına geliyor. Bir bulut platformu kullanmak en az %75 daha ucuz olacak ve Pazara Çıkış Süresi de %75 daha kısa (8-12 ay yerine 2-3 ay) olacaktır.

Bölüm 10, PWA Kitabı

Bu pahalı bir son gibi görünüyor, ancak yukarıda incelediklerimiz gibi büyük markaların deneyimlerine nasıl yatırım yaptığı konusunda size bir fikir veriyor.

Elbette, bir siteyi sıfırdan oluşturmak yerine PWA'ya dönüştürüyorsanız , çoğu durumda daha ucuz ve daha kolay olacaktır. Kaba bir tahmin olarak, harika bir sonuç elde etmek için en az 3 ay ve 20.000 ila 50.000 ABD Doları arasında yatırım yapmayı düşünüyorsunuz.

Geliştiriciler farklı proje aşamalarını takip eder, ancak çoğu durumda yedi aşamadan oluşur: keşif, tasarım, revizyon, ön geliştirme, test, hata düzeltme ve son başlatma.

PWA'nız daha karmaşıksa, GPS, sosyal medya desteği ve kamera erişimi gibi entegre edilmesi gereken gelişmiş işlevleri göz önünde bulundurarak tamamlanmasının daha uzun sürmesini bekleyin.

Bununla birlikte, basit PWA'lar üç aydan daha az sürebilir (hatta çıplak kemiklerse sadece birkaç hafta). Arka uç yönetici paneli, görselleştirme kalıpları ve diğer entegrasyonlar gibi daha gelişmiş özelliklere sahip olmak istiyorsanız, PWA'nıza altı aydan daha kısa bir sürede sahip olabilirsiniz.

Bu oldukça büyük bir miktar gibi görünebilir, ancak bağlam içine koyarsanız buna değer. Yalnızca yerel uygulamalardan daha uygun maliyetli ve daha hızlı oluşturulmakla kalmaz, aynı zamanda hız ve iyileştirilmiş kullanıcı deneyimi, uzun vadede kendi maliyetini fazlasıyla karşılayacaktır.

WordPress kullanıyorsanız, WordPress sitenizi bir PWA'ya dönüştürmenin daha basit yolları ve deneyebileceğiniz bazı WordPress PWA eklentileri vardır.

Seçenekleriniz konusunda size tavsiyelerde bulunmaya yardımcı olabiliriz ve siteniz uygunsa, standart maliyetin çok küçük bir kısmı karşılığında onu yalnızca 2 hafta içinde bir PWA'ya dönüştürmek için özel platformumuzu kullanın. Benzer bir zaman diliminde sitenizden yerel iOS ve Android uygulamaları da oluşturabiliriz, böylece 2021 ve sonrası için tüm mobil temellerinizi kapsamış olursunuz!

Daha fazla bilgi edinmek için bir danışma için mobil uzmanlarımızdan biriyle iletişime geçin.

Bu Sizin Elinizde – Bugün Aşamalı Bir Web Uygulaması Oluşturmaya Başlayın!

Şimdiye kadar aşamalı web uygulamalarının özellikleri ve gücü hakkında iyi bir genel bakışa sahip olmalısınız.

Daha fazla bilgi edinmek için şu kaynaklara göz atın:

  • PWA Kitabı
  • Google'ın web.dev'deki kaynakları ve Google Developers
  • PWA İstatistikleri (ilginç ölçümler ve vaka çalışmaları)
  • Google'ın PWA Roadshow'u (harika video serisi)
  • Mozilla'nın mükemmel PWA yönergeleri
  • Jason Grigsby'nin Aşamalı Web Uygulamaları kitabı
  • Bugün Hangi Web Yapabilir? (web teknolojisinin nasıl geliştiğini gösterir)
  • Evet, bu web projesi bir PWA olmalıdır (mükemmel rehber/makale)
  • Yerel, web ve karma uygulamalar arasındaki farkla ilgili kılavuzumuz

Şimdi senin sıran. Göz korkutucu bir görev gibi görünebilir - ancak gerçekten etkileyici, modern ve optimum bir web varlığına sahip olmak için web sitenizi aşamalı bir web uygulamasına dönüştürmeniz gerekir.

Fırlatmaya hazır olduğunda mutlu olacaksınız, garanti ediyoruz. Ve müşterileriniz işinize daha fazla zaman, dikkat ve para harcayarak sizi ödüllendirecek.

Yine de bahsettiğimiz gibi – bir PWA, yerel uygulamaların yerini tutmaz. PWA'lar öncelikle çok daha iyi bir web sitesidir. Henüz alışmadıkları için kullanıcıların cihazlarına yüklemelerini sağlamak zor olabilir ve iOS kullanıcılarına anında iletme bildirimleri göndermeyi ve App Store'larda bir marka varlığını kaçırırsınız.

Yerel Uygulamaları da oluşturmalı mısınız?

Bir PWA şarttır, ancak yerel uygulamalar hala nihai mobil kullanıcı deneyimidir. Bazılarının yerel uygulamaların geleceği konusunda temkinli veya olumsuz olmasının tek nedeni, yüksek maliyet (50.000 ABD Doları) ve geleneksel olarak bunlarla birlikte gelen uzun ve zahmetli geliştirme sürecidir.

Bu endişeleri paylaşıyor ancak markanız için iOS ve Android uygulamaları oluşturmakla ilgileniyorsanız, News, Canvas for eCommerce veya Canvas platformlarımıza göz atmalısınız. Hangisi sizin için uygunsa, sitenizi veya web uygulamanızı sadece birkaç hafta içinde milyon ABD Doları gibi düşük bir ücretle en kaliteli yerel uygulamalara dönüştürebilirsiniz.

Platformlarımız, herhangi bir web sitesini mobil uygulamaya dönüştürmek için kullanılabilir. Sitenizin ne ile inşa edildiği önemli değil. MobiLoud aşağıdakileri oluşturmak için harikadır:

  • WordPress uygulamaları
  • Kabarcık uygulamaları
  • Squarespace uygulamaları
  • Wix uygulamaları
  • WooCommerce uygulamaları
  • Web akışı uygulamaları

Ve aradaki herhangi bir şey! Android ve iOS'ta sınırsız anında iletme bildirimlerine sahip olacaksınız ve web'de ve App Store'larda kazanan bir çapraz platform varlığı oluşturmak için ihtiyacınız olan tüm özelliklere sahip olacaksınız.

Ayrıca size bir PWA ile yardımcı olabiliriz, böylece ileride ideal mobil komboya sahip olursunuz. Bu kulağa hoş geliyorsa - iletişime geçin ve bugün bir demo rezervasyonu yapın. Başka bir rotaya gitmeye karar verirseniz, yolculuğunuzda iyi şanslar. Umarız PWA örneklerini beğenmişsinizdir ve mobilde başarılı olmanıza yardımcı olacak ilham almışsınızdır!