{"id":372,"date":"2018-11-01T19:12:48","date_gmt":"2018-11-01T16:12:48","guid":{"rendered":"http:\/\/blog.okanacar.com.tr\/?p=372"},"modified":"2021-01-16T22:28:42","modified_gmt":"2021-01-16T19:28:42","slug":"progressive-web-apps-pwa-nedir","status":"publish","type":"post","link":"https:\/\/okanacar.com.tr\/blog\/?p=372","title":{"rendered":"Progressive Web Apps (PWA) Nedir?"},"content":{"rendered":"\n<p><strong>Progressive Web App<\/strong>, web sitelerinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve kullan\u0131c\u0131 deneyimini, mobil uygulamalarla benzer seviyeye getirilen uygulamalara verilen isimdir. Yani bu yakla\u015f\u0131mla tasarlanan web sitelerini mobil taray\u0131c\u0131dan ziyaret etti\u011finizde, sanki bir web sitesini de\u011fil bir mobil uygulamay\u0131 kullan\u0131yormu\u015f gibi bir deneyim ya\u015fars\u0131n\u0131z. Progressive Web App\u2019\u0131n ba\u015fl\u0131ca \u00f6zelliklerinden bahsetmek gerekirse;<\/p>\n\n\n\n<ul><li>Web sitenizin \u00e7evrimd\u0131\u015f\u0131 olarak \u00e7al\u0131\u015fabilmesini sa\u011flar, kullan\u0131c\u0131 internet ba\u011flant\u0131s\u0131 olmad\u0131\u011f\u0131 anlarda bile PWA sayesinde web sitenizde gezinebilir.<\/li><li>Mobil cihazlar\u0131n ana ekran\u0131na kendi ikonunu ekleyerek mobil bir uygulama gibi kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131 eri\u015fim yapmas\u0131n\u0131 sa\u011flar.<\/li><li>Web siteniz responsive \u00f6zellikte ise PWA\u2019da bu \u00f6zelli\u011fi koruyarak ekran\u0131n m\u00fckemmel oranda dolmas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131lar\u0131n\u0131za daha keyifli okuma, gezinme imk\u00e2n\u0131 sunar.<\/li><li>Push Notification \u00f6zelli\u011fi sayesinde uygulama a\u00e7\u0131k olmasa bile onay veren kullan\u0131c\u0131lara bildirim g\u00f6nderebilirsiniz.<\/li><li>Chrome alt yap\u0131s\u0131 ile geli\u015fmi\u015f bir destek ve hizmet sunmaktad\u0131r.<\/li><li>Uygulamay\u0131 kullanan ve be\u011fenen bir ki\u015fi arkada\u015f\u0131na sadece linki g\u00f6ndererek uygulamay\u0131 payla\u015fabilir. Kar\u015f\u0131 taraf\u0131n bir kurulum yapmas\u0131na gerek kalmaz, linke t\u0131klad\u0131\u011f\u0131nda uygulamay\u0131 kullanmaya ba\u015flar.<\/li><li>Uygulaman\u0131z g\u00fcncellendi\u011finde mobil cihazlardan otomatik olarak g\u00fcncel uygulama kullan\u0131lmaya ba\u015flan\u0131r.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Progressive Web App Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n\n\n\n<p>PWA olarak tasarlanm\u0131\u015f bir web sitesine mobil cihaz\u0131n\u0131zdaki g\u00fcncel bir&nbsp;<strong>Chrome<\/strong>&nbsp;taray\u0131c\u0131yla girdi\u011finizde, taray\u0131c\u0131 bu uygulamay\u0131 k\u0131sayol olarak ana ekran\u0131n\u0131za eklemek ister misiniz diye soruyor. E\u011fer kabul ederseniz web sitesi art\u0131k telefonunuzun ekran\u0131n\u0131n tamam\u0131n\u0131 kapl\u0131yor ve normal bir mobile uygulama gibi \u00e7al\u0131\u015fmaya ba\u015fl\u0131yor. Tabii ki burada \u00e7al\u0131\u015fan yine bir web sayfas\u0131, ancak gerek tasar\u0131msal gerekse kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan do\u011fru dizayn edilmi\u015f bir PWA\u2019da bunu farketmeniz \u00e7ok zor oluyor.<\/p>\n\n\n\n<p>PWA\u2019n\u0131n \u00f6nemli bile\u015feni&nbsp;<strong>Service Worker<\/strong>&nbsp;ise web site i\u00e7eri\u011finin mobil cihaza y\u00fcklenmesini sa\u011flar. B\u00f6ylece telefonunuz internete ba\u011fl\u0131 olmasa bile uygulamay\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda siz telefona aktar\u0131lan t\u00fcm i\u00e7eri\u011fi ziyaret edebilirsiniz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"460\" src=\"http:\/\/blog.okanacar.com.tr\/wp-content\/uploads\/2018\/11\/progressive-web-apps-1.png\" alt=\"\" class=\"wp-image-373\" srcset=\"https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/11\/progressive-web-apps-1.png 800w, https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/11\/progressive-web-apps-1-600x345.png 600w, https:\/\/okanacar.com.tr\/blog\/wp-content\/uploads\/2018\/11\/progressive-web-apps-1-768x442.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Web sitenizin taray\u0131c\u0131 taraf\u0131ndan PWA olarak alg\u0131lanmas\u0131 i\u00e7in, uygulaman\u0131z\u0131n \u00f6zel bir manifest dosyas\u0131na ihtiyac\u0131 vard\u0131r. Bu dosyada uygulamaya ait \u00f6zel bilgiler(ad, ikon gibi) yer al\u0131r. A\u015fa\u011f\u0131da \u00f6rnek bir Web App Manifest dosyas\u0131n\u0131n i\u00e7eri\u011fini g\u00f6rebilirsiniz.<\/p>\n\n\n\n<pre class=\"wp-block-code lang:xhtml decode:true\"><code lang=\"json\" class=\"language-json\">{\n   \"name\": \"Okan ACAR - Front-end Developer\",\n   \"short_name\": \"OkanACAR\",\n   \"icons\": [\n      {\n         \"src\": \"okanacar.png\",\n         \"type\": \"image\/PNG\",\n         \"sizes\": \"144x144\"\n      }\n   ],\n\n   \"start_url\": \"\/\",\n   \"display\": \"standalone\",\n   \"background_color\": \"#ffffff\",\n   \"theme_color\": \"#ffd93e\"\n}<\/code><\/pre>\n\n\n\n<p>Alanlar\u0131 a\u00e7\u0131klamak gerekirse;<\/p>\n\n\n\n<ul><li><strong>name<\/strong>: PWA a\u00e7\u0131l\u0131rken g\u00f6r\u00fcnt\u00fclenecek metin<\/li><li><strong>short_name<\/strong>: Taray\u0131c\u0131larda \u201cAna ekrana k\u0131sayol ekle\u201d metoduyla eklenirken g\u00f6r\u00fcnt\u00fclenecek metin, ayr\u0131ca ana ekranda bu metin ile g\u00f6r\u00fcnt\u00fclenir.<\/li><li><strong>icons<\/strong>: PWA a\u00e7\u0131l\u0131rken name\u2019in \u00fczerinde g\u00f6r\u00fcnecek ikonlar ve ayr\u0131ca uygulaman\u0131n ana ekrandaki ikonu<\/li><li><strong>display<\/strong>: standalone se\u00e7ene\u011fini kulland\u0131\u011f\u0131n\u0131z zaman uygulama i\u00e7erisinde adres \u00e7ubu\u011fu bulunmaz. Browser se\u00e7ene\u011finde ise adres \u00e7ubu\u011fu bulunur.<\/li><li><strong>background_color<\/strong>: A\u00e7\u0131l\u0131\u015f ekran\u0131n\u0131n arkaplan rengi<\/li><li><strong>theme_color<\/strong>: E\u011fer display:browser \u015feklinde kullan\u0131rsan\u0131z adres \u00e7ubu\u011funun rengini ayarlaman\u0131za yar\u0131yor.<\/li><\/ul>\n\n\n\n<p>Manifest dosyan\u0131z\u0131 yazd\u0131ktan sonra HTML i\u00e7eri\u011finde bu dosyay\u0131 a\u015fa\u011f\u0131daki \u015fekilde linkledi\u011finizde art\u0131k uygulaman\u0131z taay\u0131c\u0131 taraf\u0131ndan bir PWA olarak tan\u0131nacakt\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code lang:default decode:true\"><code lang=\"markup\" class=\"language-markup\">&lt;link href=\"manifest.json\"&gt;\n<\/code><\/pre>\n\n\n\n<p>Tabii ki sadece bu dosyay\u0131 eklemek uygulaman\u0131z\u0131n PWA olarak \u00e7al\u0131\u015fmas\u0131 i\u00e7in yeterli olmaz. Manifest sadece taray\u0131c\u0131ya \u201cben bir PWA\u2019y\u0131m\u201d denilmesini sa\u011fl\u0131yor. Bu dosya d\u0131\u015f\u0131nda uygulaman\u0131z\u0131n HTTPS \u00fczerinden \u00e7al\u0131\u015fmas\u0131, t\u00fcm sayfalar\u0131n\u0131z\u0131n responsive tasar\u0131ma sahip olmas\u0131, uygulamadan t\u0131klanan her sayfan\u0131n kendine ait bir URL\u2019ye sahip olmas\u0131 gibi baz\u0131 \u00f6nemli kurallar\u0131n da sa\u011flanmas\u0131 gerekmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA Geli\u015ftirmek \u0130\u00e7in Bir K\u00fct\u00fcphane vb. Gerekli mi?<\/h3>\n\n\n\n<p>Uygulaman\u0131z\u0131 PWA yapmak i\u00e7in mevcut web teknolojileri d\u0131\u015f\u0131nda ayr\u0131 bir k\u00fct\u00fcphane veya framework\u2019e ihtiyac\u0131n\u0131z yok. Sadece&nbsp;<strong>HTML, CSS ve JavaScript<\/strong>&nbsp;bilgisiyle bu tarz bir uygulama olu\u015fturman\u0131z m\u00fcmk\u00fcn. Burada taray\u0131c\u0131 i\u00e7in de bir parantez a\u00e7mam\u0131z gerekiyor; bu yaz\u0131n\u0131n yaz\u0131ld\u0131\u011f\u0131 tarih itibariyle(18 May\u0131s 2017) PWA\u2019lar sadece g\u00fcncel bir mobil Chrome taray\u0131c\u0131s\u0131 \u00fczerinden \u00e7al\u0131\u015ft\u0131r\u0131labilir. \u0130lerleyen zamanlarda b\u00fcy\u00fck ihtimalle farkl\u0131 taray\u0131c\u0131lara da bu destek gelecektir.<\/p>\n\n\n\n<p>Di\u011fer taraftan geli\u015ftirdi\u011finiz PWA uygulamas\u0131n\u0131 pratik \u015fekilde yazmak ve testlerini kolayca yapmak i\u00e7in Google\u2019\u0131n sundu\u011fu baz\u0131 ara\u00e7lar mevcut. E\u011fer konuyla ilgili kapsaml\u0131 bilgi almak isterseniz&nbsp;<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/getting-started\/codelabs\/your-first-pwapp\/\" target=\"_blank\"><strong>bu linkteki<\/strong><\/a>&nbsp;yaz\u0131y\u0131 okuman\u0131z\u0131 \u00f6neririm.<\/p>\n\n\n\n<p>\u015eu an yay\u0131nda bulunan baz\u0131 UWP uygumalar\u0131n\u0131 inceleyip test etmek isterseniz de&nbsp;<a href=\"https:\/\/pwa.rocks\/\" target=\"_blank\"><strong>bu adrese<\/strong><\/a>&nbsp;g\u00f6z atman\u0131z\u0131 \u00f6neririm.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Progressive Web App, web sitelerinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve kullan\u0131c\u0131 deneyimini, mobil uygulamalarla benzer seviyeye getirilen uygulamalara verilen isimdir. Yani bu yakla\u015f\u0131mla tasarlanan web sitelerini mobil taray\u0131c\u0131dan ziyaret etti\u011finizde, sanki bir web sitesini de\u011fil bir mobil uygulamay\u0131 kullan\u0131yormu\u015f gibi bir deneyim ya\u015fars\u0131n\u0131z. Progressive Web App\u2019\u0131n ba\u015fl\u0131ca \u00f6zelliklerinden bahsetmek gerekirse; Web sitenizin \u00e7evrimd\u0131\u015f\u0131 olarak \u00e7al\u0131\u015fabilmesini sa\u011flar, kullan\u0131c\u0131 internet &hellip;<\/p>\n","protected":false},"author":1,"featured_media":376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[85,86,83,84],"_links":{"self":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/372"}],"collection":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=372"}],"version-history":[{"count":2,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":2356,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/372\/revisions\/2356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/media\/376"}],"wp:attachment":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}