136 lines
6.4 KiB
Markdown
136 lines
6.4 KiB
Markdown
|
---
|
|||
|
|
title: Add To Homescreen
|
|||
|
|
localeTitle: Добавить на домашний экран
|
|||
|
|
---
|
|||
|
|
## Добавить на домашний экран
|
|||
|
|
|
|||
|
|
Здесь баннер установки веб-приложений ориентирован на веб-приложение, с возможностью добавления на рабочий стол.
|
|||
|
|
|
|||
|
|
### Поддержка браузера для добавления на рабочий стол
|
|||
|
|
|
|||
|
|
В настоящее время функция добавления в Homescreen поддерживается:
|
|||
|
|
|
|||
|
|
* Хром
|
|||
|
|
* iOS Safari
|
|||
|
|
|
|||
|
|
Вы можете увидеть последний статус поддержки браузером этой функции [здесь](https://caniuse.com/#feat=web-app-manifest) .
|
|||
|
|
|
|||
|
|
### На Android
|
|||
|
|
|
|||
|
|
На Android баннер «добавить к главному экрану» автоматически появляется, если вы отвечаете определенным требованиям. Это то, что должно выглядеть на Android:
|
|||
|
|
|
|||
|
|
| Добавить в приглашение на рабочий стол | Когда приложение запущено | | : ----------------------: | : ---------------: | |  |  |
|
|||
|
|
|
|||
|
|
#### Требования
|
|||
|
|
|
|||
|
|
* включают файл `manifest.json` со следующими свойствами:
|
|||
|
|
* `short name`
|
|||
|
|
* `name`
|
|||
|
|
* `192x192` размер значка `png`
|
|||
|
|
* `start_url`
|
|||
|
|
* включают сервисного работника, который зарегистрирован и активирован
|
|||
|
|
* сайт работает через HTTPS (вы все еще можете попробовать это с помощью localhost без HTTPS)
|
|||
|
|
* сайт соответствует эвристике взаимодействия, определяемой Chrome
|
|||
|
|
|
|||
|
|
#### manifest.json
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"name": "FreeCodeCamp",
|
|||
|
|
"short_name": "FreeCodeCamp",
|
|||
|
|
"theme_color": "#00FF00",
|
|||
|
|
"background_color": "#00FF00",
|
|||
|
|
"display": "standalone",
|
|||
|
|
"Scope": "/",
|
|||
|
|
"start_url": "/",
|
|||
|
|
"icons": [
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-72x72.png",
|
|||
|
|
"sizes": "72x72",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-96x96.png",
|
|||
|
|
"sizes": "96x96",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-128x128.png",
|
|||
|
|
"sizes": "128x128",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-144x144.png",
|
|||
|
|
"sizes": "144x144",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-152x152.png",
|
|||
|
|
"sizes": "152x152",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-192x192.png",
|
|||
|
|
"sizes": "192x192",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-384x384.png",
|
|||
|
|
"sizes": "384x384",
|
|||
|
|
"type": "image/png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"src": "assets/images/icons/icon-512x512.png",
|
|||
|
|
"sizes": "512x512",
|
|||
|
|
"type": "image/png"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"splash_pages": null
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
* `name` - это имя веб-приложения. (Это будет показано на экране запуска)
|
|||
|
|
* `short name` - краткое имя веб-приложения. (Это будет показано ниже значка меню телефона)
|
|||
|
|
* `theme_color` - цвет верхней части браузера.
|
|||
|
|
* `background_color` - цвет фона экрана запуска.
|
|||
|
|
* `display` - это способ `display` веб-приложения после его запуска на телефоне.
|
|||
|
|
* `start_url` определяет начальный URL-адрес веб-сайта.
|
|||
|
|
* `icons` - это массив, который хранит все местоположение, размеры и тип изображения.
|
|||
|
|
|
|||
|
|
### На других устройствах
|
|||
|
|
|
|||
|
|
Хотя этот метод не работает в iOS и Windows, существует метод возврата.
|
|||
|
|
|
|||
|
|
**IOS**
|
|||
|
|
|
|||
|
|
На iOS кнопку «добавить к главному экрану» нужно добавить вручную. Добавьте следующие метатеги в раздел заголовка вашего HTML для поддержки значка веб-приложения iOS.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="green">
|
|||
|
|
<meta name="apple-mobile-web-app-title" content="FreeCodeCamp">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-72x72.png" sizes="72x72">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-96x96.png" sizes="96x96">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-128x128.png" sizes="128x128">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-144x144.png" sizes="144x144">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-152x152.png" sizes="152x152">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-192x192.png" sizes="192x192">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-384x384.png" sizes="384x384">
|
|||
|
|
<link rel="apple-touch-icon" href="/assets/images/icons/icon-512x512.png" sizes="512x512">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Windows**
|
|||
|
|
|
|||
|
|
На телефоне Windows добавьте следующие метатеги в раздел заголовка вашего HTML:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<meta name="msapplication-TileImage" content="/assets/images/icons/icon-144x144.png">
|
|||
|
|
<meta name="msapplication-TileColor" content="green">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Рекомендации
|
|||
|
|
|
|||
|
|
1. [superoo7, «Высокий уровень просмотра прогрессивного веб-приложения» Опубликовано: 18 декабря 2017 года.](https://steemit.com/web/@superoo7/a-high-level-view-of-progressive-web-app)
|
|||
|
|
2. [Мэтт Гаунт и Пол Кинлан, «Веб-баннеры установки приложений» Добавлено: 14 ноября 2017 года.](https://developers.google.com/web/fundamentals/app-install-banners/)
|