PWA yani Progressive Web App, internet sitelerini sanki bir uygulamaymış gibi mobil ve tablet cihazlarında görüntülenmesini sağlıyor. Peki bize bu noktada neler sağlıyor, nasıl bir PWA oluşturabiliriz? Bu soruları PWA'yı yakından tanımanızı sağlayacak bu içeriğimizde yanıtladık.
Bu İçerikte Yer Alan Ana Başlıklar:
• Progressive Web App (Pwa) Nedir?
• Web Sitesinin Avantajları
• Mobil Uygulamanın Avantajları
• PWA’nın Avantajları
• PWA Nasıl Yapılır?
• PWA Kullanan Örnek Siteler
Mobilde kullanıcıların çoğunun vakti tarayıcılardansa uygulamalarda geçiyor. Bu esnada gelen bildirimler, kullanıcıların uygulamalara geri dönmesini sağlıyor. Ana sayfadaki ikonlarsa kullanıcıya böyle bir uygulamanın varlığını hatırlatıyor. Google'ın yaptığı araştırmalar, kullanıcıların vaktinin %80’ini en sık kullandığı 3 uygulamada geçirdiğini gösteriyor. Bu rakamın 3'ten çok daha yüksek olması beklenebilirdi ancak mobil uygulamalar arasındaki yoğun rekabet böyle bir sonuç doğuruyor (Winner take all situation).
Web ve mobil uygulama arasındaki farkı şöyle düşünebiliriz: Mobil uygulamalar; hızlıdır, offline çalışabilir, bildirim gönderebilir. Web ise; daha güvenli ve gizliliğe karşı daha saygılıdır, ancak mobil uygulamanın bazı yerleşik özelliklerine sahip değildir. Bu, web ve mobilin yapabildiklerine dair bir karşılaştırmaydı. Bir de erişilebilirlik metriği ile değerlendirirsek, web’in nerede en başarılı olduğunu görebiliriz. Google verileri bize mobil kullanıcıların ayda yaklaşık 100 web sitesi ziyaret ettiğini gösteriyor. Bu, URL’lerin en büyük avantajıdır. Peki ya web de kullanıcı beklentilerini karşılayabilseydi? İşte burada karşımıza Progressive Web App kavramı çıkıyor.
Progressive Web App, responsive ve hızlı çalışan sitenizi, mobil ya da tabletlerin ana ekranına bir uygulamaymış gibi yüklenmesini sağlayan bir teknolojidir.
PWA kulağa en başta yüklenebilir bir web sitesi gibi gelebilir fakat bundan çok daha fazlasıdır. Sitenizi Progressive Web App’e dönüştürürseniz siteniz hem bir web sitesi ile aynı özellikleri taşımaya devam edecektir hem de mobil uygulama özellikleri taşıyacaktır. Bundan sonra siteniz çevrimdışı kullanılabilir hale gelir. Ayrıca telefonun belli hardware özelliklerini kullanabilir ve kullanıcıya bildirim gönderebilir olacaktır.
• Multi-platform çalışır. Her türlü cihazdan ve tarayıcıdan erişebilirsiniz.
• Eğer iyi bir SEO’nuz varsa Google aramalarından trafik sağlayabilirsiniz.
• Siteniz kolaylıkla ve hızla paylaşılabilir. Kullanıcılar birbirlerine sitenizin linkini atarak sizin trafiğinizi artırabilirler. Bu şekilde yeni kullanıcılara ulaşmak ve siteye trafik çekmek oldukça kolaylaşır.
• Telefonunuzun ana ekranında ikon olarak durur, kullanıcının uygulamaya erişimi çok kolaydır.
• Çok hızlı yüklenir (load time). Web sitelerindeki yüklenme zamanını size hiç yaşatmaz.
• Telefonunuzda yerleşik çalıştığı için kamera, gps gibi telefonunuza ait birçok hardware özellikten faydalanabilir.
• Apple Store/Android Store’un yüksek komisyonlarını ödemezsiniz.
• Telefonun hafızasında mobil uygulamaya kıyasla çok daha az yer kaplar.
• Apple ya da Android Store’dan indirilmediği için güncelleme problemi de olmaz.
• Mobil uygulama geliştirme maliyetleri ortadan kalkar.
• Aynı zamanda kullanıcılara mobil uygulama deneyimi sunar.
Öncelikle sitenizin bazı şartları karşılıyor olması gerekir:
• Site tasarımınız responsive olmalıdır.
• Siteniz hızlı yüklenmelidir. (Load time düşük olmalıdır.)
• Siteniz kullanıcının aksiyonlarına hızlı cevap vermelidir. (Response time düşük olmalıdır.)
Eğer siteniz bunları sağlıyorsa, Google Chrome üzerinden Lighthouse eklentisini indirip sitenizin PWA’ya uygunluk skoruna bakabilirsiniz. Eğer Lighthouse, sitenizin buna uygun olduğunu söylüyorsa geriye sadece PWA’ya çevirmek için gerekli kodları eklemek kalıyor.
PWA HTML5 ile geliştirilir. Sitenizi PWA yapabilmek için eklemeniz gereken iki ana bileşen var. Bunlardan ilki “manifest.json” dosyasıdır. Bu dosya ikonlar, renkler, isimler gibi tasarım elementlerini barındırır. “Service Worker” ise bir diğeridir. Service Worker da tarayıcıyla birlikte çalışan ve web site ile network arasında bir katman (uygulama kabuğu) oluşturan javascript dosyasıdır. Bu javascript dosyası, bildirim göndermeyi, sitenin hızlı yüklenmesini ve cache’lemeyi sağlar. Bunlar web sitenizi PWA yapabilmek için gereken en temel iki şeydir.
Bir web sitesi PWA ise bunu ana sayfamıza nasıl ekleriz?
Tarayıcınızda web sitesini açın. Daha sonra menü ikonuna tıklayın. Açılan menüde “Ana Sayfaya Ekle” butonunu göreceksiniz. Bu butona tıkladıktan sonra açılan ekranda cihazınıza ekleyeceğiniz uygulamaya isim vererek “Ekle” tuşuna basın. Artık web sitesi cihazınızın ana ekranında mobil uygulama gibi gözükecektir.
Kimler kullanmalıdır?
Mobil uygulama ve web sitesi için iki ayrı yazılım maliyetine girmek istemiyorsanız PWA sizin için uygun bir çözümdür. Henüz çok yaygınlaşmamış olsa da Google’ın bu teknolojiye yüklü yatırım yaptığını biliyoruz. Dolayısıyla ileride kullanımının artacağını söyleyebiliriz.
Starbucks web sitesine PWA ekleyerek internet bağlantısı sabit olmayan bölgelerdeki kullanıcılarının Starbucks on-the-go özelliğini kesintisiz kullanabilmesini hedeflemiştir. Starbucks PWA ile internetiniz olmadan menüye göz atabilir, siparişinizi özelleştirip sepete ekleyebilirsiniz. İnternet bağlantısı geldiği zaman konumlarına özel fiyatları görüntüleyebilir ve sipariş verebilirsiniz. Bu strateji gün içerisinde devamlı hareket halinde olan müşteriler ya da gelişmekte olan kırsal bölgelerde yaşayan kullanıcılar için çok uygundur.
BMW’nin PWA’sı, kullanıcılarına şaşırtıcı bir tecrübe sunuyor. Burada ilk fark edilen şey yüksek çözünürlüklü resimler ve videolar oluyor. Bunlara rağmen web, neredeyse anında yükleniyor. Aslında PWA, BMW’ye başka katkılar da sağladı. Rakamlara bakıldığında ana sayfadan BMW satış sitesine tıklayan insanlar 4 kat; mobil kullanıcılarda ise eski siteye kıyasla %49 artış gösterdi.
Apple Store’un uygulamalardan %30 komisyon kesmesinden rahatsız olan Spotify da kendi web sitesinin PWA sürümünü geliştirdi. Spotify’ın uygulamasına benzer arayüz ve kullanıcı deneyimi sağlarken, aynı zamanda PWA sürümünde kullanıcılar için yenilikler de var. Spotify’ın PWA sürümünde, kullanıcı uygulamada ilerledikçe uygulamanın arka planı da değişiyor. Spotify PWA’yı masaüstünde kullanırsanız playlist, “sana özel”, albüm gibi başlıkların yerinin uygulamadan farklı olarak ana ekranda tab olarak sıralandığını görebilirsiniz. Tüm bunlara ek olarak, Spotify’ın yerleşik uygulamasına kıyasla hem çok daha hızlı çalışıyor hem de adblock kullanabiliyorsunuz.
