Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.
- -- -
-
В предыдущей статье мы читали о том, как 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: Полное название вашего приложения.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.
- -
После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.
- -
Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.
- -
При подтверждении ярлык будет добавлен на рабочий стол.
- -
После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у 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/")}}
diff --git a/files/ru/web/progressive_web_apps/installable_pwas/index.md b/files/ru/web/progressive_web_apps/installable_pwas/index.md new file mode 100644 index 00000000000000..c4275d4f5580c1 --- /dev/null +++ b/files/ru/web/progressive_web_apps/installable_pwas/index.md @@ -0,0 +1,115 @@ +--- +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](https://mdn.github.io/pwa-examples/js13kpwa/) работает в off-line режиме благодаря [service worker](/ru/docs/Web/API/Service_Worker_API), но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран». + +Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное + +## Требования + +Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи: + +- Веб-манифест с [правильно заполненными полями](/en-US/Apps/Progressive/Add_to_home_screen#Manifest) +- Сайт должен использовать защищённый (HTTPS) домен +- Иконка для предоставления приложения на устройстве +- Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android) + +### Файл манифеста + +Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате. + +Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране. + +Файл `js13kpwa.webmanifest` веб-приложения [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) включён в раздел {{htmlelement("head")}} файла `index.html` с помощью следующей строчки кода: + +```html + +``` + +> **Примечание:** Существует несколько расширений, используемых в прошлом: `manifest.webapp` был популярен в манифестах приложений Firefox OS, также многие используют `manifest.json` потому что содержание организовано по структуре JSON. Однако, расширение `.webmanifest` явно упоминается в [W3C manifest specification](https://w3c.github.io/manifest/), поэтому давайте придерживаться именно этого стандарта. + +Содержимое файла может выглядеть так: + +```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](/ru/docs/Web/Manifest). + +## Добавить на домашний экран + +"Добавить на домашний экран" (кратко: a2hs) - это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше. + +Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA. + + + +После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении. + + + +Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий. + + + +При подтверждении ярлык будет добавлен на рабочий стол. + + + +После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу отображается иконка браузера, чтобы пользователи понимали, что работают с веб-приложением. + +### Экран загрузки + +В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA + + + +Иконка и фоновый цвет использовались для создания заставки. + +## Итог + +В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран. + +Для получения большей информации, можете почитать наш [Add to Home screen гайд](/ru/docs/Web/Apps/Progressive/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/")}}