PWA (Progressive Web Apps) son zamanlarda adından çokça söz edilen ve web tasarım dünyasında hızlı şekilde popülerlik kazanan teknolojilerden birisidir.

Eğer web geliştirme yapıyorsanız PWA sizinde kelime dağarcığınıza çoktan girmiştir bile. PWA bir sürpriz değil aslında, yıllardır beklenen bir rüyanın gerçekleşmesiyle artık web uygulamaları bir mobil uygulamaymış gibi telefona kurulabilir hâle gelecek.

İnternet üzerinde PWA ile ilgili bir sürü makale ve teknik doküman bulabilirsiniz. Bu yazımızda biz sizlerle PWA'nın bir görüntüsünü çekmeye çalışacağız.


Yeni Bir Yazılım Geliştirme Modeli

Progressive Web Apps (PWA) yeni bir yazılım geliştirme metodudur. Geleneksel uygulamalar geliştirmek yerine web uygulamaları (web sitesi) ile mobil uygulamaların bir karışımıdır.

Bu yeni yaklaşım sayesinde modern tarayıcılar kullanılarak kullanıcıya mobil bir deneyim yaşatmak hedeflenmektedir.

Daha teknik açıdan anlatmak gerekir ise bir web uygulamasının bir mobil uygulama gibi App Store / Play Store üzerinden indirilmesi gibi davranması anlamına geliyor.

Web uygulaması normal bir tarayıcı üzerinden açılıyor, "Ana Sayfaya Ekle" uyarısı ile kullanıcı eğer uygulamayı kendi anasayfasına ekler ise PWA artık çalışabilir duruma geliyor. Ana Sayfadan uygulama çağırıldığında artık tarayıcınında UI elementlerini saklayarak bir uygulama gibi davranabiliyor.

Örneğin Whatsapp üzerinde nasıl internet olmasa bile uygulamayı açıp, eski mesajlarınızı kontrol edebilir ve hatta yeni mesajlar yazabiliz. İnternet geri geldiğinde yazmış olduğunuz mesajlar otomatik olarak ilgili kişilere iletilmektedir. İşte PWA'nın verdiği sözde budur. Web uygulamalarının internet olmasa bile yüklenebilmesini sağlar ve native bir mobil uygulama gibi davranır.

PWA Neden Önemli?

Progressive Web App getirdiği aşağıdaki özellikler sayesinde büyük katkı sağlar.

• Güvenilir bir ortam sunar.
• Hızlıdır.
• Çeşitli ekran boyutlarına uyumludur.
• Telefona kurulabilirler
• Başlangıç ekranı ekleyebilirsiniz.
• Kullamıcı memnuniyeti sağlar.

PWA ve UI Frameworkler

Bir çok insan PWA oluşturabilmek için en son modern UI frameworklerin (ReactJs, Angular 6 or Vue.js.) kullanılması gerektiğini düşünebilir. Fakat bu bakış açısı doğru değildir. PWA'nın frameworkler ile bir işi yoktur, sadece doğru komponentleri kullanmak yeterli olacaktır.

PWA Web Sitelerini Nasıl Offline Çalıştırabiliyor?

Bu PWA ile ilgili akla gelecek ilk sorudur. Bir web sayfası internet olmadan nasıl açılabilir?

Mobil uygulamalarda bildiğimiz gibi uygulamayı indirdiğimizde uygulama tüm UI elementlerinide beraberinde indirir ve mobil cihaz üzerinde depolar.

Peki PWA'da işler nasıl yürüyor?

PWA HTML dosyaları, CSS dosyaları ve image nesnelerini tarayıcının cache'sinde tutar. Bu dosyalarda Service Workers adı verilen bir uygulama tarafından daha sonra kullanabilmek için arşivlenir.

PWA'nın Teknik Elemanları

PWA'yı oluşturan bazı önemli elemanlar bir arada çalışarak harika bir sonuç ortaya çıkarırlar. Aşağıdaki elemamanlar iyi bir PWA geliştirmek için gereklidir.

• Service Worker
• Manifest.json
• HTTPS

Sırası ile bu elemanları daha yakından tanıyalım.

Service Worker

Web uygulamalarımız direk olarak internete erişmeye çalışan uygulamalardır. Eğer ortamda network yok ise internete ulaşılamıyor hatası verirler.

Bu işlemi optimize edebilmek için Service Worker gerekli wen kaynaklarını tarayıcının cache kısmına kayıt eder. Kullanıcı uygulamayı yeniden açmaya çalıştığında Service Worker internetin varlığını kontrol etmeden önce tarayıcı cache’ni kontrol eder ve kullanıcıya cevap döner.

Service Worker proxy gibi çalışan bir JavaScript kodudur. Service Worker anlık bildirimleri (push notifications) yönetir ve tarayıcının cache API’sini kullarak offline uygulamalar geliştirilmesine yardımcı olur.

Yazılım geliştiricisi geliştireceği uygulama üzerinde tam yetkiye sahiptir. Service Worker’in kendisine özel ayrı bir hayat döngüsü vardır.

Manifest Dosyası

Manifest dosyası içerisinde uygulamanız ile ilgili bilgiler içeren JSON formatlı bir dosyadır. Uygulamanın adı, arkaplan rengi, teması gibi bir çok özellik bu dosya içerisinden ayarlanmaktadır.

Chrome tarayıcı ile PWA destekli bir web sayfasını açtığınızda otomatik olarak kullanıcıya bu uygulamayı ana ekrana icon olarak ekleyeyim mi diye bir uyarı çıkarabilirsiniz.

Örnek manifest dosyası aşağıdaki şekildedir.

HTTPS

Service Worker gelen internet taleplerini alabilir ve cevapları düzenleyebilir. Service Worker tüm bu işlemleri istemci (client) tarafında yapar. Ancak PWA güvenli bir protokol ister. Bunun için HTTPS desteklenmelidir.