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