---
title: Новітні web-застосунки
slug: Web/Progressive_web_apps
tags:
  - Modern web apps
  - Progressive web apps
  - Застосунки
translation_of: Web/Progressive_web_apps
---
<p class="summary">Новітні web-застосунки — це загалом те саме, що й колишні сайти, але <strong>краще</strong>. В сучасних переглядачах вони розкривають <strong>надзвичайні можливості</strong> і стають…</p>

<div class="column-container">
<div class="column-1"> </div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><a href="/en-US/docs/Web/Apps/Modern/Discoverable"><strong>Discoverable</strong></a></p>

<p style="width: 70%;">Identifiable as applications, findable by search engines.</p>
</div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Installable">Installable</a></strong></p>

<p style="width: 70%;">Available on the device, on users' home screens — without the hassle of an app store.</p>
</div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Linkable">Linkable</a></strong></p>

<p style="width: 70%;">Easily shareable via URLs, without requiring complex installation.</p>
</div>

<div class="column-1"> </div>
</div>

<div class="column-container">
<div class="column-1"> </div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Network_independent">Network independent</a></strong></p>

<p style="width: 70%;">Works offline or on low quality networks.</p>
</div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Progressive">Progressive</a></strong></p>

<p style="width: 70%;">Works for every user, regardless of browser choice.</p>
</div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Re-engageable">Re-engageable</a></strong></p>

<p style="width: 70%;">Makes user engagement easy by drawing attention, even when users aren't using their devices.</p>
</div>

<div class="column-1"> </div>
</div>

<div class="column-container">
<div class="column-1"> </div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Responsive">Responsive</a></strong></p>

<p style="width: 70%;">Fits any form factor: desktop, mobile, tablet, or whatever comes next.</p>
</div>

<div class="column-3"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 40px; width: 38px;">
<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Safe">Safe</a></strong></p>

<p style="width: 70%;">Delivery mechanism prevents snooping and ensures content hasn’t been tampered with.</p>

<p style="width: 70%;"> </p>
</div>

<div class="column-1"> </div>

<div class="column-1"> </div>
</div>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li>
 <li class="graf--h3 graf--first" id="4c45"><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell</li>
 <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
 <li class="graf--h3 graf--first"><a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">The Lighthouse Tool</a> by Google</li>
 <li class="graf--h3 graf--first"><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
 <li class="graf--h3 graf--first"><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
 <li class="graf--h3 graf--first"><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
 <li class="graf--h3 graf--first">
  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a> </p>
 </li>
</ul>