{"id":7263,"date":"2025-07-02T11:55:23","date_gmt":"2025-07-02T08:55:23","guid":{"rendered":"https:\/\/1.cbm.ua\/?p=7263"},"modified":"2026-01-13T20:16:29","modified_gmt":"2026-01-13T17:16:29","slug":"pwa-%d1%82%d0%b5%d1%85%d0%bd%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b5%d1%81%d1%81%d0%b8%d0%b2%d0%bd%d1%8b%d1%85-%d0%b2%d0%b5%d0%b1-%d0%bf","status":"publish","type":"post","link":"https:\/\/1.cbm.ua\/?p=7263","title":{"rendered":"PWA \u2014 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f (\u0434\u043b\u044f \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)"},"content":{"rendered":"\n<p>\u0440\u0430\u043d\u0435\u0435 \u043f\u0438\u0441\u0430\u043b \u0442\u0443\u0442 &#8212; <a href=\"https:\/\/1.cbm.ua\/?p=4454\">https:\/\/1.cbm.ua\/?p=4454<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"646\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/07\/image.png\" alt=\"\" class=\"wp-image-7270\" style=\"width:308px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/07\/image.png 564w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/07\/image-262x300.png 262w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/h2>\n\n\n\n<h6 class=\"wp-block-heading\"><mark style=\"background-color:var(--nv-light-bg)\" class=\"has-inline-color\">\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0444\u043b\u0430\u0439\u043d.<\/mark><\/h6>\n\n\n\n<h2 class=\"wp-block-heading\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u043b <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">manifest.json<\/mark> &#8212; \u044d\u0442\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n  \"name\": \"\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\",\n  \"short_name\": \"\u041a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\",\n  \"start_url\": \"\/\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/icon.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\/png\"\n    }\n  ]\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432 HTML-\u043a\u043e\u0434 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"manifest\" href=\"\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/manifest.json\"><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"ru\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>PWA Todo List&lt;\/title>\n    &lt;link rel=\"manifest\" href=\"data:application\/json;base64,eyJuYW1lIjoiUFdBIFRvZG8gTGlzdCIsInNob3J0X25hbWUiOiJUb2RvUFdBIiwic3RhcnRfdXJsIjoiLyIsImRpc3BsYXkiOiJzdGFuZGFsb25lIiwiYmFja2dyb3VuZF9jb2xvciI6IiNmZmZmZmYiLCJ0aGVtZV9jb2xvciI6IiM0Mjg1ZjQiLCJpY29ucyI6W3sic3JjIjoiZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQSE4yWnlCM2FXUjBhRDBpTVRrd0lpQm9aV2xuYUhROUlqRTVNQ0lpSUhabGNuTnBiMjQ5SWpFdU1TSWdlRzFzYm5NOUltaDBkSEE2THk5M2QzY3Vkek11YjNKbkx6SXdNREF2YzNabklqNGdJRHhqYVhKamJHVWdZM2c5SWprMUlpQmplVDBpT1RVaUlISTlJamMxSWlCbWFXeHNQU0lqTkRJNE5XWTBJaTgrSUR4MFpYaDBJSGc5SWprMUlpQjVQU0k1TlNJZ2RHVjRkQzFoYm1Ob2IzSTlJbTFwWkdSc1pTSWdabTl1ZEMxbVlXMXBiSGs5SW1GdWFXRnNJaUJtYVd4c1BTSWpabVptSWo1VVQwUlBQQzkwWlhoMFBpQThMM04yWno0PSIsInNpemVzIjoiMTkweDIxMSIsInR5cGUiOiJpbWFnZS9zdmcreG1sIn1dfQ==\">\n    &lt;meta name=\"theme-color\" content=\"#4285f4\">\n    &lt;style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            min-height: 100vh;\n            padding: 20px;\n        }\n\n        .container {\n            max-width: 600px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 8px 32px rgba(0,0,0,0.1);\n            overflow: hidden;\n        }\n\n        .header {\n            background: #4285f4;\n            color: white;\n            padding: 20px;\n            text-align: center;\n        }\n\n        .header h1 {\n            font-size: 24px;\n            margin-bottom: 5px;\n        }\n\n        .status {\n            font-size: 14px;\n            opacity: 0.9;\n        }\n\n        .add-task {\n            padding: 20px;\n            border-bottom: 1px solid #eee;\n        }\n\n        .task-input {\n            width: 100%;\n            padding: 12px;\n            border: 2px solid #e0e0e0;\n            border-radius: 6px;\n            font-size: 16px;\n            margin-bottom: 10px;\n        }\n\n        .task-input:focus {\n            outline: none;\n            border-color: #4285f4;\n        }\n\n        .add-btn {\n            background: #4285f4;\n            color: white;\n            border: none;\n            padding: 12px 24px;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 16px;\n            transition: background 0.3s;\n        }\n\n        .add-btn:hover {\n            background: #3367d6;\n        }\n\n        .tasks-list {\n            min-height: 200px;\n            padding: 20px;\n        }\n\n        .task-item {\n            display: flex;\n            align-items: center;\n            padding: 15px;\n            border-bottom: 1px solid #f0f0f0;\n            transition: background 0.3s;\n        }\n\n        .task-item:hover {\n            background: #f8f9fa;\n        }\n\n        .task-item.completed {\n            opacity: 0.6;\n            text-decoration: line-through;\n        }\n\n        .task-checkbox {\n            margin-right: 15px;\n            cursor: pointer;\n        }\n\n        .task-text {\n            flex: 1;\n            font-size: 16px;\n        }\n\n        .delete-btn {\n            background: #ff4444;\n            color: white;\n            border: none;\n            padding: 8px 12px;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 12px;\n        }\n\n        .delete-btn:hover {\n            background: #cc0000;\n        }\n\n        .empty-state {\n            text-align: center;\n            color: #666;\n            padding: 40px 20px;\n        }\n\n        .install-prompt {\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            padding: 15px;\n            margin: 20px;\n            text-align: center;\n            display: none;\n        }\n\n        .install-btn {\n            background: #34a853;\n            color: white;\n            border: none;\n            padding: 10px 20px;\n            border-radius: 4px;\n            cursor: pointer;\n            margin-top: 10px;\n        }\n\n        @media (max-width: 480px) {\n            .container {\n                margin: 0;\n                border-radius: 0;\n                min-height: 100vh;\n            }\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;div class=\"container\">\n        &lt;div class=\"header\">\n            &lt;h1>\ud83d\udcdd PWA Todo List&lt;\/h1>\n            &lt;div class=\"status\" id=\"status\">\u041e\u043d\u043b\u0430\u0439\u043d&lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"install-prompt\" id=\"installPrompt\">\n            &lt;div>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430!&lt;\/div>\n            &lt;button class=\"install-btn\" id=\"installBtn\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c&lt;\/button>\n        &lt;\/div>\n\n        &lt;div class=\"add-task\">\n            &lt;input type=\"text\" class=\"task-input\" id=\"taskInput\" placeholder=\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443...\">\n            &lt;button class=\"add-btn\" id=\"addBtn\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c&lt;\/button>\n        &lt;\/div>\n\n        &lt;div class=\"tasks-list\" id=\"tasksList\">\n            &lt;div class=\"empty-state\">\n                \u041d\u0435\u0442 \u0437\u0430\u0434\u0430\u0447. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443!\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;script>\n        \/\/ \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n        class TodoApp {\n            constructor() {\n                this.tasks = this.loadTasks();\n                this.initEventListeners();\n                this.renderTasks();\n                this.updateStatus();\n            }\n\n            initEventListeners() {\n                document.getElementById('addBtn').addEventListener('click', () => this.addTask());\n                document.getElementById('taskInput').addEventListener('keypress', (e) => {\n                    if (e.key === 'Enter') this.addTask();\n                });\n\n                \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\n                window.addEventListener('online', () => this.updateStatus());\n                window.addEventListener('offline', () => this.updateStatus());\n            }\n\n            addTask() {\n                const input = document.getElementById('taskInput');\n                const text = input.value.trim();\n                \n                if (text) {\n                    const task = {\n                        id: Date.now(),\n                        text: text,\n                        completed: false,\n                        createdAt: new Date().toISOString()\n                    };\n                    \n                    this.tasks.push(task);\n                    this.saveTasks();\n                    this.renderTasks();\n                    input.value = '';\n                }\n            }\n\n            toggleTask(id) {\n                const task = this.tasks.find(t => t.id === id);\n                if (task) {\n                    task.completed = !task.completed;\n                    this.saveTasks();\n                    this.renderTasks();\n                }\n            }\n\n            deleteTask(id) {\n                this.tasks = this.tasks.filter(t => t.id !== id);\n                this.saveTasks();\n                this.renderTasks();\n            }\n\n            renderTasks() {\n                const container = document.getElementById('tasksList');\n                \n                if (this.tasks.length === 0) {\n                    container.innerHTML = '&lt;div class=\"empty-state\">\u041d\u0435\u0442 \u0437\u0430\u0434\u0430\u0447. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443!&lt;\/div>';\n                    return;\n                }\n\n                container.innerHTML = this.tasks.map(task => `\n                    &lt;div class=\"task-item ${task.completed ? 'completed' : ''}\">\n                        &lt;input type=\"checkbox\" class=\"task-checkbox\" \n                               ${task.completed ? 'checked' : ''} \n                               onchange=\"app.toggleTask(${task.id})\">\n                        &lt;div class=\"task-text\">${task.text}&lt;\/div>\n                        &lt;button class=\"delete-btn\" onclick=\"app.deleteTask(${task.id})\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c&lt;\/button>\n                    &lt;\/div>\n                `).join('');\n            }\n\n            saveTasks() {\n                localStorage.setItem('pwa-tasks', JSON.stringify(this.tasks));\n            }\n\n            loadTasks() {\n                const saved = localStorage.getItem('pwa-tasks');\n                return saved ? JSON.parse(saved) : [];\n            }\n\n            updateStatus() {\n                const status = document.getElementById('status');\n                status.textContent = navigator.onLine ? '\u041e\u043d\u043b\u0430\u0439\u043d' : '\u041e\u0444\u043b\u0430\u0439\u043d';\n                status.style.color = navigator.onLine ? '#4CAF50' : '#FF9800';\n            }\n        }\n\n        \/\/ Service Worker \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f\n        if ('serviceWorker' in navigator) {\n            navigator.serviceWorker.register('data:application\/javascript;base64,Y29uc3QgQ0FDSEVfTkFNRSA9ICd0b2RvLXB3YS12MSc7CmNvbnN0IHVybHNUb0NhY2hlID0gWycvJ107CgpzZWxmLmFkZEV2ZW50TGlzdGVuZXIoJ2luc3RhbGwnLCBldmVudCA9PiB7CiAgZXZlbnQud2FpdFVudGlsKAogICAgY2FjaGVzLm9wZW4oQ0FDSEVfTkFNRSkKICAgICAgLnRoZW4oY2FjaGUgPT4gY2FjaGUuYWRkQWxsKHVybHNUb0NhY2hlKSkKICApOwp9KTsKCnNlbGYuYWRkRXZlbnRMaXN0ZW5lcignZmV0Y2gnLCBldmVudCA9PiB7CiAgZXZlbnQucmVzcG9uZFdpdGgoCiAgICBjYWNoZXMubWF0Y2goZXZlbnQucmVxdWVzdCkKICAgICAgLnRoZW4ocmVzcG9uc2UgPT4gcmVzcG9uc2UgfHwgZmV0Y2goZXZlbnQucmVxdWVzdCkpCiAgKTsKfSk7');\n        }\n\n        \/\/ PWA \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430\n        let deferredPrompt;\n        const installPrompt = document.getElementById('installPrompt');\n        const installBtn = document.getElementById('installBtn');\n\n        window.addEventListener('beforeinstallprompt', (e) => {\n            e.preventDefault();\n            deferredPrompt = e;\n            installPrompt.style.display = 'block';\n        });\n\n        installBtn.addEventListener('click', async () => {\n            if (deferredPrompt) {\n                deferredPrompt.prompt();\n                const { outcome } = await deferredPrompt.userChoice;\n                deferredPrompt = null;\n                installPrompt.style.display = 'none';\n            }\n        });\n\n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n        const app = new TodoApp();\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0435 PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 &#8212; \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 \u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447<\/strong> &#8212; \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438<\/li>\n\n\n\n<li><strong>\u041e\u0442\u043c\u0435\u0442\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/strong> &#8212; \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u043a\u0430\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435<\/li>\n\n\n\n<li><strong>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447<\/strong> &#8212; \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438<\/li>\n\n\n\n<li><strong>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong> &#8212; \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 localStorage<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">PWA \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041e\u0444\u043b\u0430\u0439\u043d \u0440\u0430\u0431\u043e\u0442\u0430<\/strong> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430<\/li>\n\n\n\n<li><strong>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/strong> &#8212; \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/li>\n\n\n\n<li><strong>\u0421\u0442\u0430\u0442\u0443\u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/strong> &#8212; \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u043d\u043b\u0430\u0439\u043d\/\u043e\u0444\u043b\u0430\u0439\u043d \u0441\u0442\u0430\u0442\u0443\u0441<\/li>\n\n\n\n<li><strong>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/strong> &#8212; \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Service Worker \u0434\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/li>\n\n\n\n<li>Web App Manifest \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/li>\n\n\n\n<li>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 UI \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438<\/li>\n\n\n\n<li>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 LocalStorage \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<\/ul>\n\n\n\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e! \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a PWA \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0440\u0430\u043d\u0435\u0435 \u043f\u0438\u0441\u0430\u043b \u0442\u0443\u0442 &#8212; https:\/\/1.cbm.ua\/?p=4454 \u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0444\u043b\u0430\u0439\u043d. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u043b manifest.json &#8212; \u044d\u0442\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442. 2. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432 HTML-\u043a\u043e\u0434 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0435 PWA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 &#8212; \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 \u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438: \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: PWA \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:&hellip;&nbsp;<a href=\"https:\/\/1.cbm.ua\/?p=7263\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">PWA \u2014 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f (\u0434\u043b\u044f \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[194,195,7,5,6,150,102],"tags":[],"class_list":["post-7263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spr-jk_pwa-1","category-it","category-html","category-css","category-js","category-technology-","category-history-of-events"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7263"}],"version-history":[{"count":10,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7263\/revisions"}],"predecessor-version":[{"id":8473,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7263\/revisions\/8473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/media\/7270"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}