Как сделать PWA устанавливаемым
===============================

* Назад  (en-US)
* Обзор: Progressive (en-US)
* Далее  (en-US)

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

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

Требования
----------

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

* Веб-манифест с правильно заполненными полями
* Сайт должен использовать защищённый (HTTPS) домен
* Иконка для предоставления приложения на устройстве
* Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)
### Файл манифеста

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

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

Файл `js13kpwa.webmanifest` веб-приложения js13kPWA включён в раздел `<head>` файла `index.html` с помощью следующей строчки кода:


```html
<link rel="manifest" href="js13kpwa.webmanifest" />
```


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

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


```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"
}
```


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

* `name`: Полное название вашего приложения.
* `short_name`: Короткое название для отображения на домашнем экране.
* `description`: Одно-два предложения, описывающих приложение.
* `icons`: Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователя
* `start_url`: Загружаемый исходный документ при запуске приложения
* `display`: Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
* `theme_color`: Основной цвет для интерфейса, используемый операционной системой
* `background_color`: Цвет для фона, используемый при установке и на заставке

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

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

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

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

![Add to Home screen popup of js13kPWA.](/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs/js13kpwa-icon.png)

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

![Install banner of js13kPWA.](/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs/js13kpwa-banner.png)

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

![Add to Home screen popup of js13kPWA.](/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs/js13kpwa-add.png)

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

![](/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs/js13kpwa-installed.png)

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

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

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

![](/ru/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs/js13kpwa-splash.png)

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

Итог
----

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

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

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

* Назад  (en-US)
* Обзор: Progressive (en-US)
* Далее  (en-US)