5.8 KiB
| title | date | draft | tags | |||
|---|---|---|---|---|---|---|
| 📲 Как добавить PWA на главный экран | 2023-02-14T23:14:16+03:00 | false |
|
В этой статье я разберу, как этого добиться того, чтобы используя веб-манифест добавить функцию в PWA приложеине под названием «Добавить на главный экран».
Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса.
Веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же можно указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное.
Требования
Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:
- Веб-манифест с правильно заполненными полями
- Сайт должен использовать защищённый HTTPS протокол
- Иконка для предоставления приложения на устройстве
- Зарегистрированный service worker, чтобы приложение работало в offline режиме
Файл манифеста
Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.
Обычно файл манифеста находится в корневой папке веб-приложения. Он содержит информацию о названии приложения, пути к значкам разных размеров и цвет фона для использования при загрузке.
Эта информация необходима браузеру для правильного отображения приложения при установке на домашнем экране.
Файл app.webmanifest веб-приложения включают в раздел <head> файла index.html
с помощью следующей строчки кода:
<link rel="manifest" href="app.webmanifest">
Содержимое файла может выглядеть так:
{
"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 устанавливаемым на developer.mozilla.org.