---
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).