{"id":319708,"date":"2021-03-16T21:00:15","date_gmt":"2021-03-16T21:00:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319708"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319708","title":{"rendered":"\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 PWA"},"content":{"rendered":"\n
\n

\u041a\u0430\u043a\u0438\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044e «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435»? \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e, \u043a\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 «\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0440\u043e\u0439\u043a\u0438» web-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 — HTML\/CSS\/JS. \u041d\u043e \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438?<\/p>\n

\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u043d\u0430\u0439\u0442\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c», \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0443 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435» \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0432\u044b\u043c\u0438.<\/p>\n

\u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043e\u0442\u0431\u043e\u0440\u0430 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a<\/h2>\n

\u042f \u0432\u043e\u0437\u044c\u043c\u0443 \u043f\u0443\u0441\u0442\u043e\u0439 HTML-\u0444\u0430\u0439\u043b \u0438 \u0431\u0443\u0434\u0443 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0432 PWA<\/a>, \u043f\u043e\u043a\u0430 \u043c\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u043d\u0435 \u0440\u0435\u0448\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 Chrome \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f. Chrome \u0432\u044b\u0431\u0440\u0430\u043d \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c «\u0434\u0432\u0438\u0436\u0438\u0442\u0435\u043b\u0435\u043c» \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 PWA \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Google.<\/p>\n

HTTPS<\/h2>\n

\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 — \u044d\u0442\u043e \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0430\u0444\u0438\u043a\u0430. \u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041b\u0438\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Apache httpd<\/a>, \u0430 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u044b \u0434\u043b\u044f \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Let’s Encrypt<\/a>.<\/p>\n

App Shell<\/h2>\n

\u041e\u0431\u043e\u043b\u043e\u0447\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a> — \u044d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432 offline-\u0440\u0435\u0436\u0438\u043c\u0435. \u042f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043a\u043e\u0434 (HTML\/CSS\/JS) \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 — index.html<\/code>.<\/p>\n

<!DOCTYPE html> <html lang=\"en\"> <head>     <title>PWA<\/title>     <style>         BODY {             background-color: #FB9902;             color: #342309;             font-size: xx-large;             margin: 0;         }          DIV {             align-content: center;             display: grid;             height: 100vh;             justify-content: center;         }     <\/style> <\/head> <body> <div>App Shell<\/div> <\/body> <\/html><\/code><\/pre>\n
Manifest<\/h2>\n
\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/a> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
<link rel=\"manifest\" href=\"demo.pwa.json\"><\/code><\/pre>\n
\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0434\u043b\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u043e\u043c \u044f \u043d\u0435 \u0432\u0438\u0434\u0435\u043b, \u0442\u0438\u043f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043c\u0430\u0440\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/a> \u0447\u0435\u0440\u0435\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 manifest<\/code>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430  rel<\/code>. <\/p>\n
\u041f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0432 Chrome:<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u043e\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Chrome \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439:<\/p>\n
{   \"start_url\": \".\/\",   \"name\": \"PWA\",   \"display\": \"standalone\",   \"icons\": [     {       \"src\": \".\/icon.png\",       \"sizes\": \"144x144\",       \"type\": \"image\/png\"     }   ] }<\/code><\/pre>\n
Icon<\/h2>\n
\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439 Chrome’\u0430, \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0430 144×144 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 PNG, SVG \u0438\u043b\u0438 WebP. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u044f \u0438 \u0441\u0434\u0435\u043b\u0430\u043b:<\/p>\n
<\/figcaption><\/figure>\n
\u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/a> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0438\u043a\u043e\u043d\u043e\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n
Service Worker<\/h2>\n
\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 Chrome \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 — \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e service worker’\u0430. <\/p>\n
Service worker \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (index.html<\/code>):<\/p>\n
<script>     if (\"serviceWorker\" in navigator) {         self.addEventListener(\"load\", async () => {             const container = navigator.serviceWorker;             if (container.controller === null) {                 const reg = await container.register(\"sw.js\");             }         });     } <\/script><\/code><\/pre>\n
\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 sw.js<\/code> :<\/p>\n
'use strict';<\/code><\/pre>\n
\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 Chrome: Page does not work offline<\/code><\/p>\n
Stackoverflow \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442<\/a>, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 fetch<\/code>. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n
'use strict';  function hndlEventFetch(evt) {}  self.addEventListener('fetch', hndlEventFetch);<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0430:<\/p>\n
\n
Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https:\/\/goo.gle\/improved-pwa-offline-detection<\/a> for more information.<\/p>\n<\/blockquote>\n
\u041c\u043e\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Chrome: Version 89.0.4389.72 (Official Build) (64-bit)<\/code><\/p>\n
\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0437\u0430\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n
<\/figcaption><\/figure>\n
\u0422\u043e \u0435\u0441\u0442\u044c, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 service worker \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u043e\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c, \u043d\u043e \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c (\u0432 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 2021-\u0433\u043e<\/a>) \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n
\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n
\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c PWA \u0438 \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2021-\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 service worker’\u0430:<\/p>\n
'use strict'; const CACHE_STATIC = 'static-cache-v1';  function hndlEventInstall(evt) {     \/**      * @returns {Promise<void>}      *\/     async function cacheStaticFiles() {         const files = [             '.\/',             '.\/demo.pwa.json',             '.\/icon.png',             '.\/index.html',             '.\/sw.js',         ];         const cacheStat = await caches.open(CACHE_STATIC);         await Promise.all(             files.map(function (url) {                 return cacheStat.add(url).catch(function (reason) {                     console.log(`'${url}' failed: ${String(reason)}`);                 });             })         );     }      \/\/  wait until all static files will be cached     evt.waitUntil(cacheStaticFiles()); }  function hndlEventFetch(evt) {     async function getFromCache() {         const cache = await self.caches.open(CACHE_STATIC);         const cachedResponse = await cache.match(evt.request);         if (cachedResponse) {             return cachedResponse;         }         \/\/ wait until resource will be fetched from server and stored in cache         const resp = await fetch(evt.request);         await cache.put(evt.request, resp.clone());         return resp;     }      evt.respondWith(getFromCache()); }  self.addEventListener('install', hndlEventInstall); self.addEventListener('fetch', hndlEventFetch); <\/code><\/pre>\n
\u0421 \u0442\u0430\u043a\u0438\u043c service worker’\u043e\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c \u0438 \u0432 Chrome 93+. \u0412\u043e\u0442 \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043b\u0435\u0433\u043b\u0438 \u0432 \u043a\u044d\u0448:<\/p>\n
<\/figcaption><\/figure>\n
\u041e\u0448\u0438\u0431\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0441\u0432\u0435\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 — \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 favicon.ico<\/code>:<\/p>\n
GET https:\/\/bwl.local.teqfw.com\/favicon.ico 404<\/code><\/pre>\n
\u041d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430 \u043d\u0435 PWA.<\/p>\n
\u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n
\u0427\u0442\u043e\u0431\u044b web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0447\u0438\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2021-\u0433\u043e) \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c:<\/p>\n
    \n
  1. \n
    \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (HTTPS).<\/p>\n<\/li>\n
  2. \n
    \u041e\u0431\u043e\u043b\u043e\u0447\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f).<\/p>\n<\/li>\n
  3. \n
    \u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 (\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438 service worker).<\/p>\n<\/li>\n
  4. \n
    \u0418\u043a\u043e\u043d\u043a\u0430.<\/p>\n<\/li>\n
  5. \n
    Service worker.<\/p>\n<\/li>\n
  6. \n
    \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n
    \u041f\u0440\u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 PWA \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0435:<\/p>\n
    <\/figcaption><\/figure>\n
    \u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n
    \u041d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u0435\u043d\u044f \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 Chrome \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 93 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438 \u0438 \u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435. \u042f \u0432\u044b\u0448\u0435\u043b \u043d\u0430 PWA \u0447\u0435\u0440\u0435\u0437 \u0442\u0430\u043a\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u0430\u043a Vue Storefront<\/a>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0438 \u043a Magento 2 \u0444\u0440\u043e\u043d\u0442, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 (\u043f\u043e\u043b\u043e\u0436\u0430 \u0440\u0443\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0434\u0446\u0435<\/a>, \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442 Magento 2 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0441\u0442\u0430\u043b \u043e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0439 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438).<\/p>\n
    \u041a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d Vue Storefront, \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0438\u0437 \u0440\u0430\u0441\u0447\u0451\u0442\u0430, \u0447\u0442\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430. \u0427\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, e-\u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u044f \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0432\u043e\u0439. \u0418 \u0445\u043e\u0442\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b PWA \u0431\u044b\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 PWA \u043d\u0435 \u0441\u043f\u0435\u0448\u0430\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0412\u0441\u0451-\u0442\u0430\u043a\u0438, \u043e\u043d\u0438 \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445 — web, \u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 — \u043b\u0438\u0448\u044c \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c serverless \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c App Shell, \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0438 service worker’\u0430, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f — \u0438\u0445 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0442\u044f\u043d\u0443\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430). \u041d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u0430\u043a web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0432 \u0435\u0433\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 — \u0432 \u0440\u0430\u0437\u044b \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432.<\/p>\n
    \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Vue Storefront \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0448\u0438\u0441\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f Vue Storefront \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 Chrome 93+ \u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c (\u0434\u0435\u043c\u043e<\/a>, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c). \u041a\u0441\u0442\u0430\u0442\u0438, \u0434\u043b\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 PWA-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> \u0441\u0430\u043c\u043e\u0439 Magento \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f.<\/p>\n
    \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 Google \u0443\u0436\u0435\u0441\u0442\u043e\u0447\u0430\u0435\u0442 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 PWA, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0444\u043e\u043a\u0443\u0441 \u043e\u0442 web’\u0430 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0430 100% \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445 \u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f. \u041d\u043e \u043e\u0431\u0449\u0430\u044f \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c<\/a>, \u0447\u0442\u043e \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f  PWA — \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n
    \n
    In December 2020, Firefox for desktop abandoned implementation of PWAs (specifically, removed the prototype «site-specific browser» configuration that had been available as an experimental feature). A Firefox architect noted: «The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon.» Mozilla still plans to support PWAs on Android.<\/p>\n<\/blockquote>\n
    \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Firefox \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c PWA \u0432 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n
    \u041d\u0435\u043b\u044c\u0437\u044f \u0441\u043a\u0430\u0437\u0430\u0442\u044c<\/a>, \u0447\u0442\u043e PWA \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e Google’\u043e\u0432\u0441\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439:<\/p>\n
    <\/figcaption><\/figure>\n
    \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 PWA-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0430\u044f. \u041d\u043e \u0434\u0440\u0435\u0439\u0444 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 «\u043c\u043e\u0431\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438» \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u044f \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0433\u0443.<\/p>\n
    \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 PWA — \u044d\u0442\u043e «\u043d\u0438\u0448\u0435\u0432\u043e\u0435» \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0414\u0430, \u043e\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c web-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 (HTML\/CSS\/JS) \u0438 \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u043e \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 PWA \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u0435\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0447\u0435\u043c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u0441\u0430\u0439\u0442\u043e\u0432 \u0438\u043b\u0438 SPA).<\/p>\n
    \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e PWA. \u0410 \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e PWA \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<\/div>\n
     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/547436\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
    \n
    \u041a\u0430\u043a\u0438\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044e «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435»? \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e, \u043a\u0430\u043a \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 «\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0440\u043e\u0439\u043a\u0438» web-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 — HTML\/CSS\/JS. \u041d\u043e \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438?<\/p>\n
    \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u043d\u0430\u0439\u0442\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c», \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0443 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 «\u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435» \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0432\u044b\u043c\u0438.<\/p>\n
    \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043e\u0442\u0431\u043e\u0440\u0430 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a<\/h2>\n
    \u042f \u0432\u043e\u0437\u044c\u043c\u0443 \u043f\u0443\u0441\u0442\u043e\u0439 HTML-\u0444\u0430\u0439\u043b \u0438 \u0431\u0443\u0434\u0443 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u0432 PWA<\/a>, \u043f\u043e\u043a\u0430 \u043c\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u043d\u0435 \u0440\u0435\u0448\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 Chrome \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f. Chrome \u0432\u044b\u0431\u0440\u0430\u043d \u043f\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c «\u0434\u0432\u0438\u0436\u0438\u0442\u0435\u043b\u0435\u043c» \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 PWA \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Google.<\/p>\n
    HTTPS<\/h2>\n
    \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 — \u044d\u0442\u043e \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0430\u0444\u0438\u043a\u0430. \u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041b\u0438\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Apache httpd<\/a>, \u0430 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u044b \u0434\u043b\u044f \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e \u0447\u0435\u0440\u0435\u0437 Let’s Encrypt<\/a>.<\/p>\n
    App Shell<\/h2>\n
    \u041e\u0431\u043e\u043b\u043e\u0447\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a> — \u044d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432 offline-\u0440\u0435\u0436\u0438\u043c\u0435. \u042f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043a\u043e\u0434 (HTML\/CSS\/JS) \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 — index.html<\/code>.<\/p>\n
    <!DOCTYPE html> <html lang=\"en\"> <head>     <title>PWA<\/title>     <style>         BODY {             background-color: #FB9902;             color: #342309;             font-size: xx-large;             margin: 0;         }          DIV {             align-content: center;             display: grid;             height: 100vh;             justify-content: center;         }     <\/style> <\/head> <body> <div>App Shell<\/div> <\/body> <\/html><\/code><\/pre>\n
    Manifest<\/h2>\n
    \u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/a> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
    <link rel=\"manifest\" href=\"demo.pwa.json\"><\/code><\/pre>\n
    \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0434\u043b\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u043e\u043c \u044f \u043d\u0435 \u0432\u0438\u0434\u0435\u043b, \u0442\u0438\u043f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043c\u0430\u0440\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/a> \u0447\u0435\u0440\u0435\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 manifest<\/code>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430  rel<\/code>. <\/p>\n
    \u041f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0432 Chrome:<\/p>\n
    <\/figcaption><\/figure>\n
    \u0412\u043e\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Chrome \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439:<\/p>\n
    {   \"start_url\": \".\/\",   \"name\": \"PWA\",   \"display\": \"standalone\",   \"icons\": [     {       \"src\": \".\/icon.png\",       \"sizes\": \"144x144\",       \"type\": \"image\/png\"     }   ] }<\/code><\/pre>\n
    Icon<\/h2>\n
    \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439 Chrome’\u0430, \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0430 144×144 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 PNG, SVG \u0438\u043b\u0438 WebP. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u044f \u0438 \u0441\u0434\u0435\u043b\u0430\u043b:<\/p>\n
    <\/figcaption><\/figure>\n
    \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/a> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0438\u043a\u043e\u043d\u043e\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n
    Service Worker<\/h2>\n
    \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 Chrome \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 — \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e service worker’\u0430. <\/p>\n
    Service worker \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (index.html<\/code>):<\/p>\n
    <script>     if (\"serviceWorker\" in navigator) {         self.addEventListener(\"load\", async () => {             const container = navigator.serviceWorker;             if (container.controller === null) {                 const reg = await container.register(\"sw.js\");             }         });     } <\/script><\/code><\/pre>\n
    \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 sw.js<\/code> :<\/p>\n
    'use strict';<\/code><\/pre>\n
    \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 Chrome: Page does not work offline<\/code><\/p>\n
    Stackoverflow \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442<\/a>, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 fetch<\/code>. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n
    'use strict';  function hndlEventFetch(evt) {}  self.addEventListener('fetch', hndlEventFetch);<\/code><\/pre>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0430:<\/p>\n
    \n
    Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https:\/\/goo.gle\/improved-pwa-offline-detection<\/a> for more information.<\/p>\n<\/blockquote>\n
    \u041c\u043e\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Chrome: Version 89.0.4389.72 (Official Build) (64-bit)<\/code><\/p>\n
    \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0437\u0430\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n
    <\/figcaption><\/figure>\n
    \u0422\u043e \u0435\u0441\u0442\u044c, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 service worker \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u043e\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c, \u043d\u043e \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c (\u0432 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 2021-\u0433\u043e<\/a>) \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n
    \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n
    \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c PWA \u0438 \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2021-\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 service worker’\u0430:<\/p>\n
    'use strict'; const CACHE_STATIC = 'static-cache-v1';  function hndlEventInstall(evt) {     \/**      * @returns {Promise<void>}      *\/     async function cacheStaticFiles() {         const files = [             '.\/',             '.\/demo.pwa.json',             '.\/icon.png',             '.\/index.html',             '.\/sw.js',         ];         const cacheStat = await caches.open(CACHE_STATIC);         await Promise.all(             files.map(function (url) {                 return cacheStat.add(url).catch(function (reason) {                     console.log(`'${url}' failed: ${String(reason)}`);                 });             })         );     }      \/\/  wait until all static files will be cached     evt.waitUntil(cacheStaticFiles()); }  function hndlEventFetch(evt) {     async function getFromCache() {         const cache = await self.caches.open(CACHE_STATIC);         const cachedResponse = await cache.match(evt.request);         if (cachedResponse) {             return cachedResponse;         }         \/\/ wait until resource will be fetched from server and stored in cache         const resp = await fetch(evt.request);         await cache.put(evt.request, resp.clone());         return resp;     }      evt.respondWith(getFromCache()); }  self.addEventListener('install', hndlEventInstall); self.addEventListener('fetch', hndlEventFetch); <\/code><\/pre>\n
    \u0421 \u0442\u0430\u043a\u0438\u043c service worker’\u043e\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c \u0438 \u0432 Chrome 93+. \u0412\u043e\u0442 \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043b\u0435\u0433\u043b\u0438 \u0432 \u043a\u044d\u0448:<\/p>\n
    <\/figcaption><\/figure>\n
    \u041e\u0448\u0438\u0431\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0441\u0432\u0435\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 — \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 favicon.ico<\/code>:<\/p>\n
    GET https:\/\/bwl.local.teqfw.com\/favicon.ico 404<\/code><\/pre>\n
    \u041d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430 \u043d\u0435 PWA.<\/p>\n
    \u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n
    \u0427\u0442\u043e\u0431\u044b web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0447\u0438\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2021-\u0433\u043e) \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c:<\/p>\n
      \n
    1. \n
      \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (HTTPS).<\/p>\n<\/li>\n
    2. \n
      \u041e\u0431\u043e\u043b\u043e\u0447\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f).<\/p>\n<\/li>\n
    3. \n
      \u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 (\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438 service worker).<\/p>\n<\/li>\n
    4. \n
      \u0418\u043a\u043e\u043d\u043a\u0430.<\/p>\n<\/li>\n
    5. \n
      Service worker.<\/p>\n<\/li>\n
    6. \n
      \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n
      \u041f\u0440\u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 PWA \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0435:<\/p>\n
      <\/figcaption><\/figure>\n
      \u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n
      \u041d\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u0435\u043d\u044f \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 Chrome \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 93 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438 \u0438 \u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435. \u042f \u0432\u044b\u0448\u0435\u043b \u043d\u0430 PWA \u0447\u0435\u0440\u0435\u0437 \u0442\u0430\u043a\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u0430\u043a Vue Storefront<\/a>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0438 \u043a Magento 2 \u0444\u0440\u043e\u043d\u0442, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 (\u043f\u043e\u043b\u043e\u0436\u0430 \u0440\u0443\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0434\u0446\u0435<\/a>, \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442 Magento 2 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0441\u0442\u0430\u043b \u043e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0439 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438).<\/p>\n
      \u041a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d Vue Storefront, \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0438\u0437 \u0440\u0430\u0441\u0447\u0451\u0442\u0430, \u0447\u0442\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430. \u0427\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, e-\u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u044f \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0451\u0442 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u043e\u0432\u043e\u0439. \u0418 \u0445\u043e\u0442\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b PWA \u0431\u044b\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 PWA \u043d\u0435 \u0441\u043f\u0435\u0448\u0430\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0412\u0441\u0451-\u0442\u0430\u043a\u0438, \u043e\u043d\u0438 \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445 — web, \u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 — \u043b\u0438\u0448\u044c \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c serverless \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c App Shell, \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0438 service worker’\u0430, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f — \u0438\u0445 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0442\u044f\u043d\u0443\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430). \u041d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u0430\u043a web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0432 \u0435\u0433\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 — \u0432 \u0440\u0430\u0437\u044b \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432.<\/p>\n
      \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Vue Storefront \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0448\u0438\u0441\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f Vue Storefront \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 Chrome 93+ \u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c (\u0434\u0435\u043c\u043e<\/a>, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c). \u041a\u0441\u0442\u0430\u0442\u0438, \u0434\u043b\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 PWA-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> \u0441\u0430\u043c\u043e\u0439 Magento \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f.<\/p>\n
      \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 Google \u0443\u0436\u0435\u0441\u0442\u043e\u0447\u0430\u0435\u0442 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 PWA, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0444\u043e\u043a\u0443\u0441 \u043e\u0442 web’\u0430 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u043c\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0430 100% \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445 \u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f. \u041d\u043e \u043e\u0431\u0449\u0430\u044f \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c<\/a>, \u0447\u0442\u043e \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f  PWA — \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n
      \n
      In December 2020, Firefox for desktop abandoned implementation of PWAs (specifically, removed the prototype «site-specific browser» configuration that had been available as an experimental feature). A Firefox architect noted: «The signal I hope we are sending is that PWA support is not coming to desktop Firefox anytime soon.» Mozilla still plans to support PWAs on Android.<\/p>\n<\/blockquote>\n
      \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Firefox \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c PWA \u0432 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n
      \u041d\u0435\u043b\u044c\u0437\u044f \u0441\u043a\u0430\u0437\u0430\u0442\u044c<\/a>, \u0447\u0442\u043e PWA \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e Google’\u043e\u0432\u0441\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439:<\/p>\n
      <\/figcaption><\/figure>\n
      \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 PWA-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0430\u044f. \u041d\u043e \u0434\u0440\u0435\u0439\u0444 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 «\u043c\u043e\u0431\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438» \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u044f \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0433\u0443.<\/p>\n
      \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 PWA — \u044d\u0442\u043e «\u043d\u0438\u0448\u0435\u0432\u043e\u0435» \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0414\u0430, \u043e\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c web-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 (HTML\/CSS\/JS) \u0438 \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u043e \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 PWA \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u0435\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0447\u0435\u043c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u0441\u0430\u0439\u0442\u043e\u0432 \u0438\u043b\u0438 SPA).<\/p>\n
      \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e PWA. \u0410 \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e PWA \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/547436\/<\/a>
      <\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-319708","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319708"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319708\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}