From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../installable_pwas/index.html | 117 +++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/ru/web/progressive_web_apps/installable_pwas/index.html (limited to 'files/ru/web/progressive_web_apps/installable_pwas') 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 +--- +
{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
+ +

В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанвливать веб-приложения на поддерживающие мобльные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».

+ +

Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное

+ +

Требования

+ +

Чтобы сделать сайт доступным для установки, ему необходимы соедующие вещи:

+ + + +

Файл манифеста

+ +

Ключевым элементом является файл манифеста,  в котором представлена вся информация о веб-сайте в JSON формате.

+ +

Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.

+ +

Файл js13kpwa.webmanifest веб-приложения js13kPWA включен в раздел {{htmlelement("head")}} файла index.html с помощью средующей строчки кода:

+ +
<link rel="manifest" href="js13kpwa.webmanifest">
+ +
+

Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.

+
+ +

Содержимое файла может выглядеть так:

+ +
{
+    "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"
+}
+ +

Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:

+ + + +

Минимальные требования к манифесту - name и хотя бы один значок (с src, size и type). Поля description, short_name, и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.

+ +

Добавить на домашний экран

+ +

"Добавить на домашний экран" (кратко: a2hs) - это функция, реализованная браузерами, которая берет информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.

+ +

Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.

+ +

Add to Home screen popup of js13kPWA.

+ +

После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.

+ +

Install banner of js13kPWA.

+ +

Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.

+ +

Add to Home screen popup of js13kPWA.

+ +

При подтверждении ярлык будет добавлен на рабочий стол.

+ +

+ +

После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу значка отображется иконка браузера, чтобы инормировать пользователя о его веб-характере.

+ +

Экран загрузки

+ +

В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA

+ +

+ +

Иконка и фоновый цвет использовались для создания заставки.

+ +

Итог

+ +

В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.

+ +

Для получения большей информации, можете почитать наш Add to Home screen гайд. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.

+ +

Теперь давайте перейдём к последнему фаргменту PWA-головоломки — повторному запуску с помощю push-уведомлений.

+ +

{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}

+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}

-- cgit v1.2.3-54-g00ecf