what-is-progressive-web-app

Mobil cihaz kullanımının giderek arttığı bu günlerde, artık bir mobil uygulamanızın olmayışını kendinize dert etmenize gerek yok. Progressive Web App  uygulamaları ile web sitenizin görünümünü ve kullanıcı deneyimini, bir mobil uygulama ile eşdüzeye getirebilirsiniz. Sitenizi bu yaklaşımla tasarlarsanız, web sitenizi mobil tarayıcıdan ziyaret eden kullanıcılar, sanki bir web sitesini değil de bir mobil uygulamayı kullanıyormuş hissine kapılabilirler. Gelin hep birlikte bu yeni uygulamaya ve mobile getirdiği yeni çözümlere biraz daha yakından bakalım.

Progressive Web Apps (PWA) Nedir?

Progressive Web Apps (PWA), özel bir kodlama tekniğiyle yazılmış Web sitelerinin bir mobil uygulama gibi kullanılabilmesini ve çevrim dışıyken dahi erişimi mümkün kılan yeni bir teknolojidir.

Bu teknolojinin kullanılabilmesi için kullanıcının güncel bir mobil tarayıcı kullanıyor olması gerekiyor. Kullanıcı açısından baktığımızda başka bir zorunluluğu olmayan bu teknolojinin kullanılması için geliştiriciye düşük miktarda zaman ve bütçe ayırmak düşüyor. Yani PWA oluşturmak için bir mobil uygulamaya ayırmanız gereken zaman ve bütçenin çok çok küçük bir miktarını ayırmanız yeterli. Bu açıdan bakıldığında mobil uygulama oluşturmak yerine PWA platformuna dahil olmak daha mantıklıymış gibi görünebilir. Herkes için olmasa da evet, belirli türlerde içeriğe sahip markaların mobil uygulama sahibi olması gerekmez, bunun yerine PWA kullanmak daha mantıklı görünebilir.

Bir Progressive Web App için neler söylenebilir?

  • Aşamalıdır – Her kullanıcı çalıştırabilir. Tarayıcı bazlı çalıştığı için kullanıcıların bir kurulum yapması gerekmez.
  • Esnektir – Her platformda çalışır; masaüstü, mobil, tablet ve hatta gelecek teknolojilerde.
  • Bağlantıdan bağımsızdır – Düşük bağlantı hızına sahip internet erişiminde veya tamamen çevirim dışı durumlarda kullanılabilirdir.
  • Uygulama gibidir- Uygulama kabuğu modeli, işlevi içerikten ayrı tuttuğu için mobil uygulamalara benzer.
  • Günceldir- “Service Worker” teknolojisi sayesinde her zaman güncel tutulabilir.
  • Güvenlidir- Başka kişilerin transferi edilen veriyi görmemesinden ve içeriğe müdahale edilmediğinden emin olmak için HTTPS yoluyla sunulur.
  • Keşfedilebilirdir- W3C standartlarına uygun olduğu için arama motorlarının bulmasını sağlayan “uygulama” olarak tanımlanabilir.
  • Yeniden ilişkilendirilebilir- Push bildirimleri gibi özelliklerle yeniden etkileşimi kolaylaştırır.
  • Yüklenebilir- Kullanıcıların, bir uygulama mağazasına bağlanmasına gerek olmadan ana ekranına en yararlı bulduğu uygulamaları ekleyebilmelerini sağlar.
  • Paylaşılabilirdir – Kullanıcılara karmaşık kurulum gerektirmeden uygulamayı URL yoluyla kolayca paylaşma imkanı verir.

Progressive Web Apps: Mobil Arama İçin Yeni Standart mı?

Google daha iyi bir mobil – web arama deneyimi sunmak için yeni teknolojilere büyük yatırımlar yaptı, PWA da bu teknolojilerden biridir. PWA mobil tarayıcı üzerinden hızlı, güvenilir ve ilgi çekici bir uygulama benzeri deneyim sunmayı amaçlar. Bir Google yazılım mühendisi olan Alex Russell şöyle açıklıyor: “PWA, Web içeriği ve mobil uygulamalar arasındaki çizgiyi bulanıklaştırıyor, ancak Web’in güçlü yönlerini koruyor.”

PWA sistemi, içeriği “anında” yüklemek için tasarlanmıştır. Bu tarayıcı isteklerini “Hizmet Çalışanı” (service workers) olarak bilinen bir komut dosyası aracılığıyla yönlendirerek gerçekleştirilir. Komut, bir web sitesinden doğrudan belirli özelliklere veya bilgilere erişmek için gerekli olan adımları ortadan kaldırır. PWA ayrıca, kullanıcı davranışlarını ve tercihlerini yakalayan daha fazla parametre kullanır, böylece sistem tanımlı bir kullanıcıya ilgi duyacağı kişiselleştirilmiş mesajlar veya web sayfası içeriği sağlayabilir.

PWA, bir web sayfasının tamamını kullanıcının cihazındaki hafızaya kaydeder ve bir uygulama kabuğuna (uygulama benzeri altyapı) yerleştirir. İçerik sadece gerektiğinde güncellenir. Bir hizmet çalışanı, tüm CSS stil sayfalarını, görüntüleri, JavaScript sayfalarını çalıştırmaya yarar. Çünkü bir sayfa oluşturmak için gereken çoğu şey yerel olarak depolanır, bu da hızlı bir şekilde yükleme performansı sağlar.

Yerel uygulamaların aksine, PWA’lara bir tarayıcıdan erişilir. İndirme veya yükleme bulunmamaktadır. Çevrimiçi olarak yayınlanan PWA da tamamen bağlanabilir durumdadır. Bir başka avantaj ise, uygulamanın önceki çevrim içi etkinlikten kaydedilen ön belleğe alınmış verileri kullanarak çevrimdışı çalışamasıdır. Tüm bu avantajlar ışığında birçok uzman, PWA sisteminin mevcut nesildeki mobil web sitelerinin yerini alabileceğini ileri sürüyor.

Progressive Web Apps Sisteminin Avantajları

Aşağıdakiler PWA sisteminin önemli faydalarından bazılarıdır:

Donanım Kısıtlaması Yok: PWA bir cihazın yerel işletim sistemini ve özelliklerini kullanır. Buna ekran yönü, kamera, mikrofon ve coğrafi konum dahildir. Cihazdan bağımsız olarak, tüm kullanıcılar aynı görsel arayüzü ve içeriği deneyimler. Hizmet görevlisi olan ve modern mobil tarayıcıları tercih eden kullanıcılar PWA sisteminin tüm özelliklerini tecrübe edebilirler.

Bildiğimiz Mobil Uygulamalar gibi çalışır: PWA her şeyi bir “uygulama kabuğuna” (application shell) kaydettiğinden, popüler uygulama mağazası uygulamalarında bulunan kullanıcı arayüzü öğeleri ve animasyonları ile birlikte yerel bir uygulamanın görünümünü ve hissini taklit etmek mümkündür. Google geliştirici yönergeleri, tüm Progressive Web Uygulamalarının iyi bir kullanıcı deneyimi sunmasını sağlamak için bir dizi en iyi uygulama oluşturur.

Geliştirilmiş Performans: Çevrimdışı işlevsellik nedeniyle daha az veri kullanımı vardır. Bir kullanıcı bir PWA ile bir web sitesini ilk kez ziyaret ettiğinde, içerik, kullanıcının cihazına indirilecek, ön belleğe alınacak ve yerel olarak depolanacaktır. Bu, web sayfalarının sonraki ziyaretlerde anında sunulmasına izin verir. Ayrıca, sayfaları daha sonra çevrimdışı modda, desteklenen tarayıcılarla da ziyaret etmeyi mümkün kılar.

Push Bildirimleri:  Bu özellik, sistemin gönderdiği bildirimleri almaya devam etmenizi sağlar. Bir web sitesi Google’ın gereksinimlerini karşıladığında, desteklenen tarayıcılar ziyaretçiyi ana ekranlarına PWA yüklemesini ister. PWA simgesi, yerel uygulama simgesine benzer bir görünüme sahiptir ve kolay erişim için bir yer imi işlevi görür.

Progressive Web Apps, SEO için Daha İyi Bir Tercih Mi?

“Progressive Web Apps, SEO için Daha İyi Bir Tercih Mi?” sorusunu mobil uygulamalar ile PWA sistemini karşılaştırarak cevaplarsak, cevabımız evet. PWA  SEO için daha iyi bir tercih olabilir. Mobil uygulama en başından yüksek zaman ve maliyet kaynağı gerektiren, sıklıkla güncellenmesi gereken, en optimize duruma gelene kadar yine zaman ve maliyet kaynaklarına ihtiyaç olan bir tercihtir. PWA ise kullanıcının tek bir tıkla hızlıca erişebileceği içeriği sağlayabilir, hem de kullanıcının online olmasını gerektirmeden. Çoğu mobil uygulamanın İnternete bağlanmadığı zaman bir işe yaramadığını bildiğimizden PWA sisteminin en büyük avantajı çevirim dışıyken kullanma imkanı olarak ön plana çıkıyor. Ayrıca çoğu kullanıcı daha az veri transferi yaparak daha hızlı gezinme fırsatı da bulabilmekte. Yani PWA veri transferi sağlayarak kullanıcıların öncelikli tercihi olmaya daha yakın.

Google tarafında mobil öncelikli indeksleme süreci söz konusuyken PWA sisteminin değeri gittikçe artıyor. Var olan bir sistem üzerinde yapılacak ufak düzenlemeler, çok fazla zaman ve bütçe gerektirmemesi sayesinde kullanıcıya aynı deneyimi sağlamaya devam edebilir. Henüz mobil uygulaması olmayan firmalar veya web site yöneticileri PWA sistemini uygulamayı mutlaka düşünmelidirler.

PWA Sisteminin Mobil Uygulamalara Göre Avantajları

  • Programlama için ayrı bir kod tabanı gerekmez çünkü PWA HTML 5 ile de geliştirilebilir.
  • PWA bir Google aramasında bulunabilir, çünkü bunlar tamamen dizine eklenebilir durumdadır.
  • Güncellemeler bir uygulama mağazasından geçmek zorunda değildir. Bunun yerine, web uygulaması servis çalışanlarının yardımıyla en yeni standart haline getirilmiştir.
  • Bir PWA, içeriği ve işlevleri, cihazın ön belleğine yüklediklerinden çevrimdışı olarak da kullanılabilir. İnternet bağlantısı tekrar mevcutsa, işlevler ve içerikler sunucuyla senkronize edilebilir.
  • Geliştirme maliyetleri, mobil uygulamalardan önemli ölçüde daha düşüktür. Ayrıca PWA tüm platformlarda çalışır ve farklı cihazlar ya da farklı işletim sistemleri için farklı sürümlere ihtiyaç yoktur.
  • Uygulamanın çalışması için herhangi bir mağaza gerekmez ve uygulama, tarayıcıyla birlikte çalıştığı için kullanıcının bir şey yüklemesine gerek yoktur.
  • Kullanıcılar uygulamalar arasında kolayca geçiş yapabilir ve PWA içeriğini paylaşabilir. Aynı şekilde, linklere tıklandığında ve başka bir web sitesine geçerken daha az bekleme süresi vardır.
  • PWA hemen yüklenir, böylece mobil uygulamalardan çok daha kısa bir yükleme süresi gerektirir.
  • PWA’lar esnek ve her cihaz için uygundur.

Sonuç Olarak – PWA Sistemini Kullanmalı mısınız?

Eğer mobil uygulama için zaman ve bütçe ayıramıyorsanız, kullanıcıların Web sitenizi mobil uygulama dışında takip etmesini istediğiniz bir alan varsa, PWA tam size göre. PWA kullanmak için çok fazla acele etmenize gerek yok, yaklaşık 2 senedir gündemde olan bu sistem henüz kullanıcılar arasında çok fazla yaygınlaşmadı. Ancak sağladığı avantajlar açısından bakılınca çok yakında yaygınlaşması söz konusu olabilir. Bu açıdan PWA sistemini mobil siteniz için uygulama planına almanızı şiddetle tavsiye ederiz.

Geliştiriciler için: Kodlama ile ilgili detaylı bilgi almak için;

Google Codelabs -Your First Progressive Web App

Github – Your First Progressive Web App

PWA kullanan örnek mobil siteler:

Firefox Platform Status

Nasa Open Source Software

Emre Ercan
Ben Emre Ercan,
Stradiji Dijtal Pazarlama bünyesinde SEO Uzmanı olarak görev yapmaktayım. Geçmişten beri teknoloji ve internet dünyasıyla olan yakından ilişkim sayesinde SEO'nun olumlu etkilerini müşterilerimize yansıtmak için canla başla çalışmaktayım.