📲 Как добавить PWA на главный экран

Опубликовано: 14 февраля 2023 г.

В этой статье я разберу, как этого добиться того, чтобы используя веб-манифест добавить функцию в 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.