İleri web uygulaması (İngilizce: Progressive web app), yeni bir yazılım geliştirme metodolojisini ifade etmek için kullanılır. Geleneksel uygulamalar dışında, İleri Web Uygulaması bilinen web sitelerinin ve mobil uygulamaların hibrit halde geliştirilmesi olarak değerlendirilebilir. Bu yeni uygulama yaşam-döngüsü çeşitli özellikleri bir araya getirir ve en modern tarayıcılar tarafından desteklenerek mobil tecrübenin faydalarını kullanıcılara sunabilmektedir.
Genel bakış
2005 yılından bu yana internet, statik web sitelerinden dinamik web sayfalarına Ajax teknolojisi ve responsive web tasarımları sayesinde hızlı bir şekilde gelişti.
Dinamik ve Responsive Web
Web geliştirme teknolojileri statik HTML dokümanlarından dinamik PHP, ASP.NET, Ajax ve çeşitli sunucu ve istemli cihaz bazlı dillere ve kodlara kaydı.
Son olarak, İleri Web Uygulamaları, HTML5, ve JavaScript'in yenilikçi özelliklerinin tanıtılması sayesinde gelişti. Markup(işaretleme dili), styling sheets ve script'lerin bu güçlü birleşimi sayfa unsurları ile kullanıcı etkileşimini, Macromedia Flash olmadan video oynatımına ve oyunların oynanmasına imkân sağladı. (Tüm bunlar sunucuda değil, istemci cihaz üzerinde gerçekleşmektedir.) Yakın zamanda yayınlanan CSS3 ve JavaScript altyapısı tasarım modellerini ve felsefesini değiştirdi; kutu modelini(box model) grids ve flex'ler takip etti, bunları translations, transformations, animasyonlar eşlik etti. Style still'e yeni yaklaşımı internetin sanal katmanını tanımladı.
İnternet tarayıcıları
Bu değişikliklerin hiçbiri bilinen web tecrübesini ciddi şekilde değiştirmeyecektir.
Mobil cihazlar
2007 yılında Apple iPhone piyasaya sundu. Bu cihaz ilk tamamıyla fonksiyonel dokunmatik tecrübeli akıllı telefondu. Web'te gezinti yapma imkânı veren bununla birlikte geniş çeşitlilikte native uygulama kullanıma izin veren, fiyatı makul, kullanışlı bir cihaz fikri hızlıca yayıldı.
Mobil Kullanıcı Tecrübesinin Yükselişi
Uygulamaların popülaritesinin arakasındaki en önemli sebeplerden birisi daha iyi bir kullanıcı tecrübesidir. Native uygulamalar paket bir yapı olarak çalışırken geleneksel web uygulamaları gerçek zamanlı tarayıcıya yüklenir. Tarayıcı ayrıca bir soyutlayıcı olarak sistem donanımı ile web uygulaması arasında yer alır. Paketleniş kaynaklar ve direkt donanıma bağlanma yeteneği native uygulamaların daha performanslı çalışmasını sağlar.
Bir diğer uygulama kategorisi hibrit uygulama olarak adlandırılır, native uygulama özellikleri ile web uygulamaları özellikleri arasında yer alır.
Hibrit uygulamalar native mobil karakteristikliğini sergiler ve Uygulama Mağazalarından indirilmesi, kurulması ve mobil cihazın kısıtlı hafızasının bir kısmını tüketmesini gerektirir. Aynı zamanda mobil cihazın ana ekranında gözükürler.
Hibrit uygulamaların bir kısmı, mobil tarayıcılarda çalışsalarda bir şekilde web'in paylaşılan prensiplerini sağlamazlar:
- URL'leri yoktur yani bağlanılabilir değildir. Eğer web üzerinden bağlanılamıyorsa, web'in bir parçası olamazlar.
- Markup ve styling yapıları arama motorları tarafından bağlanılabilir değildir.
- Kullanıcı arayüzü zenginliği ve sistem yetenekleri ek fonksiyonel çekirdek vasıtasıyla farklıdır.
- Doğası gereği açık kaynaklı olan web'e karşı hibrit uygulamaların kodlarına erişilmez.
İleri Web Uygulamaları
2015 yılında, Google'da Chrome Blink üzerine çalışan bir web developer olan Alex Russell, bir websiteyi çevrimdışı(offline) modda, istenilen kişiselleştirme yeteneğine sahip ve dokunma tecrübesi ile çalışıyor haldeki bir mobil uygulamaya dönüştürdü.
Alex, Uygulama mağazalarındaki web uygulamalarının paketleme ve yayınlama süreçini, web sitesini doğru içerik ile mobil yetenekli web uygulaması haline dönüştürerek ortadan kaldırdı. Yapıya yeni özellikleri devamlı ekleyerek geliştirmesini sürdürdü, bunlardan bazıları kişiselleştirme, ana sayfaya konumlandırma, bildirimler yetisi, çevrimdışı(offline) çalışma yapısı ve dokunma teknolojisi desteği gibi.
Bu sayede, geleneksel web uygulamalarının ve bununla birlikte çoklu platform(cross-platform) mobil uygulamaların sahip oldukları kısıtlamaları bir bir bu geliştirmeyi websitesi üzerinde geliştirerek aştır.
İleri web uygulamaları, web teknolojisi avantajları ile mobil native uygulama kullanıcı tecrübesini birleştirmek adına yeni bir trend ve umut oldu.
Karakteristiği
Google geliştiricilerine göre ileri web uygulamaları:
- Progressive - Tarayıcının ne olduğu önemli olmadan tüm kullanıcılarda çalışır.
- Responsive - Tüm formlara uygundur: Masaüstü, mobil, tablet ve kullanılacak yeni formlarda.
- Bağlantı bağımsız(Connectivity independent) - Çevrimdışı modda ya da düşük kaliteli network'te çalışılabilirlik.
- Native görünümü(App-like) - Native mobil uygulama gibi gözüken web uygulamaları üretmesi.
- Güncel - Service worker yapısı sayesinde her zaman güncellenir.
- Güvenilir - HTTPS üzerinden hizmet verdiği için verinin gözlemlenmesi ya da bozulmasına izin vermez.
- Keşfedilebilir - W3C manifest yapısı sayesinde uygulama olarak tanımlanabilme özelliği vardır. Service worker kayıt olma yapısı arama motorlarının onları bulmasına izin verir.
- Tekrar ulaşılabilir (Re-engageable) - Müşteri ile etkileşim mobil uygulama bildirimleri(push notification) desteği sayesinde mümkündür.
- Kurulabilir - Uygulama Mağazalarının yükleme ve kullanım zorluğu olmadan direkt ana sayfada uygulamanın yer almasını sağlanır.
- Bağlanılabilir - Karmaşık yükleme süreçi olmadan basit bir şekilde URL ile paylaşılabilirliği.
Teknolojisi
İleri web uygulamaları konsepti, web ve mobil yazılım geliştirme teknolojilerinin gelişiminin ortaya çıkardığı bir sonuç olması sebebi ile birkaç teknolojiyi kapsar:
- HTML5, CSS3, JavaScript, Media Queries ve jQuery Responsive Web Tasarımı teknolojileri
- Transport Layer Security (TLS) ile üst düzey güvenlik
- Web Manifest ya da Extensible Web Manifesto teknolojisi native uygulama tecrübesi üretmek için
- Servis workers çevrimdışı modda arka plan kodlarının işlenmesi için
- Application Shell Architecture içeriğin dinamik yüklenmesi ve hızlı bir şekilde uygulamanın yüklenmesi için
Manifest
W3C'nin JSON tabanlı bir tanımlamasıdır. Geliştiricilere web uygulaması ile ilgili metadata'ları koyabildiği merkezi bir yer oluşturur. Şunları içerir:
- Web uygulamasının ismi
- Web uygulaması iconları ve resim objeleri linkleri
- Web uygulamasını açmak ve başlatmak için tercih edilen URL bilgisi
- Web uygulamasının bir dizi karakteristikliği için konfigürasyon verileri
- Varsayılan web uygulaması oryantasyon(orientation) tanımlaması
- Tam ekran gibi görünüş modunun tanımlanması
Geliştiriciler web manifest dosyasındaki metadalar değiştirilerek uç kullanıcı arayüzünde kusursuz native uygulama tecrübesini İleri Web Uygulaması(Progressive Web App) sayesinde elde edebilmektedir.
Service Workers
Native uygulamalar, kullanıcı tecrübesi daha zengin ve performanslı çalışırlar. Bunun sebebi gerekli olan içeriğin, bileşenlerin ve kaynakların uygulamanın Uygulama Mağazalarından indirilme süresince cihazın hafızasına konumlandırılmış olmasıdır.
Buna karşın, geleneksel web uygulamaları güvenilmez web bağlantı hızları ve yükleme kısıtları sebebi ile problem yaşar. Tüm bunların üzerinden gelebilmek amacıyla Service Worker yapısı Web Worker yapısı gözetilerek tasarlandı ve kusursuz yükleme tecrübesini sunmaktadır.
Teknik olarak, Servis Worker web tarayıcılarında HTTP ve web taleplerini programlı bir şekilde yönetebilmek amacıyla kodlanabilir vekil(proxy) bir network yapısı sunmaktadır. Service Worker network ile cihazın arasında yer alır ve içeriğin taşınmasını sağlar. Cache'leme mekanizmasını verimli ve hatasız bir şekilde çevrimdışı modda sunabilme yeteneğine sahiptir.
Uygulama Kabuk Mimarisi(Application Shell Architecture)
Uygulamanın arayüzlerinin ve içeriğinin hızlı bir şekilde yüklenmesi amacıyla servis worker responsive web uygulamasının basit kullanıcı arayüzlerini saklar. Bahsedilen basit kullanıcı arayüzleri terimi uygulamanın kabuğu(shell) olarak ifade edilir.
Bu kabuk başlangıç statik çerçevesini(frame), sayfa düzenini ya da içeriğin adım adım ve bununla birlikte dinamik bir şekilde yüklenmesini sağlayan bir mimari sağlar. Teknik olarak, kabuk paketlenmiş bir koddur ve mobil cihazın tarayıcısının cache'inde tutulur. Bu sebeple, farklı bağlantı hızlarında uygulamanın içeriği yüklenme sırasında kabuk yapı kullanıcı ile ilk etkileşimi yapar. Kullanıcı boş bir ekranın yüklenmesini beklemeden ilk etkileşim olarak bir ekran ile karşılaşmış olur.
Bu tip web uygulamalarının en büyük güçü kullanıcıya sağlam bir mobil tecrübeyi harika bir web teknolojisi ile kullandırmasıdır.
Bu tip web uygulamaları henüz sadece Chrome tarayıcıları tarafından desteklenmektedir. Ancak yakın gelecekte tüm tarayıcılar tarafından desteklenebilir.
Kaynakça
- Bu makalenin çoğu Wikipedia'nın Progressive Web App İngilizce makalesinden 9 Ocak 2017 tarihinde Wayback Machine sitesinde arşivlendi. (09 Ekim 2016) alınmadır.
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
Ileri web uygulamasi Ingilizce Progressive web app yeni bir yazilim gelistirme metodolojisini ifade etmek icin kullanilir Geleneksel uygulamalar disinda Ileri Web Uygulamasi bilinen web sitelerinin ve mobil uygulamalarin hibrit halde gelistirilmesi olarak degerlendirilebilir Bu yeni uygulama yasam dongusu cesitli ozellikleri bir araya getirir ve en modern tarayicilar tarafindan desteklenerek mobil tecrubenin faydalarini kullanicilara sunabilmektedir Genel bakis2005 yilindan bu yana internet statik web sitelerinden dinamik web sayfalarina Ajax teknolojisi ve responsive web tasarimlari sayesinde hizli bir sekilde gelisti Dinamik ve Responsive Web Web gelistirme teknolojileri statik HTML dokumanlarindan dinamik PHP ASP NET Ajax ve cesitli sunucu ve istemli cihaz bazli dillere ve kodlara kaydi Son olarak Ileri Web Uygulamalari HTML5 ve JavaScript in yenilikci ozelliklerinin tanitilmasi sayesinde gelisti Markup isaretleme dili styling sheets ve script lerin bu guclu birlesimi sayfa unsurlari ile kullanici etkilesimini Macromedia Flash olmadan video oynatimina ve oyunlarin oynanmasina imkan sagladi Tum bunlar sunucuda degil istemci cihaz uzerinde gerceklesmektedir Yakin zamanda yayinlanan CSS3 ve JavaScript altyapisi tasarim modellerini ve felsefesini degistirdi kutu modelini box model grids ve flex ler takip etti bunlari translations transformations animasyonlar eslik etti Style still e yeni yaklasimi internetin sanal katmanini tanimladi Internet tarayicilari Bu degisikliklerin hicbiri bilinen web tecrubesini ciddi sekilde degistirmeyecektir Mobil cihazlar 2007 yilinda Apple iPhone piyasaya sundu Bu cihaz ilk tamamiyla fonksiyonel dokunmatik tecrubeli akilli telefondu Web te gezinti yapma imkani veren bununla birlikte genis cesitlilikte native uygulama kullanima izin veren fiyati makul kullanisli bir cihaz fikri hizlica yayildi Mobil Kullanici Tecrubesinin Yukselisi Uygulamalarin popularitesinin arakasindaki en onemli sebeplerden birisi daha iyi bir kullanici tecrubesidir Native uygulamalar paket bir yapi olarak calisirken geleneksel web uygulamalari gercek zamanli tarayiciya yuklenir Tarayici ayrica bir soyutlayici olarak sistem donanimi ile web uygulamasi arasinda yer alir Paketlenis kaynaklar ve direkt donanima baglanma yetenegi native uygulamalarin daha performansli calismasini saglar Bir diger uygulama kategorisi hibrit uygulama olarak adlandirilir native uygulama ozellikleri ile web uygulamalari ozellikleri arasinda yer alir Hibrit uygulamalar native mobil karakteristikligini sergiler ve Uygulama Magazalarindan indirilmesi kurulmasi ve mobil cihazin kisitli hafizasinin bir kismini tuketmesini gerektirir Ayni zamanda mobil cihazin ana ekraninda gozukurler Hibrit uygulamalarin bir kismi mobil tarayicilarda calissalarda bir sekilde web in paylasilan prensiplerini saglamazlar URL leri yoktur yani baglanilabilir degildir Eger web uzerinden baglanilamiyorsa web in bir parcasi olamazlar Markup ve styling yapilari arama motorlari tarafindan baglanilabilir degildir Kullanici arayuzu zenginligi ve sistem yetenekleri ek fonksiyonel cekirdek vasitasiyla farklidir Dogasi geregi acik kaynakli olan web e karsi hibrit uygulamalarin kodlarina erisilmez Ileri Web Uygulamalari2015 yilinda Google da Chrome Blink uzerine calisan bir web developer olan Alex Russell bir websiteyi cevrimdisi offline modda istenilen kisisellestirme yetenegine sahip ve dokunma tecrubesi ile calisiyor haldeki bir mobil uygulamaya donusturdu Alex Uygulama magazalarindaki web uygulamalarinin paketleme ve yayinlama surecini web sitesini dogru icerik ile mobil yetenekli web uygulamasi haline donusturerek ortadan kaldirdi Yapiya yeni ozellikleri devamli ekleyerek gelistirmesini surdurdu bunlardan bazilari kisisellestirme ana sayfaya konumlandirma bildirimler yetisi cevrimdisi offline calisma yapisi ve dokunma teknolojisi destegi gibi Bu sayede geleneksel web uygulamalarinin ve bununla birlikte coklu platform cross platform mobil uygulamalarin sahip olduklari kisitlamalari bir bir bu gelistirmeyi websitesi uzerinde gelistirerek astir Ileri web uygulamalari web teknolojisi avantajlari ile mobil native uygulama kullanici tecrubesini birlestirmek adina yeni bir trend ve umut oldu KarakteristigiGoogle gelistiricilerine gore ileri web uygulamalari Progressive Tarayicinin ne oldugu onemli olmadan tum kullanicilarda calisir Responsive Tum formlara uygundur Masaustu mobil tablet ve kullanilacak yeni formlarda Baglanti bagimsiz Connectivity independent Cevrimdisi modda ya da dusuk kaliteli network te calisilabilirlik Native gorunumu App like Native mobil uygulama gibi gozuken web uygulamalari uretmesi Guncel Service worker yapisi sayesinde her zaman guncellenir Guvenilir HTTPS uzerinden hizmet verdigi icin verinin gozlemlenmesi ya da bozulmasina izin vermez Kesfedilebilir W3C manifest yapisi sayesinde uygulama olarak tanimlanabilme ozelligi vardir Service worker kayit olma yapisi arama motorlarinin onlari bulmasina izin verir Tekrar ulasilabilir Re engageable Musteri ile etkilesim mobil uygulama bildirimleri push notification destegi sayesinde mumkundur Kurulabilir Uygulama Magazalarinin yukleme ve kullanim zorlugu olmadan direkt ana sayfada uygulamanin yer almasini saglanir Baglanilabilir Karmasik yukleme sureci olmadan basit bir sekilde URL ile paylasilabilirligi TeknolojisiIleri web uygulamalari konsepti web ve mobil yazilim gelistirme teknolojilerinin gelisiminin ortaya cikardigi bir sonuc olmasi sebebi ile birkac teknolojiyi kapsar HTML5 CSS3 JavaScript Media Queries ve jQuery Responsive Web Tasarimi teknolojileri Transport Layer Security TLS ile ust duzey guvenlik Web Manifest ya da Extensible Web Manifesto teknolojisi native uygulama tecrubesi uretmek icin Servis workers cevrimdisi modda arka plan kodlarinin islenmesi icin Application Shell Architecture icerigin dinamik yuklenmesi ve hizli bir sekilde uygulamanin yuklenmesi icinManifestW3C nin JSON tabanli bir tanimlamasidir Gelistiricilere web uygulamasi ile ilgili metadata lari koyabildigi merkezi bir yer olusturur Sunlari icerir Web uygulamasinin ismi Web uygulamasi iconlari ve resim objeleri linkleri Web uygulamasini acmak ve baslatmak icin tercih edilen URL bilgisi Web uygulamasinin bir dizi karakteristikligi icin konfigurasyon verileri Varsayilan web uygulamasi oryantasyon orientation tanimlamasi Tam ekran gibi gorunus modunun tanimlanmasi Gelistiriciler web manifest dosyasindaki metadalar degistirilerek uc kullanici arayuzunde kusursuz native uygulama tecrubesini Ileri Web Uygulamasi Progressive Web App sayesinde elde edebilmektedir Service WorkersNative uygulamalar kullanici tecrubesi daha zengin ve performansli calisirlar Bunun sebebi gerekli olan icerigin bilesenlerin ve kaynaklarin uygulamanin Uygulama Magazalarindan indirilme suresince cihazin hafizasina konumlandirilmis olmasidir Buna karsin geleneksel web uygulamalari guvenilmez web baglanti hizlari ve yukleme kisitlari sebebi ile problem yasar Tum bunlarin uzerinden gelebilmek amaciyla Service Worker yapisi Web Worker yapisi gozetilerek tasarlandi ve kusursuz yukleme tecrubesini sunmaktadir Teknik olarak Servis Worker web tarayicilarinda HTTP ve web taleplerini programli bir sekilde yonetebilmek amaciyla kodlanabilir vekil proxy bir network yapisi sunmaktadir Service Worker network ile cihazin arasinda yer alir ve icerigin tasinmasini saglar Cache leme mekanizmasini verimli ve hatasiz bir sekilde cevrimdisi modda sunabilme yetenegine sahiptir Uygulama Kabuk Mimarisi Application Shell Architecture Uygulamanin arayuzlerinin ve iceriginin hizli bir sekilde yuklenmesi amaciyla servis worker responsive web uygulamasinin basit kullanici arayuzlerini saklar Bahsedilen basit kullanici arayuzleri terimi uygulamanin kabugu shell olarak ifade edilir Bu kabuk baslangic statik cercevesini frame sayfa duzenini ya da icerigin adim adim ve bununla birlikte dinamik bir sekilde yuklenmesini saglayan bir mimari saglar Teknik olarak kabuk paketlenmis bir koddur ve mobil cihazin tarayicisinin cache inde tutulur Bu sebeple farkli baglanti hizlarinda uygulamanin icerigi yuklenme sirasinda kabuk yapi kullanici ile ilk etkilesimi yapar Kullanici bos bir ekranin yuklenmesini beklemeden ilk etkilesim olarak bir ekran ile karsilasmis olur Bu tip web uygulamalarinin en buyuk gucu kullaniciya saglam bir mobil tecrubeyi harika bir web teknolojisi ile kullandirmasidir Bu tip web uygulamalari henuz sadece Chrome tarayicilari tarafindan desteklenmektedir Ancak yakin gelecekte tum tarayicilar tarafindan desteklenebilir Kaynakca ardalis Ortak istemci tarafi web teknolojileri docs microsoft com 25 Mart 2021 tarihinde kaynagindan Erisim tarihi 3 Mart 2021 Arsivlenmis kopya 25 Mart 2021 tarihinde kaynagindan Erisim tarihi 3 Mart 2021 Bu makalenin cogu Wikipedia nin Progressive Web App Ingilizce makalesinden 9 Ocak 2017 tarihinde Wayback Machine sitesinde arsivlendi 09 Ekim 2016 alinmadir dd