pwa home screen

2023-02-14 23:30:33 +03:00 · 2023-02-14 23:30:33 +03:00 · b860f03897
commit b860f03897
parent 70a55a6970
1 changed files with 105 additions and 0 deletions
--- a/content/posts/2023/javascript/pwa-installable.md
+++ b/content/posts/2023/javascript/pwa-installable.md
@ -0,0 +1,105 @@
+---
+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).