106 lines
5.8 KiB
Markdown
106 lines
5.8 KiB
Markdown
|
---
|
|||
|
|
title: "📲 Как добавить PWA на главный экран"
|
|||
|
|
date: 2023-02-14T23:14:16+03:00
|
|||
|
|
draft: false
|
|||
|
|
tags: [development, javascript, pwa]
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
В этой статье я разберу, как этого добиться того,
|
|||
|
|
чтобы используя веб-манифест добавить функцию в PWA приложеине
|
|||
|
|
под названием **«Добавить на главный экран»**.
|
|||
|
|
|
|||
|
|
Эта технология позволяет запускать приложение прямо с рабочего стола,
|
|||
|
|
без запуска браузера и ручного ввода URL-адреса.
|
|||
|
|
|
|||
|
|
Веб-приложение может быть установлено рядом с нативным.
|
|||
|
|
Поэтому к нему проще получить доступ, а так же можно указать,
|
|||
|
|
что приложение должно использовать полноэкранный режим браузера,
|
|||
|
|
делая его ещё более похожим на нативное.
|
|||
|
|
|
|||
|
|
## Требования
|
|||
|
|
|
|||
|
|
Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:
|
|||
|
|
|
|||
|
|
* Веб-манифест с правильно заполненными полями
|
|||
|
|
* Сайт должен использовать защищённый HTTPS протокол
|
|||
|
|
* Иконка для предоставления приложения на устройстве
|
|||
|
|
* Зарегистрированный service worker, чтобы приложение работало в offline режиме
|
|||
|
|
|
|||
|
|
## Файл манифеста
|
|||
|
|
|
|||
|
|
Ключевым элементом является файл манифеста,
|
|||
|
|
в котором представлена вся информация о веб-сайте в JSON формате.
|
|||
|
|
|
|||
|
|
Обычно файл манифеста находится в корневой папке веб-приложения.
|
|||
|
|
Он содержит информацию о названии приложения, пути к значкам разных размеров
|
|||
|
|
и цвет фона для использования при загрузке.
|
|||
|
|
|
|||
|
|
Эта информация необходима браузеру для правильного отображения приложения
|
|||
|
|
при установке на домашнем экране.
|
|||
|
|
|
|||
|
|
Файл `app.webmanifest` веб-приложения включают в раздел `<head>` файла `index.html`
|
|||
|
|
с помощью следующей строчки кода:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<link rel="manifest" href="app.webmanifest">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Содержимое файла может выглядеть так:
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"name": "Progressive Web App",
|
|||
|
|
"short_name": "app",
|
|||
|
|
"description": "Progressive Web App.",
|
|||
|
|
"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/app/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` являются рекомендуемыми.
|
|||
|
|
|
|||
|
|
## Добавить на домашний экран
|
|||
|
|
|
|||
|
|
«Добавить на домашний экран» (кратко: `a2hs`) — это функция,
|
|||
|
|
реализованная браузерами, которая берёт информацию из веб-манифеста
|
|||
|
|
и использует её для добавления приложения на домашний экран устройства
|
|||
|
|
со значком и именем. Это работает при выполнении требований, описанных выше.
|
|||
|
|
|
|||
|
|
Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию,
|
|||
|
|
должен отобразиться значок, указывающий на возможность установки приложения
|
|||
|
|
в качестве PWA.
|
|||
|
|
|
|||
|
|
## P.S.
|
|||
|
|
|
|||
|
|
Эта статья написана исключительно копипастом со статьи
|
|||
|
|
[Как сделать PWA устанавливаемым](https://developer.mozilla.org/ru/docs/Web/Progressive_web_apps/Installable_PWAs)
|
|||
|
|
на [developer.mozilla.org](developer.mozilla.org).
|