Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· сайта pwa: ΠŸΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π²Π΅Π±-сайт Π² PWA. Богласно этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈΠ· CNBC, ΠΊ 2025… | by Артур Π₯Π°ΠΉΠ±ΡƒΠ»Π»ΠΈΠ½ | NOP::Nuances of Programming

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ PWA устанавливаСмым — ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½Ρ‹Π΅ Π²Π΅Π±-прилоТСния

  • Назад (en-US)
  • ΠžΠ±Π·ΠΎΡ€: Progressive (en-US)
  • Π”Π°Π»Π΅Π΅ (en-US)

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ‡ΠΈΡ‚Π°Π»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ js13kPWA Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² off-line Ρ€Π΅ΠΆΠΈΠΌΠ΅ благодаря service worker, Π½ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΉΡ‚ΠΈ дальшС ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-прилоТСния Π½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ это Π±Ρ‹Π»ΠΎ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ, ΠΊΠ°ΠΊ этого Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Π΅Π±-манифСст ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ экран».

Π­Ρ‚Π° тСхнология позволяСт Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ прямо с Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола, Π±Π΅Π· запуска Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π° URL-адрСса. Π’Π°ΡˆΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ установлСно рядом с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΊ Π½Π΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, дСлая Π΅Π³ΠΎ Π΅Ρ‰Ρ‘ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт доступным для установки, Π΅ΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ:

  • Π’Π΅Π±-манифСст с ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΌΠΈ полями
  • Π‘Π°ΠΉΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Ρ‰ΠΈΡ‰Ρ‘Π½Π½Ρ‹ΠΉ (HTTPS) Π΄ΠΎΠΌΠ΅Π½
  • Иконка для прСдоставлСния прилоТСния Π½Π° устройствС
  • ЗарСгистрированный service worker, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ Π² off-line Ρ€Π΅ΠΆΠΈΠΌΠ΅ (Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ трСбуСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Chrome Π½Π° Android)

Π€Π°ΠΉΠ» манифСста

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ элСмСнтом являСтся Ρ„Π°ΠΉΠ» манифСста, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдставлСна вся информация ΠΎ Π²Π΅Π±-сайтС Π² JSON Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ находится Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ Π²Π΅Π±-прилоТСния. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°ΠΊ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ прилоТСния, paths ΠΏΡƒΡ‚ΠΈ ΠΊ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для прСдставлСния прилоТСния Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСмах (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² качСствС Π·Π½Π°Ρ‡ΠΊΠ° домашнСго экрана), ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для использования ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅. Π­Ρ‚Π° информация Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния прилоТСния ΠΏΡ€ΠΈ установкС ΠΈ Π½Π° домашнСм экранС.

Π€Π°ΠΉΠ» js13kpwa.webmanifest Π²Π΅Π±-прилоТСния js13kPWA Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½ Π² Ρ€Π°Π·Π΄Π΅Π» <head> Ρ„Π°ΠΉΠ»Π° index.html с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ строчки ΠΊΠΎΠ΄Π°:

<link rel="manifest" href="js13kpwa.webmanifest">

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: БущСствуСт нСсколько Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ: manifest.webapp Π±Ρ‹Π» популярСн Π² манифСстах ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Firefox OS, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ manifest.json ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ содСрТаниС ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΠΎ структурС JSON. Однако, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ .webmanifest явно упоминаСтся Π² W3C manifest specification, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ этого стандарта.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ„Π°ΠΉΠ»Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

{
    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "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/js13kpwa/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 ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ большС ΠΏΠΎΠ»Π΅ΠΉ, Ρ‡Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅ β€” Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ссылку Π½Π° Web App Manifest reference.

«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° домашний экран» (ΠΊΡ€Π°Ρ‚ΠΊΠΎ: a2hs) — это функция, рСализованная Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, которая Π±Π΅Ρ€Ρ‘Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π½Π°ΠΉΠ΄Π΅Π½Π½ΡƒΡŽ Π² Π²Π΅Π±-манифСстС, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ для добавлСния прилоТСния Π½Π° домашний экран устройства со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ ΠΈ ΠΈΠΌΠ΅Π½Π΅ΠΌ. Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ, описанных Π²Ρ‹ΡˆΠ΅.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ посСщаСт PWA с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒΡΡ Π·Π½Π°Ρ‡ΠΎΠΊ, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ установки прилоТСния Π² качСствС PWA.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ»ΠΈΠΊΠ½Π΅Ρ‚ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ, отобразится Π±Π°Π½Π½Π΅Ρ€ установки. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π² Π±Π°Π½Π½Π΅Ρ€Π΅ гСнСрируСтся Π½Π° основС Ρ„Π°ΠΉΠ»Π°-манифСста β€” имя ΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠΈ.

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ, появляСтся ΠΎΠΊΠ½ΠΎ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Ρ‹ ярлык прилоТСния ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ для подтвСрТдСния дСйствий.

ΠŸΡ€ΠΈ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠΈ ярлык Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ПослС этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ сразу Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΈΠ½ΠΎΠ³Π΄Π° Ρƒ PWA (Π² зависимости ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ/ΠΈΠ»ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы) Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ отобраТаСтся ΠΈΠΊΠΎΠ½ΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π­ΠΊΡ€Π°Π½ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π½Π° основС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· манифСста, создаётся заставка, отобраТаСмая ΠΏΡ€ΠΈ запускС PWA

Иконка ΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ использовались для создания заставки.

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ PWA устанавливаСмыми, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Π΅Π±-манифСст, ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ экран.

Для получСния большСй ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ наш Add to Home screen Π³Π°ΠΉΠ΄ (en-US). Π’ настоящСС врСмя ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Firefox для Android 58+, ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ Chrome ΠΈ Android Webview 31+, Ρ‚Π°ΠΊΠΆΠ΅ Opera для Android 32+, Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒΡΡ Π² блиТайшСм Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ послСднСму Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρƒ PWA-Π³ΠΎΠ»ΠΎΠ²ΠΎΠ»ΠΎΠΌΠΊΠΈ β€” ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌΡƒ запуску с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.

  • Назад (en-US)
  • ΠžΠ±Π·ΠΎΡ€: Progressive (en-US)
  • Π”Π°Π»Π΅Π΅ (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ сайт Π² мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ PWA

Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ AFFINAGE Никита Π’ΠΎΡ€ΠΎΠ±ΡŒΠ΅Π² рассказываСт, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ PWA-прилоТСния, Π΅ΡΡ‚ΡŒΒ Π»ΠΈ ΡƒΒ Π½ΠΈΡ… ограничСния ΠΈΒ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ с PWA-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π»ΡƒΡ‡ΡˆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ…. Π’Β ΠΊΠΎΠ½Ρ†Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Β β€” инструкция ΠΏΠΎΒ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ прогрСссивного Π²Π΅Π±-прилоТСния в сайт.

Никита Π’ΠΎΡ€ΠΎΠ±ΡŒΡ‘Π²

Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ AFFINAGE

PWAΒ β€” промСТуточная тСхнология ΠΌΠ΅ΠΆΠ΄Ρƒ сайтами ΠΈΒ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ прилоТСниями. ΠŸΠΎΒ ΡΡƒΡ‚ΠΈ, это «прокачанная» копия Π²Π΅Π±-сайта, размСщСнная на устройствС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΒ Π½Π΅Β Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π°Ρ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ для iOS ΠΈΠ»ΠΈ Android.

Β«ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΠΎΠ΅ web-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (Π°Π½Π³Π». progressive web app, PWA)Β β€” тСхнология Π²Β web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, которая Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΈΒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ трансформируСт сайт Π²Β ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Β Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅)Β»

Π’Π°ΠΊ описываСтся тСхнология Π²Β Wikipedia, Π½ΠΎΒ Π½Π°ΠΌ этого ΠΌΠ°Π»ΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅.

PWA-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Β Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ для iOS ΠΈΒ Android: ΠΎΠ½ΠΎ устанавливаСтся Π½Π°Β Π³Π»Π°Π²Π½Ρ‹ΠΉ экран смартфона,Β β€” для этого Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π±Π°Π·Ρƒ на этапС Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. МоТно ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ PWAΒ β€” это сайты ΡΒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ, которая позволяСт ΠΈΠΌΒ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ Π½Π°Β Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния.

Π Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ эти прилоТСния Ρ‚Π°ΠΊΒ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈΒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния: ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Push-увСдомлСния, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π²Β Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΌ ΠΎΡ„Π»Π°ΠΉΠ½-Ρ€Π΅ΠΆΠΈΠΌΠ΅, ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ локально. ΠŸΠΎΒ Π²Π½Π΅ΡˆΠ½Π΅ΠΌΡƒ Π²ΠΈΠ΄Ρƒ ΠΎΠ½ΠΈ Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅Β ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Β Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈΒ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π½Π°Β Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС (домашнСм экранС) для быстрого запуска.

PWA, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ сайты, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π°Β Π΄ΠΎΠΌΠ΅Π½Π°Ρ… с https-ΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ поддСрТиваСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅Β Π±Ρ‹Π²Π°Π΅Ρ‚ Π΄Π²ΡƒΡ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… Π΄ΠΎΠΌΠ΅Π½ΠΎΠ².

Π—Π°Π΄Π°Ρ‡ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ PWA:

  • Π‘Ρ‚ΠΈΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ.
  • Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π²Β ΠΎΠ΄Π½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ на экранС Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°.
  • ΠŸΠΎΠ²Ρ‹ΡˆΠ°Ρ‚ΡŒ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ Π±Ρ€Π΅Π½Π΄Π°. Иконка с логотипом ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ всСгда Π½Π°Β Π²ΠΈΠ΄Ρƒ Π½Π°Β Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС ΡƒΒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • ΠŸΠΎΠ²Ρ‹ΡˆΠ°Ρ‚ΡŒ срСдний Ρ‡Π΅ΠΊ сдСлки, допродавая ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.
  • ΠžΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ на связи с клиСнтом: ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Push-увСдомлСния ΠΎΒ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ²Π°Ρ€ ΠΏΡ€ΠΈΠ±Ρ‹Π» Π²Β ΠΏΡƒΠ½ΠΊΡ‚ самовывоза ΠΈΠ»ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ доставлСн сСгодня.
  • Π­ΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π½Π°Β Ρ€Π΅ΠΊΠ»Π°ΠΌΠ΅. НС нуТно Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠ³ΠΎΠ½ΡΡŽΡ‰ΡƒΡŽ Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ с новой Π°ΠΊΡ†ΠΈΠ΅ΠΉ, достаточно ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ для Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².
  • Π˜Π·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚Β ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ†ΠΈΠΈ в поисковой Π²Ρ‹Π΄Π°Ρ‡Π΅. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π²Β ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½Π΅Ρ‚ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ², Π²Β ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ от поисковой Π²Ρ‹Π΄Π°Ρ‡ΠΈ.

Однако Π»ΡŽΠ±ΡƒΡŽ из этих Π·Π°Π΄Π°Ρ‡ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΈΒ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ в случаС с PWA-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°ΠΊ равСнства ΠΌΠ΅ΠΆΠ΄Ρƒ PWA Frontend developer ΠΈΒ Mobile developer, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ ΠΎΠ΄Π½ΠΈ ΠΈΒ Ρ‚Π΅Β ΠΆΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ.

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ PWA

ВСхнология Π±Ρ‹Π»Π° создана ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Microsoft Π΅Ρ‰Π΅ Π²Β 2000Β Π³ΠΎΠ΄Ρƒ. Π’Β 2007 сотрудники Apple Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ свой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ HTML-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ прилоТСния для ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ iPhone Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π»ΠΈΡΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π°Β ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ web. Однако успСха тСхнология нС сыскала ΠΏΠΎΒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ скудного UX, и в скором Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ появился App Store, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΒ Ρ„Π°ΠΊΡ‚Ρƒ ΠΎΡ‚Π»ΠΎΠΆΠΈΠ» Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ PWA.

ОТила ΠΈΒ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π»Π° ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ ΠΈΠ·Π²Π΅ΡΡ‚Π½ΠΎΡΡ‚ΡŒ тСхнология Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Β 2015 Π³ΠΎΠ΄Ρƒ благодаря Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡŽ возмоТностСй Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Google Chrome ΠΈΒ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡŽ Service Worker ΠΈΒ Web App Manifest. Π’ΠΎΠ³Π΄Π°Β ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ѐрэнсис БСрримэн ΠΈΒ ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ Google Chrome АлСкс РассСл ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ PWA.

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ прогрСссивного Π²Π΅Π±-прилоТСния Π½Π°Ρ‡Π°Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ во всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ систСмы. ΠšΒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π²Β Windows, начиная с 10 вСрсии, появилась Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ распространСния PWA Ρ‡Π΅Ρ€Π΅Π· Microsoft Store.

Но всС ТС основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° развития Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈΒ β€” ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΒ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ мобильного Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°: Ρ‚Π°ΠΊ, в России ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ ΠΏΠΎΒ ΠΈΡ‚ΠΎΠ³Π°ΠΌ 2021 Π³ΠΎΠ΄Π° составил Ρ€Π΅ΠΊΠΎΡ€Π΄Π½Ρ‹Π΅ 83%.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ PWA

БущСствуСт ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ мноТСство прогрСссивных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ β€” Telegram, Pinterest, Tinder, Starbucks.

Появились ΠΈΒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ сайты-ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΈ PWA, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ appsco.pe ΠΈΒ findpwa.com. Π”Ρ€ΡƒΠ³ΠΈΠ΅ рСсурсы для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ интСрСсуСтся Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ прогрСссивных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉΒ β€” pwastats.com ΠΈΒ web.dev, Ρ€Π°Π·Π΄Π΅Π» Case Study.

На этих сайтах ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ мноТСство ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… кСйсов примСнСния PWA с цифрами ΠΈΒ ΡΒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌΠΈ. Один ΠΈΠ·Β ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²Β β€” ΠΊΠ°ΠΊ Starbucks смогли Π²Β Π΄Π²Π° Ρ€Π°Π·Π° ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ количСство Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° PWA

Π§Π°Ρ‰Π΅ всСго PWA состоит ΠΈΠ·Β Service Workers, Application Manifest, ΠžΡ„Π»Π°ΠΉΠ½-ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… PWA-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ синхронизации, Push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, Media API ΠΈΒ Geolocation API.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ структуры PWA

ΠœΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΉ структуры мноТСство, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ трСбования для Ρ€Π°Π±ΠΎΡ‚Ρ‹ PWAΒ β€” это:

  • Π’Π°Π»ΠΈΠ΄Π½ΠΎΠ΅ ΠΈΒ Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½ΠΎΠ΅ HTTPS-ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ (ΡƒΒ Π΄ΠΎΠΌΠ΅Π½Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ установлСн SSL-сСртификат).
  • УспСшно установлСнный Ρ„Π°ΠΉΠ» Service Worker`Π°.
  • ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ установлСнный ΠΈΒ Π²Π°Π»ΠΈΠ΄Π½Ρ‹ΠΉ JSON-Ρ„Π°ΠΉΠ» манифСста.

Π›ΡŽΠ±ΠΎΠΉ сайт ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΈΒ Ρ‚Π΅ΠΌ самым ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ прогрСссивноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Service Worker

Β«Π‘Π΅Ρ€Π΄Ρ†Π΅Β» PWAΒ β€” Service Worker. Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΠΊΡΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ слой ΠΌΠ΅ΠΆΠ΄Ρƒ фронтэндом и бэкэндом, находящийся Π²Β Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ВсС запросы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ΄ΡƒΡ‚ Ρ‡Π΅Ρ€Π΅Π· Π½Π΅Π³ΠΎ.

Π˜Π·Β Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰ ΡƒΒ Service Worker’a Π΅ΡΡ‚ΡŒ доступ ΠΊΒ Cache-Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Ρƒ для web-рСсурсов, ΠΈΒ IndexDB для Π΄Π°Π½Π½Ρ‹Ρ…. Но, самоС Π³Π»Π°Π²Π½ΠΎΠ΅,Β β€” полная свобода для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ бизнСс-Π»ΠΎΠ³ΠΈΠΊΠΈ.

Π‘Β Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния написания ΠΊΠΎΠ΄Π°, Service Worker прСдставляСт собой Javascript-Ρ„Π°ΠΉΠ». Π’Β Π½Π΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ опрСдСляСт Π»ΠΎΠ³ΠΈΠΊΡƒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с приходящими из фронтэнда запросами ΠΈΒ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Web App manifest

Web App manifestΒ β€” JSON-Ρ„Π°ΠΉΠ», Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ прилоТСния, ΠΈΠΊΠΎΠ½ΠΊΡƒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ PWA (fullscreen, standalone ΠΈΒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ отобраТСния) ΠΈΒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Β«ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ» PWA ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ на домашний экран смартфона.

ВСхничСскиС особСнности PWA

Бпособы установки PWA

БущСствуСт Ρ‚Ρ€ΠΈ способа установки PWA: ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ автоматичСского увСдомлСния, Ρ‡Π΅Ρ€Π΅Π· «…» (Ρ‚Ρ€ΠΈ Ρ‚ΠΎΡ‡ΠΊΠΈ) в мСню Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΡƒ установки на страницС.

Π’Π°ΠΊ выглядит установка ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ автоматичСского увСдомлСния

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ установки Ρ‡Π΅Ρ€Π΅Π· «…» (Ρ‚Ρ€ΠΈ Ρ‚ΠΎΡ‡ΠΊΠΈ) в мСню Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ установки ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ установки Π½Π° страницС

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ PWA

PWA Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Β Π±Π°Π·Π΅ WebView, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. WebView ΠΎΡ‡Π΅Π½ΡŒ популярный способ для отобраТСния интСрфСйсов.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ PWA послС установки прилоТСния, опрСдСляСтся ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмой iOS ΠΈΠ»ΠΈ Android.

Для Android ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Google Chrome, а для iOSΒ β€” Safari.

ΠžΡ‡Π΅Π½ΡŒ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ PWA открываСтся Π²ΠΎΒ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½ΠΎΒ Π±Π΅Π· интСрфСйса самого Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Однако ΠΌΡ‹Β ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ интСрфСйс Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ссли Π½Π°ΠΌ это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ отобраТСния PWA

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° PWA

ΠŸΠΎΒ Π΄Π°Π½Π½Ρ‹ΠΌ caniuse.com, 94% устройств ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ service workers, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ установки на домашний экран Π΅ΡΡ‚ΡŒ ΡƒΒ 87% ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ PWA

PWA ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ мноТСство способов взаимодСйствия с аппаратной Ρ‡Π°ΡΡ‚ΡŒΡŽ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°.

Π’Π°ΠΊΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠ°ΠΊ доступ ΠΊΒ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π°ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, NFC, считываниС QR, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° AR/VR ΠΏΠΎΠΊΠ° нСдоступны, но в блиТайшСС врСмя ΠΈΡ…Β Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ±ΠΎ всСх функциях с примСрами ΠΊΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ на сайтС whatpwacando.today.

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΈΒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

Для PWA Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° Ρ„Π°ΠΉΠ»Π°Β β€” Service Worker ΠΈΒ Web App manifest,Β β€” поэтому для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚ всС Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ. Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·Β Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт прСдустановлСнный Ρ„Π°ΠΉΠ» манифСста, прСдустановлСнный Ρ„Π°ΠΉΠ» service worker’a ΠΈΒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с PWA:

  • React PWA Library
  • Angular PWA Framework
  • Vue PWA Framework
  • Ionic PWA Framework
  • Svelte PWA Framework

PWA Builder

Π‘Β Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ прогрСссивноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΒ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈΠ·Β PWA для размСщСния прилоТСния Π²Β Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сторах. ΠŸΡ€ΠΈ этом Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡Π΅ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²Β AppStore Π½Π°Β Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ считаСтся ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ„ΠΈΡ‡Π΅ΠΉ ΠΈΒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ нС всСгда ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ качСства PWA

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ доступ ΠΊΒ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠΉ части

ΠšΒ Π½Π΅Π΄ΠΎΡΡ‚Π°Ρ‚ΠΊΠ°ΠΌ PWA ΠΌΠΎΠΆΠ½ΠΎ отнСсти ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ доступ ΠΊΒ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠΉ части мобильного устройства.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ прогрСссивныС Π²Π΅Π±-прилоТСния Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π²Β Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΎΠ½ΠΈ Π½Π΅Β ΠΈΠΌΠ΅ΡŽΡ‚ прямого доступа ко всСм возмоТностям ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ (ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы ΠΈΒ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹ΠΌ возмоТностям), ΠΊΒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΈΠΌΠ΅Π»ΠΎΒ Π±Ρ‹ доступ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, созданноС с использованиСм SDK-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

Но поддСрТка и возмоТности постоянно Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΒ ΠΈΠΌΠ΅ΡŽΡ‰Π΅ΠΉΡΡ Π½Π°Β Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ достаточно для рСализация Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Π·Π°Π΄Π°Ρ‡.

Установка Π²Β ΠΎΠ±Ρ…ΠΎΠ΄ ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

PWA, Ρ…ΠΎΡ‚ΡŒ ΠΈΒ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ в сторы, Π½ΠΎΒ ΠΈΡ…Β Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΉ способ установки — Ρ‡Π΅Ρ€Π΅Π· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Ρ‚.Π΅. ΠΎΠ½ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²Β ΠΎΠ±Ρ…ΠΎΠ΄ сторов.

Π­Ρ‚ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ плюс, Ρ‚.ΠΊ.Β Π²Β Ρ‚Π°ΠΊΠΎΠΌ случаС нС приходится ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒΡΡ с политикой ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ прилоТСния. Но это ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ натянутый Ρ„Π°ΠΊΡ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΒ Π½Π°Β Π°Π½Π΄Ρ€ΠΎΠΈΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π°ΠΏΠΊ-Ρ„Π°ΠΉΠ» ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π²Β ΠΎΠ±Ρ…ΠΎΠ΄ стора. 😊

Ѐоновая установка ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅Β Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ обновлСния. Когда вы выпускаСтС Π½ΠΎΠ²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ своСго прилоТСния, всС ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ автоматичСски ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Π½ΠΎΠ²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ.

Π’Ρ‹Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ об измСнСниях. ДостигаСтся это ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ систСмы ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Ρ„Π°ΠΉΠ»ΠΎΠ² прилоТСния. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ измСнСния ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ на устройствС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΒ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Π½Π°Β Π΄ΠΎΠΌΠ΅Π½Π΅.

МСньший Ρ€Π°Π·ΠΌΠ΅Ρ€ прилоТСния

Π Π°Π·ΠΌΠ΅Ρ€ PWA-прилоТСния, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅Β ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 1-3Β ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚. Π­Ρ‚ΠΎ мСньшС, Ρ‡Π΅ΠΌ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘Ρ€Π΅Π΄Π½ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ мобильного ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΒ Π΄Π°Π½Π½Ρ‹ΠΌ 2017Β Π³ΠΎΠ΄Π°, 38 Мб для iOS ΠΈΒ 15 Мб для Android.

МСньшиС Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ Π½Π°Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

Для ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, бизнСса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΈΒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° PWA финансово Π²Ρ‹Π³ΠΎΠ΄Π½Π΅Π΅.

rabota.ru Q1 2022

Π’Β ΠΎΠ±Ρ‰Π΅ΠΌ, PWA ΠΈΠΌΠ΅Π΅Ρ‚ свои ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ особСнности и нСдостатки.

Π’Π°Π±Π»ΠΈΡ†Π° особСнностСй PWA ΠΈ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

В связи с ограничСниями Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠΉ части, PWA Π½Π΅Β ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ прилоТСния, Π½ΠΎΒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ PWA-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ потрСбности 90% ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ:

  • ΠžΡ‚ΠΏΡ€Π°Π²ΠΊΠ° Push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.
  • Установка ΠΈΠΊΠΎΠ½ΠΊΠΈ на домашний экран, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстрый доступ ΠΊΒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ.
  • Доступ ΠΊΒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½Ρ‹ΠΌ функциям, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹, ΠΌΠΈΠΊΡ€ΠΎΡ„ΠΎΠ½Π°.
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΎΡ„Π»Π°ΠΉΠ½.

ΠœΡ‹Β Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ PWA-прилоТСния ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ:

  • ΠŸΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΈΒ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ²/ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстрый доступ ΠΊΒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΌ Π·Π°ΠΊΠ°Π·Π°ΠΌ.
  • ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΈΠΏΠΎΡ‚Π΅Π·Ρƒ ΡΒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ финансовыми влоТСниями: ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π²Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ прилоТСния, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Β PWA.
  • Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ в сТатыС сроки
  • ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠ°Π½Π°Π» взаимодСйствия с компаниСй.

Как ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ PWA в сайт: инструкция для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

Π‘ΠΎΠ±Ρ€Π°Π»ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ рСсурсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈΒ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ прогрСссивноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ на любом стСкС.

1. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ manifest ΠΈΒ serviceworker

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ по добавлСнию Ρ„Π°ΠΉΠ»Π° manifest Π²Β ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. ПояснСниС по полям Ρ„Π°ΠΉΠ»Π°,
  • РСсурс для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»Π° manifest.
  • ДокумСнтация ΠΏΠΎΒ manifest ΠΎΡ‚Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»Π° manifest, пояснСниС по полям, ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с браузСрами.
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ по добавлСнию Ρ„Π°ΠΉΠ»Π° serviceworker, Π΅Π³ΠΎ рСгистрация, ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ».
  • ДокумСнтация ΠΏΠΎΒ serviceworker ΠΎΡ‚Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»Π°, Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π°, ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ», ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, запросы.

2. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΒ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ workbox

  • ДокумСнтация по всСм способам и вариациям ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ workbox.
  • ВсС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΈΒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ с workbox.

3. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ на сайтС для установки прилоТСния

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ по добавлСнию ΠΊΠ½ΠΎΠΏΠΊΠΈ установки прилоТСния.
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ по добавлСнию ΠΊΠ½ΠΎΠΏΠΊΠΈ установки прилоТСния.

4. Π—Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π½Π°Β ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ

  • ДокумСнтация ΠΎΒ push-увСдомлСниях со всСми тонкостями.
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΎΡ‚Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla по добавлСнию push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.

ΠŸΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹, Π½ΠΎΒ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… этапов ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ.

5. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ стратСгии ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ для статичных Ρ„Π°ΠΉΠ»ΠΎΠ²

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ по настройкС стратСгий ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ с примСрами и пояснСниСм.
  • Π’Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΈ стратСгий ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ, пояснСниС ΠΊΠ°ΠΆΠ΄ΠΎΠΉ.

6. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π· ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ кСша

ДокумСнтация ΠΎΡ‚Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla ΠΏΠΎΒ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ обновлСния кСша.

7. Π—Π°ΠΏΠΈΡΡŒ ΠΈΒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… Π²Β IndexedDB

  • ДокумСнтация ΠΎΡ‚Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla ΠΏΠΎΒ IndexedDB, интСрфСйсам, спСцификациСй.
  • ДокумСнтация ΠΏΠΎΒ IndexedDB с примСрами использования.

Π˜Ρ‚ΠΎΠ³

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° PWA ΠΌΠ°Π»ΠΎ Ρ‡Π΅ΠΌ отличаСтся ΠΎΡ‚Β ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ и со стороны написания ΠΊΠΎΠ΄Π°, и со стороны Π΄ΠΈΠ·Π°ΠΉΠ½Π°,Β β€” Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‡ΡƒΡ‚ΡŒ большС ΠΊΠΎΠ΄Π°, Π°Β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ для отобраТСния Π½Π°Β Π³Π»Π°Π²Π½ΠΎΠΌ экранС.

PWA ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ схоТСй Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ и спСктром Π·Π°Π΄Π°Ρ‡ с нативными прилоТСниями, Π½ΠΎΒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° прогрСссивного Π²Π΅Π±-прилоТСния ΠΊΡƒΠ΄Π° быстрСС и дСшСвлС. А СщС PWA Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Β ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-прилоТСния. Если Π²Ρ‹Β Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΊΠ°Ρ‡Π°Ρ‚ΡŒ свои скиллы Π²Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ PWA, ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΊΒ Π½Π°ΠΌ!

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ свой Π²Π΅Π±-сайт Π² Π²Ρ‹ΡΠΎΠΊΠΎΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ PWA β€” прилоТСния для Windows

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€

LinkedIn

ЀСйсбук

ЭлСктронная ΠΏΠΎΡ‡Ρ‚Π°

  • Π‘Ρ‚Π°Ρ‚ΡŒΡ

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт Π² ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ высококачСствСнноС PWA (прогрСссивноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) ΠΌΠΎΠΆΠ½ΠΎ Π·Π° ΠΎΠ±Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ€Ρ‹Π²! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅ΠΌ вас Ρ‡Π΅Ρ€Π΅Π· сквозной процСсс.

Π¨Π°Π³ 1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΎΡ‚Ρ‡Π΅Ρ‚ Π² PWA Builder

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π½Π° вашСм Π²Π΅Π±-сайтС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ PWA.

  1. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ PWA Builder
  2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ URL-адрСс Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π² PWA, ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠŸΡƒΡΠΊ
  3. ΠŸΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒ PWA ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ ΠΎΡ‚Ρ‡Π΅Ρ‚Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ PWA, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Π½Π° вашСм Π²Π΅Π±-сайтС, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ‚.

Π¨Π°Π³ 2. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ свою ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ успСваСмости PWA

Π’ вашСм ΠΎΡ‚Ρ‡Π΅Ρ‚Π΅ PWA содСрТится ΠΎΡ†Π΅Π½ΠΊΠ° вашСго Π²Π΅Π±-сайта ΠΈΠ· максимального числа 100 Π±Π°Π»Π»ΠΎΠ². ΠžΡ†Π΅Π½ΠΊΠΈ основаны Π½Π° Ρ‚Ρ€Π΅Ρ… катСгориях Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

ΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚

PWA ΠΎΡ†Π΅Π½ΠΈΠ²Π°Π΅Ρ‚ манифСст Π²Π΅Π±-прилоТСния вашСго Π²Π΅Π±-сайта, Ссли ΠΎΠ½ доступСн, ΠΈ опрСдСляСт ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΈΠ»ΠΈ значСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свою ΠΎΡ†Π΅Π½ΠΊΡƒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ значСния Π»ΠΈΠ±ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π² Ρ„Π°ΠΉΠ» манифСста, Π»ΠΈΠ±ΠΎ воспользовавшись ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ манифСста.

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅

ИзмСнСния, сдСланныС Π² ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ манифСстов, Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Ρ‹ Π½Π° вашСм Π²Π΅Π±-сайтС. ВносимыС Π²Π°ΠΌΠΈ измСнСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ PWA Builder Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ создании PWA.

Π”ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния , ΠΈΠ½Π°Ρ‡Π΅ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒ PWA Π½Π΅ смоТСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ PWA. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ просто Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ манифСста, Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΈΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΠΈ start_url.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ поля Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹, Π½ΠΎ Π²Π°ΠΆΠ½Ρ‹ для удобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ PWA. ΠΠ°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ рСкомСндуСтся ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ всС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ значСния, хотя PWA Builder ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ PWA Π±Π΅Π· Π½ΠΈΡ…. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ значСния Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Ρ€Π΅ΠΆΠΈΠΌ отобраТСния, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° экрана-заставки, описаниС, ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, снимки экрана, Π·Π½Π°Ρ‡ΠΎΠΊ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π½Π°Ρ‡ΠΎΠΊ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ маски, ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ ΠΈ ярлыки.

ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΏΡ€ΠΈ нСобходимости. ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ возрастной Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ прилоТСния.

БСрвисный Ρ€Π°Π±ΠΎΡ‚Π½ΠΈΠΊ

Service Worker Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π³Π΄Π΅ Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»Π° Π±Ρ‹ ошибка 404. PWA Builder Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ сСрвисного Ρ€Π°Π±ΠΎΡ‚Π½ΠΈΠΊΠ° для создания вашСго PWA, Π½ΠΎ Ссли Ρƒ вас Π΅Π³ΠΎ Π½Π΅Ρ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… сСрвисных Ρ€Π°Π±ΠΎΡ‡ΠΈΡ…, прСдоставляСмых PWA Builder. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ сСрвис-Π²ΠΎΡ€ΠΊΠ΅Ρ€:

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Service Worker Options Π² мСню.
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ сСрвисного Ρ€Π°Π±ΠΎΡ‚Π½ΠΈΠΊΠ° ΠΈΠ· Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ списка. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ сущСствуСт мноТСство Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ; ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π½ΠΈΠΊΠ° слуТбы, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСго для вашСго ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ случая использования.
  3. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ сСрвис-Π²ΠΎΡ€ΠΊΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹ Π²Π΅Ρ€Π½Π΅Ρ‚Π΅ΡΡŒ ΠΊ своСй ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅ успСваСмости PWA.

Π‘Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ

ВсС PWA, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ PWA Builder, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Ρ‚Ρ€Π΅Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΠΊΠΎΠ»ΠΎΠ² бСзопасности.

  1. Π’Π°Ρˆ сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTTPS.

  2. Π’Π°Ρˆ сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сСртификат HTTPS.

    Если Π½Π° вашСм Π²Π΅Π±-сайтС Π½Π΅Ρ‚ сСртификата HTTPS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Azure, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ HTTPS. Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ Π΅ΡΡ‚ΡŒ бСсплатныС сторонниС инструмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Letsencrypt, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ позволят Π²Π°ΠΌ бСсплатно ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ сСртификат HTTPS.

  3. Π’Π°Ρˆ сайт Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” это ΠΊΠΎΠ³Π΄Π° страница, обслуТиваСмая ΠΏΠΎ HTTPS, содСрТит рСсурсы, Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Π΅ ΠΏΠΎ HTTP. Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ставит ΠΏΠΎΠ΄ ΡƒΠ³Ρ€ΠΎΠ·Ρƒ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ HTTPS ΠΈ вашСго PWA.

Для создания PWA Π²Π°ΠΌ потрСбуСтся нСсколько Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· вашСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи Π¦Π΅Π½Ρ‚Ρ€Π° ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ². Если Ρƒ вас Π½Π΅Ρ‚ MSA, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ инструкции ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Windows Developer Program.

Если Π²Ρ‹ Π΅Ρ‰Π΅ этого Π½Π΅ сдСлали, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ PWA, Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π² Π½ΠΎΠ²ΠΎΠ΅ имя. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ своС имя, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΠ°Ρ‡Π°Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ прилоТСния.

Π—Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° . На страницС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΏΠ°ΠΊΠ΅Ρ‚Π° вашСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ вашСго издатСля ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ имя вашСго издатСля. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ эти значСния ΠΈ Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ Π² PWA Builder.

Π¨Π°Π³ 4. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ PWA Π² PWA Builder

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π΅ΡΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для создания PWA Π² PWA Builder. Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ Π½Π° сайт PWA Builder ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Generate .

ΠŸΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒ PWA запросит Ρƒ вас ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΈΠ· Π¦Π΅Π½Ρ‚Ρ€Π° ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ² Π½Π° шагС 3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ значСния ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ .

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ PWA Builder создаст PWA, ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ автоматичСски Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ Π΅Π³ΠΎ. Π’Π°ΡˆΠ΅ PWA ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½ΠΎ Π² ZIP-Ρ„Π°ΠΉΠ», содСрТащий ΡˆΠ΅ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»ΠΎΠ².

Π€Π°ΠΉΠ» msix β€” это основной ΠΏΠ°ΠΊΠ΅Ρ‚ прилоТСния PWA. Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» установит вашС PWA Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π€Π°ΠΉΠ» appx β€” это классичСский ΠΏΠ°ΠΊΠ΅Ρ‚ прилоТСния. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки PWA Π² Π±ΠΎΠ»Π΅Π΅ старых вСрсиях Windows. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π¨Π°Π³ 5. ΠžΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Microsoft Store

Π­Ρ‚ΠΈ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π² Microsoft Store Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° MSIX. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструкции ΠΏΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² PWA Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½ см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠžΡ‚ΠΏΡ€Π°Π²ΠΊΠ° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠžΠ±Ρ€Π°Ρ‚Π½Π°Ρ связь

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС ΠΎΡ‚Π·Ρ‹Π²Ρ‹ ΠΎ страницС

ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΠ΅ возмоТности установки PWA β€” прогрСссивныС Π²Π΅Π±-прилоТСния (PWA)

Одним ΠΈΠ· ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΡ… аспСктов PWA являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π° устройство, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, ΠΏΠΎΡΡ‚ΠΎΡΠ½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈΡ… устройства, которая ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ нСпосрСдствСнно ΠΈΠ· ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы, ΠΊΠ°ΠΊ ΠΈ любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

ΠŸΠΎΠ΄Ρ‹Ρ‚ΠΎΠΆΠΈΠΌ это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  • PWA ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ нСпосрСдствСнно ΠΈΠ· Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°.
  • PWA ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ процСсс установки.
  • ПослС установки PWA ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ прилоТСния Π½Π° устройствС вмСстС с прилоТСниями для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.
  • ПослС установки PWA ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ ΠΊΠ°ΠΊ Π²Π΅Π±-сайт Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π’ этом руководствС ΠΌΡ‹ обсудим ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· этих Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Однако сначала ΠΌΡ‹ обсудим трСбования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ тСхничСским трСбованиям. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ это ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ трСбованиями для Π²Π΅Π±-прилоТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ PWA.

ΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚ Π²Π΅Π±-прилоТСния

ΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚ Π²Π΅Π±-прилоТСния β€” это Ρ„Π°ΠΉΠ» JSON, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, ΠΊΠ°ΠΊ PWA Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ вСсти сСбя Π½Π° устройствС. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ PWA, ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ устанавливаСмым, Π° Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ манифСст.

ΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта Π² HTML-ΠΊΠΎΠ΄ прилоТСния:

 

  <Π³ΠΎΠ»ΠΎΠ²Π°>
    
    
  
  <Ρ‚Π΅Π»ΠΎ>

 

Если PWA ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ страницы, каТдая страница Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° манифСст Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

ΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚ содСрТит ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ JSON, содСрТащий Π½Π°Π±ΠΎΡ€ элСмСнтов, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… опрСдСляСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ аспСкты внСшнСго Π²ΠΈΠ΄Π° ΠΈΠ»ΠΈ повСдСния PWA. Π’ΠΎΡ‚ довольно минималистичный манифСст, содСрТащий всСго Π΄Π²Π° элСмСнта: "name" ΠΈ "icons" .

 {
  "name": "Мой PWA",
  "Π·Π½Π°Ρ‡ΠΊΠΈ": [
    {
      "src": "ΠΈΠΊΠΎΠ½ΠΊΠΈ/512.png",
      "Ρ‚ΠΈΠΏ": "ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅/png",
      "Π Π°Π·ΠΌΠ΅Ρ€Ρ‹": "512x512"
    }
  ]
}
 
Π’Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹Π΅ элСмСнты манифСста

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π° основС Chromium, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Google Chrome, Samsung Internet ΠΈ Microsoft Edge, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ манифСст Π²ΠΊΠ»ΡŽΡ‡Π°Π» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты:

  • имя
  • ΠΈΠΊΠΎΠ½ΠΊΠΈ
  • start_url
  • дисплСй ΠΈ/ΠΈΠ»ΠΈ display_override

ПолноС описаниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‡Π»Π΅Π½Π° см. Π² справочной Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ манифСсту Π²Π΅Π±-прилоТСния.

HTTPS

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ€Π΅Π· HTTPS.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ для упрощСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ HTTPS, Ссли доступ ΠΊ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ осущСствляСтся Ρ‡Π΅Ρ€Π΅Π· Π΄ΠΎΠΌΠ΅Π½ localhost .

Service Worker

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Service Worker с ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ событий fetch , ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ возмоТности Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ Π½Π°ΠΉΡ‚ΠΈ прилоТСния Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для своСй ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Google Play Store ΠΈΠ»ΠΈ Apple Store.

Если вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ соотвСтствуСт трСбованиям для установки, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎΡ‚ процСсс спСцифичСн для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ:

  • Как ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ PWA Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Google Play
  • Как ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ PWA Π² Microsoft Store
  • Как ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ PWA Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Meta Quest

PWABuilder β€” это инструмСнт, ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‰ΠΈΠΉ процСсс ΡƒΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ ΠΈ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ PWA для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Google Play Store, Microsoft Store, Meta Quest Store ΠΈ iOS App Store.

Если Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ своС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚Ρ‚ΡƒΠ΄Π°, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ посСщаСт Π²Π΅Π±-страницу, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ, Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π΅. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ своС PWA ΠΊΠ°ΠΊ Π²Π΅Π±-сайт, дСлая Π΅Π³ΠΎ доступным для поиска Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΉΡ‚ΠΈ Π΅Π³ΠΎ Ρ‚Π°ΠΌ.

Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ PWA ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅Π΅ ΠΈΠ· ΠΎΠ±ΠΎΠΈΡ… ΠΌΠΈΡ€ΠΎΠ². Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ прогрСссивноС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с PWA: Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ сталкиваСтся с вашим PWA Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π΅Π³ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс для установки PWA ΠΈΠ· Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° отличаСтся ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΈ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ. НапримСр, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ» Π² адрСсной строкС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° страницу:

.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅ с вопросом, хотят Π»ΠΈ ΠΎΠ½ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ PWA, ΠΈ Ссли ΠΎΠ½ΠΈ согласны, PWA установлСно.

Π’ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠΈ отобраТаСтся имя ΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ PWA, взятыС ΠΈΠ· ΠΈΠΌΠ΅Π½ΠΈ ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ элСмСнтов манифСста.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° установки PWA ΠΈΠ· Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° зависит ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

На Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС:

  • Firefox ΠΈ Safari Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ установку PWA Π½Π° Π»ΡŽΠ±Ρ‹Ρ… Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСмах.
  • Chrome ΠΈ Edge ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ установку PWA Π² Linux, Windows, macOS ΠΈ Chromebook.

На ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах:

  • Firefox, Chrome, Edge, Opera ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Samsung ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ установку PWA Π½Π° Android.
  • Волько Safari Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΎ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ PWA Π½Π° iOS.

Запуск ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΡ Π½Π° установку

PWA ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ собствСнный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π½Π° страницС для открытия ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΡ Π½Π° установку вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, прСдоставляСмый Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π­Ρ‚ΠΎ позволяСт PWA ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ контСкст ΠΈ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ для установки ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ PWA, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ процСсса установки ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ основан Π½Π° событии beforeinstallprompt , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ запускаСтся Π² глобальном ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Window , ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚, Ρ‡Ρ‚ΠΎ PWA ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎ событиС ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ prompt() , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ запрос Π½Π° установку. Π˜Ρ‚Π°ΠΊ, PWA ΠΌΠΎΠΆΠ΅Ρ‚:

  • Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ»
  • ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΠ΅ события beforeinstallprompt
  • ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ события ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π²Ρ‹Π·Π²Π°Π² preventDefault()
  • Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ событий для собствСнной ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ», Π²Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ prompt() .

Настройка запроса Π½Π° установку

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅ Π½Π° установку содСрТит имя ΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ PWA. Если Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ значСния для описания ΠΈ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ΠΎΠ² элСмСнтов манифСста, Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Android эти значСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠΈ Π½Π° установку, прСдоставляя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ контСкст ΠΈ ΠΌΠΎΡ‚ΠΈΠ²Π°Ρ†ΠΈΡŽ для установки PWA.

На ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ снимкС экрана ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ выглядит запрос Π½Π° установку Π΄Π΅ΠΌΠΎ-вСрсии PWAmp Π² Google Chrome, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅ΠΌ Π½Π° Android:

ПослС установки PWA Π΅Π³ΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ отобраТаСтся Π½Π° устройствС вмСстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями, установлСнными ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ запускаСт ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт манифСста display для управлСния Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ отобраТСния : Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ PWA появляСтся ΠΏΡ€ΠΈ запускС. Π’ частности:

  • Β«Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉΒ» ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ PWA Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, Π±Π΅Π· элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°
  • "Π±Ρ€Π°ΡƒΠ·Π΅Ρ€" ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ PWA слСдуСт ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.

Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ отобраТСния, дисплСй вСрнСтся ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΌΡƒ Ρ€Π΅ΠΆΠΈΠΌΡƒ отобраТСния Π² соотвСтствии с ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

This entry was posted in ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΠ΅