• Twitter
  • Instagram
  • slack-icon-black_edited_edited_edited
  • development_düzenlendi_düzenlendi
  • Gri LinkedIn Simge

© 2020 by mobiler.dev

Progressive Web App (PWA)

Progressive Web App, internete erişimi olan kullanıcıların internet deneyimlerini iyileştirmek ve kolaylaştırmak için Google tarafından geliştirilen bir teknolojidir. Kısaca, PWA olarak adlandırılan bu yeni nesil teknoloji Google’nin daha önce kullanıma sunduğu AMP‘nin daha da gelişmiş hali diyebiliriz.


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ı.


Görsel Referansı


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.


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.


AMP Ne İşe Yarar?


Google, mobil cihaz kullanıcıların deneyimlerini iyileştirmek, onlara benzersiz bir mobil kullanım deneyim yaşatmak için birçok teknoloji geliştirmekte.


Bunun ilk örneği AMP (Accelerated Mobile Pages) teknolojisi olmuştur. Hızlandırılmış mobil sayfalar teknolojisi sayesinde bir internet sitesinin mobil cihazlarda çok daha hızlı çalışmasına, kullanıcının isteklerine çok daha hızlı cevap vermesiyle büyük bir yenilik getirmişti.


Görsel Referansı


Google bununla kalmayıp, yapmış olduğu arama motoru ve Google Chrome tarayıcısı güncellemeleriyle internet sitelerine AMP kullanmaları gerektiği konusunda teşvikler ve fırsatlar sundu. AMP kullanan internet sitelerin AMP kullanmayan rakip sitelere oranla arama sonuçlarında daha iyi bir konumda yer alacaklarını duyuran Google, AMP teknolojisinin yayılmasını bu sayede sağlamış oldu. AMP hayatımıza kısa bir süre önce girmiş olmasına rağmen Google yine yerinde duramayıp, AMP teknolojisini bir adım ileriye götürerek PWA teknolojisini geliştirdi.


PWA Özellikleri Nelerdir?


Yukarıda bahsi geçen anlatımı biraz özetleyelim 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 Nasıl Çalışır?


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/ya 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.


Eğer konuyla ilgili kapsamlı bilgi almak isterseniz aşağıda bulunan linkteki yazıyı okuyabilirsiniz.

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0


#pwa #progressivewebapp #amp


68 görüntüleme