Progressive Web App (PWA) Nedir?

Bu yazıda ise tüm süreci bir başlık altında toplayacak, Progressive Web App (PWA) tanımı ve özelliklerine değineceğim.

Progressive Web App (PWA)

2015 yılında Frances Berriman¹ ve Google Chrome mühendisi Alex Russell², modern internet tarayıcıları tarafından desteklenen ve tarayıcı özelliklerinden faydalanan, native uygulamalardaki kullanıcı deneyimini web uygulamalarına taşımayı amaçlayan Progressive Web Apps (PWA) kavramını ortaya çıkardı.

Progressive Web App (PWA), mobil uygulamalara benzer kullanıcı deneyimini web sayfalarına taşımak amacıyla Google’ın öncülüğünde geliştirilen ve modern internet tarayıcıları tarafından desteklenen bir bir web uygulaması tanımıdır. Dolayısıyla URL'ler aracılığıyla web sunucularında konuşlandırılır ve web bağlantısıyla erişilebilirler. Elbette temelde bir web uygulaması olduğu için vanilla JS³, React⁴, Polymer⁵, Angular⁶, Vue gibi bir framework veya library’e ihtiyaç vardır.

PWA’lar için uygulama mağazalarına gerek yoktur. Ayrıca, bir modern tarayıcının pek çok yeteneği (audio ve video capture, push notification, camera kontrol, recording media, online state, device memory, offline storage, file access, geolocation, device position, fullscreen vb.) kullanabilirler. İşletim sistemine bağlı olarak sınırlandırmalar olsa da geliştirmeler ve popülerlikle birlikte çok daha fazla yeteneğin kullanılabilir hale geleceğini söyleyebiliriz. Bahsi geçen PWA yetenekleriyle ilgili stackoverflow tartışmasına göz atabilirsiniz⁷. Ayrıca, aşağıdaki görseli tıklayarak Pokedex adındaki Progressive Web App örneğini⁸ farklı tarayıcılarda inceleyebilirsiniz.

Önemli bir nokta! Bir web sayfasının PWA olarak ifade edilebilmesi / tanımlanabilmesi için bir dizi tanıma sahip olması gerekmektedir; aktif service workers, geçerli bir manifest, HTTPS bağlantısı (local geliştirme ortamında zorunluluk değil), responsive design vb. Bu gereksinimler ve ilgili diğer detaylar için Progressive Web App Checklist⁹ sayfasını inceleyebilirsiniz.

PWA Özellikleri

Yukarıda bahsi geçen anlatımı biraz özetleyelim (tl;dr) ve Progressive Web App’in özelliklerine maddeler halinde bakalım.

Responsive: Her cihaz ile uyumludur; masaüstü¹⁰, mobil, tablet, ChromeOS, vb.
Progressive: Modern bir tarayıcı gereksinimi dışında, tarayıcı seçimi gerektirmez. Opera, Firefox, Chrome, Microsoft Edge gibi pek çok tarayıcı tarafından desteklenmektedir.
Fast & Reliable: Service workers ile offline çalışabilir ve arka planda senkronize olabilir. Kullanıcı düşük internet hızına sahip olsa da uygulamayı hızlı ve sorunsuz bir şekilde kullanabilir.
Engaging: Kullanıcılar PWA navigasyonları ve etkileşimleri sayesinde (App Shell) bir mobil uygulama kullanıyor hissi yaşar. Erişim ve indirme işlemi için URI yeterlidir. Uygulama mağazalarına ve kompleks indirme işlemlerine gereksinim duymaz.
Secure: HTTPS kullanımı zorunludur.
Update: Service workers ile her zaman günceldir.
Installable: Kullanıcılar uygulamayı ana ekrana (home screen) kolaylıkla ekleyebilir ve uygulamayı eklenen simge aracılığıyla çalıştırabilir. Bu indirme işlemi WebAPK¹¹ olarak da ifade edilebilmektedir.

Progressive Web App Çalışma Biçimi

PWA temelde bir web uygulamasıdır. Ancak, service workers ile birlikte gelişmiş yeteneklere kavuşur. Ziyaretçiler görüntüledikleri web sayfasını dilerlerse akıllı telefonlarına uygulama olarak indirebilirler. Bu indirme işlemi esasında uygulama için tanımlanan icon’un home screen’e eklenmesi ve arka planda service worker’ın internet tarayıcısı ile işbirliğine başlaması anlamına gelmektedir. Ziyaretçi artık bir uygulama kullanıcısı olarak icon’u tıkladığında sayfa tanımlamalar çerçevesinde bir uygulama gibi (offline) davranmaya başlar. Hazırladığınız bir oyunun ya da haber sitesinin düşük bağlantıda (2G, 3G), metroda ve/veya uçak modunda erişilebilir olduğunu düşünün. Unutmadan, uygulama içerisindeki kullanıcı etkinlikleri local olarak depolanır ve internet erişimi sağlanması durumunda senkronize (background sync) edilir. Dolayısıyla, kullanıcı deneyimi sekteye uğramamış olur.

Örnek Progressive Web Uygulaması

Aşağıda hızlı bir şekilde test etmeye ve kullanmaya başlayabileceğiniz bazı örnek uygulamalar iletiyorum. Bunlar arasından, Pete LePage¹² tarafından paylaşılan Your First Progressive Web App başlıklı yazıda¹⁰ yer alan hava durumu örneğini adım adım hayata geçirelim.

İlk olarak Dark Sky API¹³ erişimi için key edinmemiz gerekiyor. Bu sebeple ilgili web sitesine üye olup hesap sayfasında yer alan Secret Key’i kopyalamalısınız. Ücretsiz kullanımda 1.000 call’a kadar erişim sağlanabilmekte.

Artık web uygulaması dosyalarını bilgisayarımıza indirebiliriz.

git clone https://github.com/googlecodelabs/your-first-pwapp.git

İlgili indirme işleminin tamamlanmasının ardından yapılandırma aşamasına geçebiliriz.

cd your-first-pwapp
npm install

Bir sonraki işlemimiz kopyaladığımız Secret Key’i .env dosyasında yer alan DARKSKY_API_KEY değişkenine tanımlamak.

DARKSKY_API_KEY="_PUT_YOUR_DARK_SKY_API_KEY_HERE_"

Key tanımlama işlemini ayrıca server.js dosyasındaki API_KEY‘e değer atayarak da gerçekleştirebilirsiniz.

const API_KEY = "_PUT_YOUR_DARK_SKY_API_KEY_HERE_";

Her iki durumda da ilgili dosyayı kayıt edip kapatmamızın ardından uygulamamızı çalıştırabilir ve http://localhost:8000 üzerinden görüntüleyebiliriz.

node server.js

Uygulamayı görüntülememizin ardından, Chrome DevTools > Application ile manifest’i görüntülemek istediğimizde No manifest detected mesajı ile karşılaşacağız. Diğer yandan, Lighthouse ile (Chrome DevTools > Audits) sayfayı kontrol ettiğimizde Progressive Web App doğrulaması sağlanmayacaktır. Bu sorunlar bizi bir sonraki aşamaya getirmekte.

Öncelikle public klasörü içerisinde bir manifest.json dosyası oluşturalım.

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

/images içerisinde ihtiyacımız olan tüm icon’lar tanımlı. Bu nedenle ekstra bir işlem yapmamız gerekmiyor. Ancak, oluşturduğumuz manifest’i public/index.html dosyasının <head>...</head> etiketleri arasına link ile dahil etmeliyiz.

Manifest tanımının ardından, tarayıcı görüntülenen sayfanın bir PWA olduğunu anlayacak ve buna göre işlemler gerçekleştirecek. Proje klasörü içerisinde service workers için temel bazı tanımlar (install, activate, fetch) yapılmış durumda. Ancak, yeterli değil. index.html içeriğinde (veya entry point olan app.js) serviceWorker tanımının yapılması gerekmekte.

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then((reg) => {
            console.log('Service worker registered.', reg);
          });
      });
    }

Tabi, işlemler bununla sınırlı değil, app.js ve özellikle service-worker.js dosyalarına caching eklemelerinin de yapılması gerekmekte. Tüm bu işlemler için Your First Progressive Web App adımlarını takip edebilir ya da oluşturduğum snippet’lara göz atabilirsiniz: service-worker.js, app.js ve index.html. İşlemlerimiz bu kadar. Chrome menüsü üzerinden uygulamayı bir app olarak telefonunuza, bilgisayarınıza vb. indirebilir ve tıpkı bir uygulama gibi tarayıcı arayüzünden bağımsız bir şekilde görüntüleyebilir / kullanabilirsiniz.

İlgilenebileceğinizi düşündüğüm, farklı framework / library’lerle hazırlanabilecek diğer örnekler için aşağıdaki listeyi kullanabilirsiniz.

Son Olarak

Bir sonraki yazıda, Vue.js ile örnek bir PWA hazırlayacağız. Örnek çerçevesinde PWA’ya dair yayınladığım yazılara dair bazı tekrar anlatımlarım ve notlarım olacak. Ek olarak, aşağıda ayrıca okumak isteyebileceğinizi düşündüğüm bazı bağlantıları iletiyorum.