{"id":351090,"date":"2023-08-01T15:01:44","date_gmt":"2023-08-01T15:01:44","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=351090"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=351090","title":{"rendered":"<span>\u041a\u043d\u0438\u0433\u0430 \u00abJavaScript. \u0420\u0435\u0446\u0435\u043f\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. 3-\u0435 \u0438\u0437\u0434\u00bb<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/company\/piter\/blog\/751748\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/2i\/qe\/-2\/2iqe-2qeusfhybgwydwdyelayuc.jpeg\" align=\"left\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/2i\/qe\/-2\/2iqe-2qeusfhybgwydwdyelayuc.jpeg\" data-blurred=\"true\"\/><\/a> \u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440\u043e\u0436\u0438\u0442\u0435\u043b\u0438!<\/p>\n<p>  \u0417\u0430\u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434, \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f\u0441\u044c \u0441 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0432 JavaScript? \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u0432 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u0441\u044c c \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u043b\u044e\u0431\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0433\u043b\u0443\u0431\u0436\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c JS.<\/p>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u0432\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u043a\u043e\u0434\u0430, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c; \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JS, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b; \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u041e\u041e\u041f; \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0430\u0443\u0434\u0438\u043e, \u0432\u0438\u0434\u0435\u043e \u0438 SVG; \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c HTML \u0438 CSS; \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Node.js \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e; \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 REST, GraphQL \u0438 Fetch; \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Express; \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438, async\/await \u0438 \u0432\u0435\u0431-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430\u043c\u0438.<a name=\"habracut\"><\/a><\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0410\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044f \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0438<\/b>                         <\/p>\n<div class=\"spoiler_text\">\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u043c \u0441\u0440\u0430\u0437\u0443: \u0441\u0442\u0440\u0435\u043c\u044f\u0441\u044c \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0442\u0435\u043c \u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f JavaScript, \u043c\u044b \u043d\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0438 \u043d\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 JavaScript, \u0435\u0441\u0442\u044c \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u043a\u043d\u0438\u0433 \u0438 \u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u043f\u043e\u0441\u043e\u0431\u0438\u0439, \u0447\u0442\u043e \u043c\u044b \u0441\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u0439 \u0441\u043e\u0432\u0435\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u043b\u0438 \u0441\u0432\u043e\u044e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u2014 \u0442\u0435\u043c, \u043a\u0442\u043e \u0438\u0449\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0437\u0430\u0434\u0430\u0447 \u043d\u0430 JavaScript.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u043f\u0435\u043b\u0438 \u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 JavaScript \u043b\u0438\u0448\u044c \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u044b \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0441\u0438\u043b\u044b \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u043b\u044f Node \u0438\u043b\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0442\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0443 \u0432\u0430\u0441 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0438\u0439. \u0418\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u0438 \u0434\u043b\u044f \u0442\u0435\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u0442\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u043e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 JavaScript. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 JavaScript, \u043d\u043e \u0432\u0430\u0441 \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u0432\u044f\u0442 \u0432 \u0442\u0443\u043f\u0438\u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044f\u0437\u044b\u043a\u0430, \u0442\u043e \u044d\u0442\u0430 \u043a\u043d\u0438\u0433\u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u043c.<\/p><\/div>\n<\/p><\/div>\n<p>  <\/p>\n<h2>16.3. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<h4>\u0417\u0430\u0434\u0430\u0447\u0430<\/h4>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0437\u043d\u0430\u0447\u043a\u043e\u0432.<\/p>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u041f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (Progressive Web Application, PWA). \u042d\u0442\u0438\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0431\u043e\u0440 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0442\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u0430\u043a \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0437\u043d\u0430\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442.<\/p>\n<p>  \u0423 PWA \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:  <\/p>\n<ul>\n<li>\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443;<\/li>\n<li>Service Worker \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0430\u044f \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443, \u043a\u0430\u043a \u0437\u043d\u0430\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u043a\u043d\u0430, \u0441\u0442\u0438\u043b\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 manifest.json \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">{     \"name\": \"JavaScript Everywhere\",     \"short_name\": \"JavaScript\",     \"start_url\": \"\/index.html\",     \"display\": \"standalone\",     \"background_color\": \"#ffc40d\",     \"theme_color\": \"#ffc40d\",     \"icons\": [         {             \"src\": \"\/images\/icons\/icon-192x192.png\",             \"sizes\": \"192x192\",             \"type\": \"image\/png\"         },         {             \"src\": \"\/images\/icons\/icon-512x512.png\",             \"sizes\": \"512x512\",             \"type\": \"image\/png\"         }     ] }<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 HTML-\u0444\u0430\u0439\u043b\u044b \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u0430\u0439\u043b \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430, \u0430 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b  \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u043a\u0438 (\u043f\u0440\u0438\u043c\u0435\u0440 16.1).<\/p>\n<p>  <b>\u041f\u0440\u0438\u043c\u0435\u0440 16.1. \u041c\u0435\u0442\u0430\u0442\u0435\u0433\u0438 PWA<\/b><\/p>\n<pre><code class=\"javascript\">&lt;!-- \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0444\u0430\u0439\u043b manifest.json --> &lt;link rel=\"manifest\" href=\"manifest.json\" \/> &lt;!-- \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0437\u043d\u0430\u0447\u043a\u0438 iOS --> &lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"images\/icons\/            apple-touch-icon.png\" \/> &lt;!-- \u0417\u043d\u0430\u0447\u043a\u0438 \u0438 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043f\u043b\u0438\u0442\u043e\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Microsoft --> &lt;meta name=\"msapplication-TileColor\" content=\"#ffc40d\" \/> &lt;meta name=\"msapplication-TileImage\" content=\"\/img\/icons\/mstile-310x310.png\" \/> &lt;!-- \u0426\u0432\u0435\u0442 \u0442\u0435\u043c\u044b --> &lt;meta name=\"theme-color\" content=\"#ffc40d\" \/><\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c PWA, \u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 PWA (\u0440\u0438\u0441. 16.1). \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 PWA \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a PWA, \u043a\u0430\u043a \u0438 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0440\u0438\u0441. 16.2).<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vb\/g8\/uo\/vbg8uox1bwq5hnmk-_bjpidds9w.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/vb\/g8\/uo\/vbg8uox1bwq5hnmk-_bjpidds9w.png\"\/><\/div>\n<p>  \u041d\u0430 \u0432\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f Service Worker \u2014 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u0439\u0442\u0430, \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0435 \u043a\u043e\u043f\u0438\u0438. \u0421 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0439 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Service Worker \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0435\u0442\u0438. \u041d\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Service Worker \u2014 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 PWA, \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c, \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 PWA.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 Service Worker \u2014 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434 Service Worker, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c :<\/p>\n<pre><code class=\"javascript\">&lt;!-- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Service Worker --> &lt;script>     if ('serviceWorker' in navigator) {         window.addEventListener('load', function() {             navigator.serviceWorker                 .register('service-worker.js')                 .then(reg => {                     console.log('Service worker registered!', reg);                 })                 .catch(err => {                     console.log('Service worker registration failed: ', err);                 });         });     } &lt;\/script><\/code><\/pre>\n<p>  \u0412 \u043d\u0435\u043c \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e Service Worker, \u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442, \u0434\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043a\u0440\u0438\u043f\u0442 Service Worker (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0444\u0430\u0439\u043b service-worker.js). \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e \u043d\u0438\u0445.<\/p>\n<p>  \u0412 \u0444\u0430\u0439\u043b\u0435 service-worker.js \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u044d\u0448\u0430 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">var cacheVersion = 'v1'; filesToCache = [     'index.html',     '\/styles\/main.css',     '\/js\/main.js',     '\/images\/logo.svg' ]<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041f\u0440\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 cacheVersion \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c, \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0430\u0439\u0442\u0430, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0435 \u0432 \u043a\u044d\u0448\u0435.<\/p><\/blockquote>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 service-worker.js \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 install, fetch \u0438 activate. \u041f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f install \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0432 \u043a\u044d\u0448\u0435. \u041f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f fetch \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0430\u043a\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439: \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u2014 \u043b\u0438\u0431\u043e \u0438\u0437 \u043a\u044d\u0448\u0430, \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043e \u0441\u0435\u0442\u0438. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u043e\u0431\u044b\u0442\u0438\u0435 activate, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 Service Worker, \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043a\u044d\u0448\u0435, \u0438 \u0438\u0445 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 cacheVersion \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 filestoCache (\u0440\u0438\u0441. 16.3):<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/72\/br\/lv\/72brlvqicv9fkjjqjb3mhungshe.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/72\/br\/lv\/72brlvqicv9fkjjqjb3mhungshe.png\"\/><\/div>\n<p>  <\/p>\n<pre><code class=\"javascript\">const cacheVersion = 'v1';  const filesToCache = ['index.html', '\/styles\/main.css', '\/js\/main.js'];  self.addEventListener('install', event => {      console.log('Service worker install event fired');     event.waitUntil(         caches.open(cacheVersion).then(cache => {             return cache.addAll(filesToCache);         })     ); });  self.addEventListener('fetch', event => {     console.log('Fetch intercepted for:', event.request.url);     event.respondWith(         caches.match(event.request).then(cachedResponse => {             if (cachedResponse) {                 return cachedResponse;             }             return fetch(event.request);         })     ); });  self.addEventListener('activate', event => {     event.waitUntil(         caches.keys().then(keyList => {             return Promise.all(                 keyList.map(key => {                     if (key !== cacheVersion) {                         return caches.delete(key);                     }                 })             );         })     ); });<\/code><\/pre>\n<p>  <\/p>\n<h4>\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Progressive Web Application \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0435\u0442\u0438.<\/p>\n<p>  \u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0444\u0430\u0439\u043b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435:<\/p>\n<ul>\n<li>background_color \u2014 \u043a\u043e\u0434 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430;<\/li>\n<li>categories \u2014 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u043e\u043a;<\/li>\n<li>description \u2014 \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>dir \u2014 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432: auto, ltr (\u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e) \u0438\u043b\u0438 rtl (\u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e);<\/li>\n<li>display \u2014 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: browser (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430) \u0438\u043b\u0438 fullscreen (\u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f);<\/li>\n<li>iarc_rating_id \u2014 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u043e\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 (International Age Rating);<\/li>\n<li>icons \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u043a\u043e\u0432;<\/li>\n<li>lang \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>name \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>orientation \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e;<\/li>\n<li>prefer_related_applications \u2014 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0432\u0435\u043d true, \u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>related_applications \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439;<\/li>\n<li>scope \u2014 \u0441\u0442\u0440\u043e\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043e\u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u0430, \u0442\u043e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0437\u0434\u0435\u0441\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u043c;<\/li>\n<li>screenshots \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043f\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>short_name \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043c, \u0433\u0434\u0435 \u043f\u043e\u043b\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f;<\/li>\n<li>start_url \u2014 URL \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>theme_color \u2014 \u0441\u0442\u0440\u043e\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u043d \u0446\u0432\u0435\u0442 \u0442\u0435\u043c\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/li>\n<\/ul>\n<p>  \u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 W3C \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0437\u0435\u0446 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u0433\u0440\u044b (https:\/\/oreil.ly\/zlk9P):<\/p>\n<pre><code class=\"javascript\">{     \"lang\": \"en\",     \"dir\": \"ltr\",     \"name\": \"Super Racer 3000\",     \"description\": \"The ultimate futuristic racing game from the future!\",     \"short_name\": \"Racer3K\",     \"icons\": [{         \"src\": \"icon\/lowres.webp\",         \"sizes\": \"64x64\",         \"type\": \"image\/webp\"     },{         \"src\": \"icon\/lowres.png\",         \"sizes\": \"64x64\"     },{         \"src\": \"icon\/hd_hi\",         \"sizes\": \"128x128\"     }],     \"scope\": \"\/racer\/\",     \"start_url\": \"\/racer\/start.html\",     \"display\": \"fullscreen\",     \"orientation\": \"landscape\",     \"theme_color\": \"aliceblue\",     \"background_color\": \"red\",     \"screenshots\": [{         \"src\": \"screenshots\/in-game-1x.jpg\",         \"sizes\": \"640x480\",         \"type\": \"image\/jpeg\"     },{         \"src\": \"screenshots\/in-game-2x.jpg\",         \"sizes\": \"1280x920\",         \"type\": \"image\/jpeg\"     }] }<\/code><\/pre>\n<p>  \u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a iOS \u0438 Windows, \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043c\u0438\u043c\u043e \u0444\u0430\u0439\u043b\u0430 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u043e\u0432 HTML. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 16.1 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0446\u0432\u0435\u0442 \u0442\u0435\u043c\u044b, \u0437\u043d\u0430\u0447\u043e\u043a iOS \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043b\u0438\u0442\u043e\u043a Windows.\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u043a\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u0432\u0441\u0435\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c\u043c\u0430 \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u0430\u043d\u044f\u0442\u0438\u0435\u043c. \u0421\u043e\u0432\u0435\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c RealFaviconGenerator (https:\/\/oreil.ly\/AlsQe).<\/p>\n<p>  Service Worker \u2014 \u044d\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 (worker), \u043e\u043d \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a DOM. \u0417\u0430\u0442\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Service Worker \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0435\u043c\u0443 \u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043d\u043e\u0432\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0445 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0441\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043e\u043d\u043e \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 HTML, JavaScript \u0438 CSS, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e (\u0445\u043e\u0442\u044f \u0438 \u043f\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443) \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043b\u0438\u0431\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0449\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Service Worker \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<ul>\n<li>\u0421\u0430\u0439\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u044b Service Worker, \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 HTTPS.<\/li>\n<li>\u0421\u043a\u0440\u0438\u043f\u0442\u044b Service Worker \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0436\u0438\u043c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/li>\n<li>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 Service Worker \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435, \u0443 Service Worker \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a DOM.<\/li>\n<li>\u0421\u043a\u0440\u0438\u043f\u0442\u044b Service Worker \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u0441\u0432\u043e\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0438\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li>\u041e\u0431\u044a\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u043b\u044f \u043a\u044d\u0448\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u0436\u0435\u0441\u0442\u043a\u043e\u043c \u0434\u0438\u0441\u043a\u0435 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/li>\n<\/ul>\n<p>  \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0441\u043e\u0437\u0434\u0430\u043b Service Worker \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c. \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 Service Worker \u0438 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e Google \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Workbox (https:\/\/oreil.ly\/Gu3Z6). \u041e\u043d\u0430 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0431\ue088\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0437\u0430\u0431\u043e\u0442 \u043f\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u0438 \u043a\u044d\u0448\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0432\u0430\u0436\u043d\u044b\u0439 \u0448\u0430\u0433 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0445 \u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430: \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043a\u0430\u043a \u043d\u0430 \u0431\u0430\u0437\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 HTML, CSS \u0438 JavaScript, \u0442\u0430\u043a \u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043d\u043e\u0432\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 JavaScript. \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u043a\u043d\u0438\u0433\u0435 \u0422\u0430\u043b\u0430 \u0410\u043b\u044c\u0442\u0435\u0440\u0430 (Tal Alter) Building Progressive Web Apps, \u0432\u044b\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0439 \u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e\u043c O\u2019Reilly.<\/p>\n<h2>16.4. \u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/h2>\n<p>  <\/p>\n<h4>\u0417\u0430\u0434\u0430\u0447\u0430<\/h4>\n<p>  \u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u043e \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0432\u0441\u0435\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c.<\/p>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse (https:\/\/oreil.ly\/hEdHB) \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0430\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c, SEO \u0438 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a Lighthouse, \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Lighthouse \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 Google Chrome. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442 (\u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0438\u043b\u0438 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0435) \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 Generate Report (\u0440\u0438\u0441. 16.4).<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ax\/fy\/i8\/axfyi8dfj9mre-3hx-voqki-zlm.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/ax\/fy\/i8\/axfyi8dfj9mre-3hx-voqki-zlm.png\"\/><\/div>\n<p>  Lighthouse \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0447\u0435\u0442, \u0432\u043a\u043b\u044e\u0447\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0432\u0441\u0435\u0445 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435\u0439 (\u0440\u0438\u0441. 16.5 \u0438 16.6).<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/77\/pz\/j-\/77pzj-qmbyresogfihlafvpvlmm.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/77\/pz\/j-\/77pzj-qmbyresogfihlafvpvlmm.png\"\/><\/div>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Lighthouse \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Chrome \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u0430 \u043d\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0440\u0435\u0446\u0435\u043f\u0442\u0435 11.4.<\/p><\/blockquote>\n<h4>\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  Lighthouse \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u0430\u0439\u0442 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 Lighthouse \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u043f\u0430\u043d\u0435\u043b\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Chrome, \u0435\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 Firefox \u0432 \u0432\u0438\u0434\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f.<\/p>\n<p>  Lighthouse \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u2014 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 npm \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438\u043b\u0438 \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c Node. Lighthouse \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 Node:<\/p>\n<pre><code class=\"javascript\">$ npm install -g lighthouse<\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Lighthouse, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 URL \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">$ lighthouse https:\/\/www.oreilly.com\/<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212;view, \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u0442\u043a\u0440\u043e\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">$ lighthouse https:\/\/www.oreilly.com\/ --view<\/code><\/pre>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">$ lighthouse https:\/\/www.oreilly.com\/ --view --output html                                              --output-path .\/report.html<\/code><\/pre>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0430\u0439\u043b\u0430 budget.json \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u044e\u0434\u0436\u0435\u0442\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439. \u0412 \u0444\u0430\u0439\u043b\u0435 budget.json \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">[     {         \"path\": \"\/*\",         \"timings\": [             {                 \"metric\": \"interactive\",                 \"budget\": 3000             },             {                 \"metric\": \"first-meaningful-paint\",                 \"budget\": 1000             }         ],         \"resourceSizes\": [             {                 \"resourceType\": \"script\",                 \"budget\": 125             },             {                 \"resourceType\": \"total\",                 \"budget\": 300             }         ],         \"resourceCounts\": [             {                 \"resourceType\": \"third-party\",                 \"budget\": 10             }         ]     } ]<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 Google Chrome \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 (https:\/\/github.com\/GoogleChrome\/budget.json), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 budget.json.<\/p><\/blockquote>\n<p>  \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041d\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Lighthouse \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044f \u043a\u043e\u0434\u0430 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a GitHub Actions, Circle CI, Jenkins \u0438 Travis CI. \u041c\u043e\u0434\u0443\u043b\u044c Lighthouse CI (https:\/\/github.com\/GoogleChrome\/lighthouse-ci) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse \u0432 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0435 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043d\u0430 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 GitHub.<\/p>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 Circle CI:<\/p>\n<pre><code class=\"javascript\">version: 2.1 jobs:     build:         docker:             \u2014 image: circleci\/node:10.16-browsers         working_directory: ~\/your-project         steps:             \u2014 checkout             \u2014 run: npm install             \u2014 run: npm run build             \u2014 run: sudo npm install -g @lhci\/cli@0.3.x             \u2014 run: lhci autorun<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Lighthouse \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0430\u0445 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 Google Getting Started (https:\/\/oreil.ly\/7jnwx).<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041e\u0431 \u0430\u0432\u0442\u043e\u0440\u0430\u0445<\/b>                         <\/p>\n<div class=\"spoiler_text\"><b>\u0410\u0434\u0430\u043c \u0414. \u0421\u043a\u043e\u0442\u0442<\/b> \u2014 \u0432\u0435\u0434\u0443\u0449\u0438\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440, \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a \u0438\u0437 \u041a\u043e\u043d\u043d\u0435\u043a\u0442\u0438\u043a\u0443\u0442\u0430. \u0412\u043e\u0442 \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0441\u044f\u0442\u0438 \u043b\u0435\u0442 \u0410\u0434\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u044b\u043a\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0443\u0447\u0435\u0431\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043b\u044f \u0440\u044f\u0434\u0430 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d. \u042d\u0442\u043e \u0435\u0433\u043e \u0441\u0435\u0434\u044c\u043c\u0430\u044f \u043a\u043d\u0438\u0433\u0430.<\/p>\n<p>  <b>\u041c\u044d\u0442\u044c\u044e \u041c\u0430\u043a\u0434\u043e\u043d\u0430\u043b\u0434<\/b> \u2014 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c, \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 Microsoft MVP (Most Valuable Professional). \u041c\u044d\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0432\u0435\u0441\u0438\u0441\u0442\u044b\u0445 \u043a\u043d\u0438\u0433, \u0447\u0442\u043e \u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0435\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u0434\u0432\u0435\u0440\u0438 \u0432 \u0434\u043e\u043c\u0435. \u041d\u0430 \u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0435 (https:\/\/prosetech.com) \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u043a\u043d\u0438\u0433\u0443 \u00abJavaScript \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0441\u0435\u0440\u0438\u0435\u0439 \u0435\u0433\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u044e\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Young Coder.<\/p>\n<p>  <b>\u0428\u0435\u043b\u043b\u0438 \u041f\u0430\u0443\u044d\u0440\u0441<\/b> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043f\u0438\u0448\u0435\u0442 \u043e \u043d\u0438\u0445 \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 12 \u043b\u0435\u0442. \u0415\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043a\u043d\u0438\u0433\u0438, \u0432\u044b\u0448\u0435\u0434\u0448\u0438\u0435 \u0432 O\u2019Reilly, \u0431\u044b\u043b\u0438 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u044b \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441\u0435\u0442\u044f\u043c, Ajax, JavaScript \u0438 \u0432\u0435\u0431-\u0433\u0440\u0430\u0444\u0438\u043a\u0435. \u0428\u0435\u043b\u043b\u0438 \u2014 \u0437\u0430\u044f\u0434\u043b\u044b\u0439 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444 \u0438 \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u0446\u0430 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0415\u0439 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0432\u043e\u0438\u0445 \u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432.<\/div>\n<\/p><\/div>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0441 \u043a\u043d\u0438\u0433\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/www.piter.com\/collection\/all\/product\/javascript-retsepty-dlya-razrabotchikov-3-e-izd\">\u0441\u0430\u0439\u0442\u0435 \u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430<\/a>:<\/p>\n<p>  \u00bb <a href=\"https:\/\/www.piter.com\/collection\/all\/product\/javascript-retsepty-dlya-razrabotchikov-3-e-izd#Oglavlenie-1\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/a><br \/>  \u00bb <a href=\"https:\/\/www.piter.com\/collection\/all\/product\/javascript-retsepty-dlya-razrabotchikov-3-e-izd#Otryvok-1\">\u041e\u0442\u0440\u044b\u0432\u043e\u043a<\/a><\/p>\n<p>  \u041f\u043e \u0444\u0430\u043a\u0442\u0443 \u043e\u043f\u043b\u0430\u0442\u044b \u0431\u0443\u043c\u0430\u0436\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043d\u0438\u0433\u0438 \u043d\u0430 e-mail \u0432\u044b\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043a\u043d\u0438\u0433\u0430.<br \/>  \u0414\u043b\u044f \u0425\u0430\u0431\u0440\u043e\u0436\u0438\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0438\u0434\u043a\u0430 25% \u043f\u043e \u043a\u0443\u043f\u043e\u043d\u0443 \u2014 <b>JavaScript<\/b><\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/companies\/piter\/articles\/751748\/\"> https:\/\/habr.com\/ru\/companies\/piter\/articles\/751748\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/company\/piter\/blog\/751748\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/2i\/qe\/-2\/2iqe-2qeusfhybgwydwdyelayuc.jpeg\" align=\"left\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/2i\/qe\/-2\/2iqe-2qeusfhybgwydwdyelayuc.jpeg\" data-blurred=\"true\"\/><\/a> \u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440\u043e\u0436\u0438\u0442\u0435\u043b\u0438!<\/p>\n<p>  \u0417\u0430\u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434, \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f\u0441\u044c \u0441 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0432 JavaScript? \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u0432 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u0441\u044c c \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u043b\u044e\u0431\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0433\u043b\u0443\u0431\u0436\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c JS.<\/p>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u0432\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u043a\u043e\u0434\u0430, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c; \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JS, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b; \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u041e\u041e\u041f; \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0430\u0443\u0434\u0438\u043e, \u0432\u0438\u0434\u0435\u043e \u0438 SVG; \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c HTML \u0438 CSS; \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Node.js \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e; \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 REST, GraphQL \u0438 Fetch; \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Express; \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438, async\/await \u0438 \u0432\u0435\u0431-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430\u043c\u0438.<\/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-351090","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351090","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=351090"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/351090\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=351090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=351090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=351090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}