pwa-nedir-pwa-yapma

Progressive Web App, bir websitenin uygulama benzeri özelliklerine sahip türüdür. Peki belli başlık özellikleri nelerdir?

  • Öncelikle çevrimdışı olarak kullanabilirsiniz, kullanıcının interneti olmadığı anlarda dâhi PWA sayesinde websitenizdeki faydalı bilgileri görüntüleyebilir.
  • Ana ekranda ikona sahip olması, bazı tarayıcılarla ana ekrana kısayol ekleyebildiğiniz zaman ikon değiştiremezsiniz ama PWA bunu sağlayabiliyor.
  • Responsive olması, ekranın mükemmel oranda dolmasını sağladığı için web siteleriniz mobil ve tablet uyumlu olması gerekiyor.
  • Push notification desteğine sahip olması ile uygulama çalışmasa bile bildirim alabiliyor, elbette herkes için değil yalnızca onay veren kişilerde bildirim gözüküyor.

Web App Manifest

Basit bir Web App manifest dosyası örneği oluşturdum.

{
  "name": "Burak Sakallı Kişisel Blog",
  "short_name": "BS",
  "icons": [
      {
        "src": "brk144",
        "type": "image/PNG",
        "sizes": "144x144"
      }
],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#282828"
}
  • name: PWA açılırken görüntülenecek metin
  • short_name: Tarayıcılarda “Ana ekrana kısayol ekle” metoduyla eklenirken görüntülenecek metin, ayrıca ana ekranda bu metin ile görüntülenir.
  • icons: PWA açılırken name’in üzerinde görünecek ikonlar ve ayrıca uygulamanın ana ekrandaki ikonu
  • display: standalone olduğu zaman uygulama gibi duruyor, adres çubuğu bulunmuyor. Diğer seçenek ise “browser” bunda ise adres çubuğu bulunuyor.
  • background_color: Açılış ekranının arkaplan rengi
  • theme_color: Eğer display:browser şeklinde kullanırsanız adres çubuğunun rengini ayarlamanıza yarıyor.

Daha sonrasında yazmış olduğunuz manifest dosyanızı “manifest.json” şeklinde kaydedip web sitenizde;

<link rel="manifest" href="manifest.json">

şeklinde çağırmalısınız.

İlerleyen zamanlarda Push notification özelliği ile bildirim göndereceğiz.

Bir Cevap Yazın