Blog/content/posts/2023/javascript/pwa-installable.md
2023-02-14 23:30:33 +03:00

5.8 KiB
Raw Blame History

title date draft tags
📲 Как добавить PWA на главный экран 2023-02-14T23:14:16+03:00 false
development
javascript
pwa

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