Merhaba TürkHackTeam Üyeleri.
Bu Konumda Sizlere PWA'nın Ne Olduğunu Anlatacağım.
Konu İçeriği
➤ Progressive Web Nedir?
➤ Progressive Web Nasıl Çalışır?
➤ Progressive Web Geliştirmek İçin Framework Gerekirmi?
Progressive Web Nedir?
PWA yani Progressive Web App en genel tanımı ile web sitelerin görüntüsünü mobil uygulamalara benzeyen bir forma bürüyen uygulamalardır. Kullanıcıya bir mobil uygulama kullanıyor deneyimi yaşatan bu uygulamaların en önemli özelliği, web sitenin çevirim dışı çalışmasını sağlaması oluyor. Bu özelliği sayesinde internet bağlantısı olmadan da web sitesine girilebiliyor ve sitede çeşitli işlemler yapılabiliyor.
Kullanıcıların hızlı bir şekilde erişim sağlayabilmesi için mobil cihazların ana ekranında ikonu bulunur. Ayrıca responsive sitelerin ekranı harika bir şekilde doldurmasını sağlayan PWA şayet Push Notification özelliği kullanılırsa uygulama açık olmadığında da bildirim gönderilebiliyor. Chrome alt yapısı ile uygulamayı beğenenler link gönderimi yaparak uygulamayı paylaşabiliyor. Bundan daha da önemlisi bir kurulum yapmaya gerek olmadan sadece linke tıklayarak uygulamanın kullanılması mümkün oluyor. Tüm bu özellikler sayesinde PWA gün geçtikçe daha fazla ilgi görmeye başladı.
Progressive Web Nasıl Çalışır?
PWAnın çalışması için web sitenin PWA olarak tasarlanmış olması gerekiyor. Chrome tarayıcıyla web sitesine mobil üzerinden girildiğinde tarayıcı uygulamayı kısayol şeklinde ana ekrana eklemek isteyip istemediğini kullanıcıya sunuyor. Kullanıcı kabul ettiğinde telefon ekranını kaplıyor ve bir mobil uygulama gibi web sitenin çalışmasını sağlıyor. Elbette bir web sayfası çalışıyor ancak kullanıcı deneyimi bakımından bir mobil uygulama izlenimi veriyor. Web site içeriğinin mobil cihaza yüklenmesini sağlayan ise uygulamanın Service Worker özelliği oluyor. Telefonun internet bağlantısı olmadığında da çevirim dışı olarak tüm içeriklere ulaşılabiliyor.
PWA olarak web sitenin çalışması için manifest dosyasına gereksinim oluyor. Bu dosya içerisinde ad ya da ikon gibi çeşitli özel bilgiler bulunuyor. PWAda alanlara dair de şu bilgileri sizlerle paylaşabiliriz.
Name: PWAnın açılması durumunda hangi metinin görüleceği bölüm.
Short Name: Ana ekrana kısa yol ekle formunda tarayıcıya eklenirken görüntülenecek olan metin.
Icons: Name üzerinde görünecek olan ikonlar ve uygulamanın ana ekranda mevcut olan ikonunu kapsayan bölüm.
Display: Standlone kullanıldığında uygulama içerisinde adres çubuğu olmuyor. Adrs çubuğu Browser seçeneğinde yer alıyor.
Background Color: Açılış ekranının arka planında bulunan renktir.
Theme Color: Displayin browser şeklinde kullanılması durumunda adres çubuğunun rengini ayarlamayı sağlıyor.
Uygulamanın PWA olarak çalışması için: Öncelikle web sitenin tüm sayfalarının responsive olarak tasarlanmış olması gerektiğini belirtmek lazım. HTML içeriğinde manifest dosyasını linklemek gerekiyor. Ardından uygulama PWA olarak tanınıyor. Linklemenin de şu şekilde yapılması gerekiyor:
Uygulamanın PWA olarak çalışması için linkleme yapmak ilk aşamadır. Bu aşama manifest dosyasının tarayıcıda PWA olarak tanınması için gerekiyor. Uygulamanın HTTPS üzerinden de çalışması için uygulamanın her sayfasının kendine ait bir URLsinin olması gerektiğini de unutmamak lazım.
Progressive Web Geliştirmek İçin Framework Gerekirmi?
En çok merak edilen hususların başında, uygulamayı PWA yapabilmek için framework ya da kütüphane gerekip gerekmediği oluyor. Hayır, bunlara asla ihtiyacınız olmuyor. HTML, CSS ve JavaScript bilgisine sahipseniz bu uygulamayı rahatlıkla oluşturabilirsiniz. Bununla birlikte Google tarafından sunulan bazı araçlar ile PWA uygulamasını yazmak ve testlerini yapmak mümkün olabiliyor.
//Alıntıdır
Okuduğunuz İçin Teşekkür Ederim.
Esenlikle Kalın..
Saygılarımla:Smiley1021:
Moderatör tarafında düzenlendi:
