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 App (PWA), modern teknolojilerle, web sitelerinin mobil cihazlarda native olarak kullanılmasını sağlayan bir teknolojidir. JavaScript ile Service Worker üzerinde yapılan düzenlemelerle, mobil cihazınızın bir çok yetkinliğine erişebilmenize olanak sağlar.

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.

PWA 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 App Nasıl Çalışır?

PWA olarak tasarlanmış bir web sitesine mobil cihazınızdaki güncel bir Chrome tarayıcıyla girdiğinizde, tarayıcı bu uygulamayı kısayol olarak ana ekranınıza eklemek ister misiniz diye soruyor. Eğer kabul ederseniz web sitesi artık telefonunuzun ekranının tamamını kaplıyor ve normal bir mobile uygulama gibi çalışmaya başlıyor. Tabii ki burada çalışan yine bir web sayfası, ancak gerek tasarımsal gerekse kullanıcı

deneyimi açısından doğru dizayn edilmiş bir PWA’da bunu farketmeniz çok zor oluyor.

PWA’nın önemli bileşeni Service Worker ise web site içeriğinin mobil cihaza yüklenmesini sağlar. Böylece telefonunuz internete bağlı olmasa bile uygulamayı açtığınızda siz telefona aktarılan tüm içeriği ziyaret edebilirsiniz.

Web sitenizin tarayıcı tarafından PWA olarak algılanması için, uygulamanızın özel bir manifest dosyasına ihtiyacı vardır. Bu dosyada uygulamaya ait özel bilgiler(ad, ikon gibi) yer alır. Aşağıda örnek bir Web App Manifest dosyasının içeriğini görebilirsiniz.
 

{
   "name": "YAZİLİM – Yazilim.net okuyuculari",
   "short_name": "Yazilim.net",
   "icons": [
      {
         "src": "yazilim.png",
         "type": "image/PNG",
         "sizes": "144x144"
      }
   ],

   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#282828"
}

Alanları açıklamak gerekirse;

name: PWA açılırken görüntülenecek metin

short_name: Tarayıcılarda “Ana ekrana kısayol ekle” metoduyla eklenirken görüntülenecek metin, ayrıca ana ekranda bu metin ile görüntülenir.

icons: PWA açılırken name’in üzerinde görünecek ikonlar ve ayrıca uygulamanın ana ekrandaki ikonu

display: standalone seçeneğini kullandığınız zaman uygulama içerisinde adres çubuğu bulunmaz. Browser seçeneğinde ise adres çubuğu bulunur.

background_color: Açılış ekranının arkaplan rengi

theme_color: Eğer display:browser şeklinde kullanırsanız adres çubuğunun rengini ayarlamanıza yarıyor.

Manifest dosyanızı yazdıktan sonra HTML içeriğinde bu dosyayı aşağıdaki şekilde linklediğinizde artık uygulamanız tarayıcı tarafından bir PWA olarak tanınacaktır.
 


 

Tabi ki sadece bu dosyayı eklemek uygulamanızın PWA olarak çalışması için yeterli olmaz. Manifest sadece tarayıcıya “ben bir PWA’yım” denilmesini sağlıyor. Bu dosya dışında uygulamanızın HTTPS üzerinden çalışması, tüm sayfalarınızın responsive tasarıma sahip olması, uygulamadan tıklanan her sayfanın kendine ait bir URL’ye sahip olması gibi bazı önemli kuralların da sağlanması gerekmektedir.

Uygulamanızı PWA yapmak için mevcut web teknolojileri dışında ayrı bir kütüphane veya framework’e ihtiyacınız yok. Sadece HTML, CSS ve JavaScript bilgisiyle bu tarz bir uygulama oluşturmanız mümkün.