initial commit

2 files changed, 281 insertions, 0 deletions

diff --git a/files/tr/web/progressive_web_apps/index.html b/files/tr/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..fc64d2e761
--- /dev/null
+++ b/files/tr/web/progressive_web_apps/index.html
@@ -0,0 +1,80 @@
+---
+title: Progressive web apps (PWAs)
+slug: Web/Progressive_web_apps
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary"><font><font>Aşamalı web uygulamaları, platformlar arası web uygulamaları oluşturmak için geleneksel aşamalı geliştirme stratejisiyle birlikte modern web API'lerini kullanır. </font><font>Bu uygulamalar her yerde çalışır ve yerel uygulamalarla aynı kullanıcı deneyimi avantajlarını sağlayan çeşitli özellikler sunar. </font><font>Bu doküman seti size onlar hakkında bilmeniz gereken her şeyi anlatır.</font></font></p>
+
+<p class="summary"><img alt="ilerici web uygulamaları topluluğu PWA logosu" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; height: 188px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="PWA_avantajları"><font><font>PWA avantajları</font></font></h2>
+
+<p><font><font>PWA'lar keşfedilebilir, kurulabilir, bağlanabilir, ağdan bağımsız, aşamalı, yeniden bağlanabilir, duyarlı ve güvenli olmalıdır. </font><font>Bunların ne anlama geldiği hakkında daha fazla bilgi edinmek için </font></font><a href="/en-US/docs/Web/Progressive_web_apps/Advantages"><font><font>Aşamalı web uygulaması avantajlarını</font></font></a><font><font> okuyun </font><font>.</font></font></p>
+
+<p><a href="https://developers.google.com/web/updates/2018/05/beyond-spa"><font><font>Google</font></font></a><font><font> , PWA'ların neden bu kadar etkili olduğunu anlamak için yararlı bir kısaltma kullanır: YANGIN - Hızlı, Entegre, Güvenilir ve İlgi Çekici. </font><font>Bu kısaltma, PWA'nın geliştiriciler arasında neden eğilimde olduğunun mükemmel bir açıklamasıdır.</font></font></p>
+
+<p><font><font>PWA'ların nasıl uygulanacağını öğrenmek için, aşağıdaki bölümde listelenen kılavuzlara bakın.</font></font></p>
+
+<h2 id="Çekirdek_PWA_kılavuzları"><font><font>Çekirdek PWA kılavuzları</font></font></h2>
+
+<p><font><font>Aşağıdaki kılavuzlar, basit bir örneği inceleyerek ve tüm parçaların nasıl çalıştığını göstererek bir PWA uygulamak için ne yapmanız gerektiğini gösterir.</font></font></p>
+
+<ol>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction"><font><font>Aşamalı web uygulamalarına giriş</font></font></a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure"><font><font>Aşamalı web uygulaması yapısı</font></font></a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers"><font><font>PWA'ların Servis çalışanları ile çevrimdışı çalışmasını sağlama</font></font></a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs"><font><font>PWA'ları yüklenebilir yapma</font></font></a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push"><font><font>Bildirimler ve Anında İletme özelliğini kullanarak PWA'ları yeniden kullanılabilir hale getirme</font></font></a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading"><font><font>Aşamalı yükleme</font></font></a></li>
+ <li><a href="https://pwafire.org"><font><font>Pwafire.org adresindeki ekip tarafından PWA'lar oluşturmak için ihtiyacınız olan kaynakların, kod etiketlerinin ve araçların toplanması</font></font></a></li>
+ <li><a href="https://github.com/pwafire/pwadev-tips"><font><font>Aşamalı Web Uygulaması Geliştirme ortamınızı kurma</font></font></a></li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Teknoloji_kılavuzları"><font><font>Teknoloji kılavuzları</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage"><font><font>İstemci tarafı depolama</font></font></a><font><font> - Web depolama, IndexedDB ve servis çalışanlarının nasıl ve ne zaman kullanılacağını gösteren uzun bir kılavuz.</font></font></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers"><font><font>Servis çalışanlarını kullanma</font></font></a><font><font> - Servis Çalışanı API'sını kapsayan daha ayrıntılı bir kılavuz.</font></font></li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB"><font><font>IndexedDB Kullanımı - IndexedDB'nin</font></font></a><font><font> temelleri ayrıntılı olarak açıklanmıştır.</font></font></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API"><font><font>Web Depolama API'sını kullanma</font></font></a><font><font> - Web depolama API'sı basitleştirildi.</font></font></li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener"><font><font>Web Uygulamalarını Bir Uygulama Kabuğu Mimarisiyle Anında Yükleme - Hızlı</font></font></a><font><font> yüklenen uygulamalar oluşturmak için Uygulama Kabuğu kodlama desenini kullanma kılavuzu.</font></font></li>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API"><font><font>Push API'sini kullanma</font></font></a><font><font> - Web Push API'sinin arkasındaki temel bilgileri öğrenin.</font></font></li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API"><font><font>Bildirimler API'sini kullanma</font></font></a><font><font> - Web bildirimleri kısaca.</font></font></li>
+ <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — Learn the basics of responsive design, an essential topic for modern app layout.</li>
+ <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — Learn how your apps can take advantage of Add to home screen (A2HS).</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="Tools">Tools</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — An <em>Express-like</em> microframework for easy Service Worker development.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — A node module to generate service worker code that will precache specific resources.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li>
+ <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — A tiny script that makes sure your site is always there for your users.</li>
+ <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li>
+ <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.</li>
+</ul>
+</div>
+</div>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers.</li>
+ <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh"><font><font>Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelerden Kaçış</font></font></a><font><font> Alex Russell.</font></font></li>
+ <li><a href="https://developers.google.com/web/progressive-web-apps/checklist"><font><font>Aşamalı Web Uygulamaları Kontrol Listesi</font></font></a><font><font> .</font></font></li>
+ <li><font><font>Google'dan </font><a href="https://developers.google.com/web/tools/lighthouse"><font>Deniz Feneri Aracı</font></a><font> .</font></font></li>
+ <li><a href="https://github.com/angular/mobile-toolkit"><font><font>Angular ile aşamalı web uygulamaları oluşturma araçları</font></font></a><font><font> .</font></font></li>
+ <li><a href="https://github.com/codebusking/react-pwa-guide-kit"><font><font>Tepki PWA Kılavuz Kiti</font></font></a><font><font> .</font></font></li>
+ <li><a href="https://pokedex.org/"><font><font>Çevrimdışı yetenekli Pokédex web sitesi</font></font></a><font><font> .</font></font></li>
+ <li><a href="https://hnpwa.com/"><font><font>Hacker News okuyucuları Aşamalı Web Uygulamaları olarak</font></font></a><font><font> .</font></font></li>
+ <li><a href="https://ymedialabs.com/progressive-web-apps"><font><font>Progresif Web Uygulamaları Neden Mobil Web'in Geleceği (2019 Araştırma)</font></font></a><font><font> .</font></font></li>
+ <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/"><font><font>Progresif Web Uygulamaları: Bilmeniz Gereken Her Şey</font></font></a></li>
+</ul>
+
+<div><font><font>{{QuickLinksWithSubpages ( "/ tr / docs / Web / Progressive_web_apps /")}}</font></font></div>
diff --git a/files/tr/web/progressive_web_apps/offline_service_workers/index.html b/files/tr/web/progressive_web_apps/offline_service_workers/index.html
new file mode 100644
index 0000000000..a6ea548179
--- /dev/null
+++ b/files/tr/web/progressive_web_apps/offline_service_workers/index.html
@@ -0,0 +1,201 @@
+---
+title: Making PWAs work offline with Service workers
+slug: Web/Progressive_web_apps/Offline_Service_workers
+translation_of: Web/Progressive_web_apps/Offline_Service_workers
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Now that we’ve seen what the structure of js13kPWA looks like and have seen the basic shell up and running, let's look at how the offline capabilities using Service Worker are implemented. In this article, we  look at how it is used in our <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA example</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">see the source code also</a>). We examine how to add offline functionality.</p>
+
+<h2 id="Service_workers_explained">Service workers explained</h2>
+
+<p>Service Workers are a virtual proxy between the browser and the network. They finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.</p>
+
+<p>They run on a separate thread from the main JavaScript code of our page, and don't have any access to the DOM structure. This introduces a different approach from traditional web programming — the API is non-blocking, and can send and receive communication between different contexts. You are able to give a Service Worker something to work on, and receive the result whenever it is ready using a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>-based approach.</p>
+
+<p>They can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. Service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.</p>
+
+<h3 id="Security">Security</h3>
+
+<p>Because they are so powerful, Service Workers can only be executed in secure contexts (meaning HTTPS). If you want to experiment first before pushing your code to production, you can always test on a localhost or setup GitHub Pages — both support HTTPS.</p>
+
+<h2 id="Offline_First">Offline First</h2>
+
+<p>The "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user. If a resource is cached and available offline, return it first before trying to download it from the server. If it isn’t in the cache already, download it and cache it for future usage.</p>
+
+<h2 id="Progressive_in_PWA">"Progressive" in PWA</h2>
+
+<p>When implemented properly as a progressive enhancement, service workers can benefit users who have modern browsers that support the API by providing offline support, but won't break anything for those using legacy browsers.</p>
+
+<h2 id="Service_workers_in_the_js13kPWA_app">Service workers in the js13kPWA app</h2>
+
+<p>Enough theory — let's see some source code!</p>
+
+<h3 id="Registering_the_Service_Worker">Registering the Service Worker</h3>
+
+<p>We'll start by looking at the code that registers a new Service Worker, in the app.js file: </p>
+
+<p><strong>NOTE</strong> : We're using the <a href="http://es6-features.org/">es6</a> <strong>arrow functions</strong> syntax in the Service Worker Implementation</p>
+
+<pre class="brush: js">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>If the service worker API is supported in the browser, it is registered against the site using the {{domxref("ServiceWorkerContainer.register()")}} method. Its contents reside in the sw.js file, and can be executed after the registration is successful. It's the only piece of Service Worker code that sits inside the app.js file; everything else that is Service Worker-specific is written in the sw.js file itself.</p>
+
+<h3 id="Lifecycle_of_a_Service_Worker">Lifecycle of a Service Worker</h3>
+
+<p>When registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated.</p>
+
+<h4 id="Installation">Installation</h4>
+
+<p>The API allows us to add event listeners for key events we are interested in — the first one is the <code>install</code> event:</p>
+
+<pre class="brush: js">self.addEventListener('install', (e) =&gt; {
+    console.log('[Service Worker] Install');
+});</pre>
+
+<p>In the <code>install</code> listener, we can initialize the cache and add files to it for offline use. Our js13kPWA app does exactly that.</p>
+
+<p>First, a variable for storing the cache name is created, the app shell files are listed in one array.</p>
+
+<pre class="brush: js">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];</pre>
+
+<p>Next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array. After that, both arrays are merged using the {{jsxref("Array.prototype.concat()")}} function.</p>
+
+<pre class="brush: js">var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>Then we can manage the <code>install</code> event itself:</p>
+
+<pre class="brush: js">self.addEventListener('install', (e) =&gt; {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Service Worker] Caching all: app shell and content');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>There are two things that need an explanation here: what {{domxref("ExtendableEvent.waitUntil")}} does, and what the {{domxref("Caches","caches")}} object is.</p>
+
+<p>The service worker does not install until the code inside <code>waitUntil</code> is executed. It returns a promise — this approach is needed because installing may take some time, so we have to wait for it to finish.</p>
+
+<p><code>caches</code> is a special {{domxref("CacheStorage")}} object available in the scope of the given Service Worker to enable saving data — saving to <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a> won't work, because web storage is synchronous. With Service Workers, we use the Cache API instead.</p>
+
+<p>Here, we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request URL).</p>
+
+<h4 id="Activation">Activation</h4>
+
+<p>There is also an <code>activate</code> event, which is used in the same way as <code>install</code>. This event is usually used to delete any files that are no longer necessary and clean up after the app in general. We don't need to do that in our app, so we'll skip it.</p>
+
+<h3 id="Responding_to_fetches">Responding to fetches</h3>
+
+<p>We also have a <code>fetch</code> event at our disposal, which fires every time an HTTP request is fired off from our app. This is very useful, as it allows us to intercept requests and respond to them with custom responses. Here is a simple usage example:</p>
+
+<pre class="brush: js">self.addEventListener('fetch', (e) =&gt; {
+    console.log('[Service Worker] Fetched resource '+e.request.url);
+});</pre>
+
+<p>The response can be anything we want: the requested file, its cached copy, or a piece of JavaScript code that will do something specific — the possibilities are endless.</p>
+
+<p>In our example app, we serve content from the cache instead of the network as long as the resource is actually in the cache. We do this whether the app is online or offline. If the file is not in the cache, the app adds it there first before then serving it:</p>
+
+<pre class="brush: js">self.addEventListener('fetch', (e) =&gt; {
+  e.respondWith(
+    caches.match(e.request).then((r) =&gt; {
+          console.log('[Service Worker] Fetching resource: '+e.request.url);
+      return r || fetch(e.request).then((response) =&gt; {
+                return caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Service Worker] Caching new resource: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Here, we respond to the fetch event with a function that tries to find the resource in the cache and return the response if it's there. If not, we use another fetch request to fetch it from the network, then store the response in the cache so it will be available there next time it is requested.</p>
+
+<p>The {{domxref("FetchEvent.respondWith")}} method takes over control — this is the part that functions as a proxy server between the app and the network. This allows us to respond to every single request with any response we want: prepared by the Service Worker, taken from cache, modified if needed.</p>
+
+<p>That's it! Our app is caching its resources on install and serving them with fetch from the cache, so it works even if the user is offline. It also caches new content whenever it is added.</p>
+
+<h2 id="Updates">Updates</h2>
+
+<p>There is still one point to cover: how do you upgrade a Service Worker when a new version of the app containing new assets is available? The version number in the cache name is key to this:</p>
+
+<pre class="brush: js">var cacheName = 'js13kPWA-v1';</pre>
+
+<p>When this updates to v2, we can then add all of our files (including our new files) to a new cache:</p>
+
+<pre class="brush: js">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+
+// ...
+
+self.addEventListener('install', (e) =&gt; {
+  e.waitUntil(
+    caches.open('js13kPWA-v2').then((cache) =&gt; {
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>A new service worker is installed in the background, and the previous one (v1) works correctly up until there are no pages using it — the new Service Worker is then activated and takes over management of the page from the old one.</p>
+
+<h2 id="Clearing_the_cache">Clearing the cache</h2>
+
+<p>Remember the <code>activate</code> event we skipped? It can be used to clear out the old cache we don't need anymore:</p>
+
+<pre class="brush: js">self.addEventListener('activate', (e) =&gt; {
+  e.waitUntil(
+    caches.keys().then((keyList) =&gt; {
+          return Promise.all(keyList.map((key) =&gt; {
+        if(key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<p>This ensures we have only the files we need in the cache, so we don't leave any garbage behind; the <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">available cache space in the browser is limited</a>, so it is a good idea to clean up after ourselves.</p>
+
+<h2 id="Other_use_cases">Other use cases</h2>
+
+<p>Serving files from cache is not the only feature Service Worker offers. If you have heavy calculations to do, you can offload them from the main thread and do them in the worker, and receive results as soon as they are available. Performance-wise, you can prefetch resources that are not needed right now, but might be in the near future, so the app will be faster when you actually need those resources.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> and how to use it in more detail.</p>
+
+<p>Service Workers are also used when dealing with <a href="/en-US/docs/Web/API/Push_API">push notifications</a> — this will be explained in a subsequent article.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>