---
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>