blob: 8eaeed72d2a9bb666d8b0c251ccc1fb9a061a3cc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
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>
|
