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.
PHP- Kodu
​{
"short_name": "Spinner",
"name": "Fidget spinner",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/home/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/home/",
"theme_color": "#3367D6"
}
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.