initial commit

3 files changed, 258 insertions, 0 deletions

diff --git a/files/ru/web/progressive_web_apps/index.html b/files/ru/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..e0f80c9b4d
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/index.html
@@ -0,0 +1,78 @@
+---
+title: Прогрессивные веб-приложения
+slug: Web/Progressive_web_apps
+tags:
+  - Веб-приложения
+  - Приложения
+  - Прогрессивные веб-приложения
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.</p>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><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>Заметные</strong></a></p>
+
+<p style="width: 70%;">Приложения замечаются поисковыми системами.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><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">Продвинутые</a></strong></p>
+
+<p style="width: 70%;">Доступные на любых устройствах без нужды в магазине приложений.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><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">Доступные</a></strong></p>
+
+<p style="width: 70%;">Легко поделиться ими через ссылку.</p>
+</div>
+
+<div class="column-1"> </div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><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">Независимые</a></strong></p>
+
+<p style="width: 70%;">Работают в оф-лайне или на низкоскоростных соединениях.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><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">Передовые</a></strong></p>
+
+<p style="width: 70%;">Работают для любого пользователя.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-1"> </div>
+
+<div class="column-3" style="height: 160px;"><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">Отзывчивые</a></strong></p>
+
+<p style="width: 70%;">Помещаются на любой экран: настольный компьютер, смартфон, планшет и т.д.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><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">Безопасные</a></strong></p>
+
+<p style="width: 70%;">Специальный способ переноса данных предотвращает кражу информации.</p>
+</div>
+
+<p> </p>
+
+<div class="column-1"> </div>
+
+<p> </p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Передовые веб-приложения (англ.)</a> на Google Developers</li>
+</ul>
diff --git a/files/ru/web/progressive_web_apps/installable_pwas/index.html b/files/ru/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..6ad0a1211e
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,117 @@
+---
+title: Как сделать PWA устанавливаемым
+slug: Web/Progressive_web_apps/Installable_PWAs
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">В предыдущей статье мы читали о том, как <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> работает в off-line режиме благодаря <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>, но мы можем пойти дальше и позволить устанвливать веб-приложения на поддерживающие мобльные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».</p>
+
+<p>Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное</p>
+
+<h2 id="Требования">Требования</h2>
+
+<p>Чтобы сделать сайт доступным для установки, ему необходимы соедующие вещи:</p>
+
+<ul>
+ <li>Веб-манифест с <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">правильно заполненными полями</a></li>
+ <li>Сайт должен использовать защищенный (HTTPS) домен</li>
+ <li>Иконка для предоставления приложения на устройстве</li>
+ <li>Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)</li>
+</ul>
+
+<h3 id="Файл_манифеста">Файл манифеста</h3>
+
+<p>Ключевым элементом является файл манифеста,  в котором представлена вся информация о веб-сайте в JSON формате.</p>
+
+<p>Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.</p>
+
+<p>Файл <code>js13kpwa.webmanifest</code> веб-приложения <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> включен в раздел {{htmlelement("head")}} файла <code>index.html</code> с помощью средующей строчки кода:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Существует несколько расширений, используемых в прошлом: <code>manifest.webapp</code> был популярен в манифестах приложений Firefox OS, также многие используют <code>manifest.json</code> потому что содержание организовано по структуре JSON. Однако, расширение <code>.webmanifest</code> явно упоминается в <a href="https://w3c.github.io/manifest/">W3C manifest specification</a>, поэтому давайте придерживаться именно этого стандарта.</p>
+</div>
+
+<p>Содержимое файла может выглядеть так:</p>
+
+<pre class="brush: json">{
+    "name": "js13kGames Progressive Web App",
+    "short_name": "js13kPWA",
+    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
+    "icons": [
+        {
+            "src": "icons/icon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        // ...
+        {
+            "src": "icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/pwa-examples/js13kpwa/index.html",
+    "display": "fullscreen",
+    "theme_color": "#B12A34",
+    "background_color": "#B12A34"
+}</pre>
+
+<p>Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:</p>
+
+<ul>
+ <li><code>name</code>: Полное название вашего приложения.</li>
+ <li><code>short_name</code>: Короткое название для отображения на домашнем экране.</li>
+ <li><code>description</code>: Одно-два предложения, описывающих приложение.</li>
+ <li><code>icons</code>: Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше пдходила под устройство пользователя</li>
+ <li><code>start_url</code>: Загружаемый исходный документ при запуске приложения</li>
+ <li><code>display</code>: Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)</li>
+ <li><code>theme_color</code>: Основной цвет для интерфейса, используемый операционной системой</li>
+ <li><code>background_color</code>: Цвет для фона, используемый при установке и на заставке</li>
+</ul>
+
+<p>Минимальные требования к манифесту - <code>name</code> и хотя бы один значок (с <code>src</code>, <code>size</code> и <code>type</code>). Поля <code>description</code>, <code>short_name</code>, и <code>start_url</code> являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на <a href="/en-US/docs/Web/Manifest">Web App Manifest reference</a>.</p>
+
+<h2 id="Добавить_на_домашний_экран">Добавить на домашний экран</h2>
+
+<p>"Добавить на домашний экран" (кратко: a2hs) - это функция, реализованная браузерами, которая берет информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.</p>
+
+<p>Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.</p>
+
+<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>При подтверждении ярлык будет добавлен на рабочий стол.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу значка отображется иконка браузера, чтобы инормировать пользователя о его веб-характере.</p>
+
+<h3 id="Экран_загрузки">Экран загрузки</h3>
+
+<p>В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Иконка и фоновый цвет использовались для создания заставки.</p>
+
+<h2 id="Итог">Итог</h2>
+
+<p>В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.</p>
+
+<p>Для получения большей информации, можете почитать наш <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to Home screen гайд</a>. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.</p>
+
+<p>Теперь давайте перейдём к последнему фаргменту PWA-головоломки — повторному запуску с помощю push-уведомлений.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/ru/web/progressive_web_apps/заметный/index.html b/files/ru/web/progressive_web_apps/заметный/index.html
new file mode 100644
index 0000000000..d91120ec55
--- /dev/null
+++ b/files/ru/web/progressive_web_apps/заметный/index.html
@@ -0,0 +1,63 @@
+---
+title: Заметный
+slug: Web/Progressive_web_apps/Заметный
+tags:
+  - Веб-манифест
+  - Видимый
+  - Манифест
+  - Приложения
+  - Прогрессивные веб-приложения
+  - Современные веб-приложения
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Как только вы опубликуете новое веб-приложение, вы захотите, чтобы мир узнал об этом. Поисковые системы, конечно, помогают, но, обычно, большее внимание уделяется тому, как Ваши приложения представлены на результатах поиска. Новый манифест W3C для веб-приложений может помочь с этим и предоставить дополнительные возможности.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div>
+</div>
+
+<p>Возможные перспективы для веб-приложения:</p>
+
+<ul>
+ <li>Лучшее представление сайта в поисковых системах.</li>
+ <li>Упрощение администрирования</li>
+ <li>Размещение мета-данных, поддерживаемых браузерами для получения дополнительных возможностей</li>
+</ul>
+
+<h2 id="Основные_руководства">Основные руководства</h2>
+
+<p>None written as yet; contributions appreciated.</p>
+
+<h2 id="Технологии">Технологии</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Технология</th>
+   <th scope="col">Описание</th>
+   <th scope="col">Поддержка</th>
+   <th scope="col">Последняя спецификация</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Web/Manifest">Манифест веб-приложения</a></p>
+   </td>
+   <td>Устанавливает свойства приложения, такие как имя, иконка, окно загрузки и цвета темы для использования в каталогах приложений и т.д.</td>
+   <td>Экспериментальный, поддерживается в Chrome, ограниченная поддержка в Firefox (<a href="/en-US/docs/Web/Manifest#Browser_compatibility">больше деталей</a>)</td>
+   <td>{{SpecName('Manifest')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Инструменты">Инструменты</h2>
+
+<p>Добавьте ссылки на полезные библиотеки и инструменты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="http://ogp.me/">Open Graph (англ.)</a></dt>
+ <dd>Стандарт, описывающий формат размещения мета-данных в тегах <code>&lt;head&gt;</code>, используя мета-тэги в HTML. Поддерживается Facebook и другими.</dd>
+</dl>