PWA (Progressive Web Apps) Nedir?

Son birkaç yılda cep telefonu kullanıcı sayısında bilgisayar kullanımlarına göre iki kat artış oldu ve bugün toplam internet kullanımının % 60’ından fazlası masaüstü bilgisayara ihtiyaç duymadan mobil telefonlar ile benzer deneyimler yaşayabiliyor.

En belirgin nedenleri arasında ;

  • Ucuz donanım,
  • İnternete kolay erişim,
  • Taşınabilirlik,
  • İnternette artan hizmet sayısı.

PWA Nedir?

PWA, daha iyi bir deneyim yaratmak için hem web sitelerinin hem de cep telefonlarının uygulamalarının güçlü özelliklerinden yararlanarak ortaya çıkan yeni bir çözümdür.

Progressive Web Apps , web sitelerinin mobil uygulama gibi kullanılmasını sağlayan bir teknolojidir. Yani bu şekilde tasarlanan web sitelerini mobil tarayıcıdan girdiğimizde, sanki bir web sitesini değilde bir mobil uygulamayı kullanıyormuş gibi bir deneyim yaşarsınız.

 JavaScript ile Service Worker üzerinde yapılan düzenlemelerle, mobil cihazınızın bir çok özelliğine erişebilmenize olanak sağlar.

PWA’nın temel özelliklerinden bazıları şunlardır:

  • Çevrimdışı çalışabilir
  • Geliştirilmiş güvenlik
  • Bilgiler her zaman günceldir
  • URL olmadan tam ekran kullanıcı deneyimi
  • Hızlı yükleme
  • Açılış ekranına sahip
  • Mikrofon,kamera gibi donanımlara erişim
  • Anlık bildirimler mevcuttur
  • Güvenilirdir (HTTPS kullanmak zorunludur.)

Zayıf yönleri ise şunlardır:

  • Cihazların bazı donanım bileşenlerine sınırlı erişim
  • Kullanıcılar için “özel” içerik konusunda çok az esneklik
  • PWA’ nın bütün özelliklerini her cihaz desteklemez
  • iOS desteği 11.3 sürümünden itibaren
  • Cihaz pilinin daha fazla kullanılması
  • Çevrimdışı yürütme desteği sınırlıdır
  • Mağazalarda bulunmaması
  • Bir kontrol organı ve bir onay süreci yoktur (mağazalar gibi)

Bir PWA’nın Teknik bileşenleri nelerdir?

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.

Genel olarak ne olduklarına bakalım…

1- Service Worker

Bir web uygulaması doğrudan ağla konuşur ve eğer ağ yoksa işlemi optimize etmek için bir fırsat. İlk kez yükleme için, servis çalışanı gerekli kaynakları tarayıcı önbelleğinde (cache) depolar. Kullanıcı bir dahaki sefere uygulamayı ziyaret ettiğinde, servis çalışanları önbelleği kontrol eder ve ağı kontrol etmeden önce kullanıcıya yanıtı döndürür.

  • Service Worker, tarayıcı ve ağ arasında bir proxy (internet’e erişim sırasında kullanılan ara sunucu) olarak çalışır.
  • Javascript ile yazılmış bir script’tir.
  • Kullanabilmek için uygulamanın bulunduğu serverda HTTPS kurulu olmalıdır.
  • push bildirimlerini yönetir ve tarayıcının önbellek API’sını kullanarak çevrimdışı ilk web uygulamasını oluşturmaya yardımcı olur .
  • Arkaplanda senkronizasyon yapar.Yani internet olmadığında yollamaya çalıştığımız veriyi saklar ve internet olduğunda o veriyi yollar.

2- Manifest

İçerisinde uygulamaya dair bilgiler içeren; ana ekranda görüntülenecek simge, arka plan rengi ,uygulamanın kısa adı veya teması gibi uygulamanızın bilgilerini içeren JSON formatlı bir dosyadır.

Örnek bir manifest.json dosyası ;

{
  "short_name": "Kodhanesi",
  "name": "kodlamaya dair hersey Kodhanesi",
  "icons": [
    {
      "src": "/images/icons/icon-195x195.png",
      "type": "image/png",
      "sizes": "195x195"
    },
    {
      "src": "/images/icons/icon-130x130.png",
      "type": "image/png",
      "sizes": "130x130"
    }
  ],
  “start_url”: “/”,
  "background_color": "#3367D6",
  "display": "standalone",
  “Scope”: “/”,
  "theme_color": "#3367D6"
}

Bu manifest dosyasını kendimiz yazabiliriz veya bizim için bir tane oluşturmak için hazır araçları kullanabiliriz .

3- HTTPS

HTTPS’in açılımı “Secure Hypertext Transfer Protocol” yani ‘Güvenli Metin Aktarma İletişim Protokolü’dür ve PWA için olmazsa olmaz bir bileşendir.Google dokümanlarında da HTTPS kullanımının zorunluluğu belirtilmiştir.

SSL (Güvenli Soket Katmanı): HTTP protokolüne SSL protokolü eklenmesi ile oluşmaktadır.Bu protokol neredeyse zorunlu hale gelmiştir ve  amacı sunucular arasında güvenli bir bağlantı kurmaktır.

Umarım yardımcı olmuştur 🙂 sorunuz olursa yorum kısmına yazabilirsiniz.

4 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir