{"id":314718,"date":"2020-12-11T15:01:13","date_gmt":"2020-12-11T15:01:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=314718"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=314718","title":{"rendered":"Service Workers"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e Service Workers (SW). SW \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443. \u041e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f. SW \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u043e \u0435\u0441\u0442\u044c Service Workers \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u042d\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e Service Worker\u2019a.<\/p>\n<p><em>(\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 SW, \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c JS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c JS, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u044b\u0435 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Angular, React \u0438\u043b\u0438 Vue)<\/em><\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b sw.js \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 app.js \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043b\u0438 SW \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0442\u043e\u0440\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043b\u0438 SW \u0434\u0430\u043d\u043d\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e SW \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 navigator.serviceWorker.register (), \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0448 SW, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Promise. \u0418\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e34\/96b\/c38\/e3496bc38de02737bc9ffd025f7d3c21.png\" width=\"1536\" height=\"796\"><figcaption><\/figcaption><\/figure>\n<pre><code>if ('serviceWorker' in navigator) {   navigator.serviceWorker     .register('\/sw.js')     .then(event =&gt; {       console.log('Service worker registered', event);     }); }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e SW, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043b, SW \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041d\u043e \u044f \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a SW, \u043c\u044b, \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 self, \u0447\u0442\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u044c \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a SW\u00bb, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 addEventListener (). SW \u043d\u0430\u0434\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 Service Worker\u2019a. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0438 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043d\u0430\u0448 Service Worker \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/119\/c90\/070\/119c90070b5a556a340d3e23629c506c.png\" width=\"1536\" height=\"794\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('install', event =&gt; {   console.log('Installing [Service Worker]', event); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0424\u0430\u0437\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Service Worker\u2019a &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f. \u0412 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u044b \u043f\u0438\u0448\u0435\u043c caches, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u043a\u0435\u0448\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u0435\u0442\u043e\u0434 open (), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0430\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u0435\u0448. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c event.waitUntil (). \u041e\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0436\u0434\u0435\u0442, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443. \u0412 \u0431\u043b\u043e\u043a\u0435 then \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u0435\u0448\u0443 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 cache.addAll () \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c4\/4b0\/d1d\/9c44b0d1d6fc469b18ae8a4b23929b29.png\" width=\"1536\" height=\"797\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('install', event =&gt; {   console.log('Installing [Service Worker]', event);    event.waitUntil(     caches.open('static')       .then(cache =&gt; {         console.log('[Service Worker] Precaching App Shell');         cache.addAll([           '\/',           '\/index.html',           '\/favicon.ico',           '\/src\/js\/app.js',           '\/src\/js\/chart.js',           '\/src\/js\/materialize.js',           '\/src\/js\/materialize.min.js',           '\/src\/css\/materialize.css',           '\/src\/css\/materialize.min.css',           '\/src\/css\/style.css',           'https:\/\/fonts.googleapis.com\/icon?family=Material+Icons',           'https:\/\/code.jquery.com\/jquery-2.1.1.min.js',           'https:\/\/cdn.jsdelivr.net\/npm\/chart.js@2.8.0'         ]);       })); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0432 \u043a\u0435\u0448-\u043f\u0430\u043c\u044f\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae8\/a8b\/8a3\/ae8a8b8a376fa0aed5ef29ea59160758.png\" width=\"1536\" height=\"722\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u043a\u0435\u0448\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c, &#8212; \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438. Fetch \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u044b css \u0438 js \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b xhr. \u0418\u0442\u0430\u043a, \u0432 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 fetch Service Worker\u2019a \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/22c\/3b8\/b51\/22c3b8b515787963773c2a274c9aa248.png\" width=\"1536\" height=\"794\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('fetch', event =&gt; {   event.respondWith(     caches.match(event.request)       .then(response =&gt; {         if (response) {           return response;         } else {           return fetch(event.request);         }       })     ); });<\/code><\/pre>\n<\/p>\n<p>\u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 event.respondWith () \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e Service Worker\u2019\u0435 \u043a\u0430\u043a \u043e \u0441\u0435\u0442\u0435\u0432\u043e\u043c \u043f\u0440\u043e\u043a\u0441\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 fetch. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 Service Worker, \u043a\u0430\u043a \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c, \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 cashes.match () \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u0443\u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u043e\u043d \u0432\u0435\u0440\u043d\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u041c\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043d\u0435 \u0432\u044b\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0438 \u0432\u0438\u0434\u0438\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u043d\u043e \u0432 \u043a\u0435\u0448\u0435 \u0438 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c, \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u0435\u0448\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0438\u043b\u0438 \u0433\u0434\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0440\u0442\u0430\u0435\u043c fetch (event.request). \u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435.&nbsp;<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3db\/00e\/c53\/3db00ec531b5140b5ef30a233bf3bc08.png\" width=\"1536\" height=\"721\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041f\u041e\u041b\u0423\u0427\u0418\u0422\u042c \u0414\u0410\u041d\u041d\u042b\u0415\u00bb \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0436\u0430\u0432 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u0438\u0445 \u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0442\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u0441\u0435\u0442\u0438\u043b\u0438 \u043d\u0430\u0448 \u0441\u0430\u0439\u0442. \u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0437\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f0\/d3f\/f02\/5f0d3ff02871d56bd6d498c0549ae6e1.png\" width=\"1536\" height=\"794\"><figcaption><\/figcaption><\/figure>\n<pre><code>     Object.keys(pureData).forEach(key =&gt; tmp[sorter[key.toLowerCase()]] = { key, value: pureData[key] });      tmp.forEach(obj =&gt; orderedData[obj.key] = obj.value);      const ctx = document.getElementById('myChart').getContext('2d');      new Chart(ctx, {       type: 'line',       data: {           labels: Object.entries(orderedData).map(([key, _]) =&gt; key),           datasets: [{               label: 'Users',               backgroundColor: '#26a69a',               borderColor: '#26a69a',               fill: false,               data: Object.entries(orderedData).map(([_, value]) =&gt; value),           }]       }     });   }); };<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cae\/975\/f5b\/cae975f5bac419eb7bb63e4ddf5ceceb.png\" width=\"1536\" height=\"722\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d1\/a65\/2f4\/9d1a652f482b19435c86fc7f272909b9.png\" width=\"1536\" height=\"794\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('fetch', event =&gt; {   event.respondWith(     caches.match(event.request)       .then(response =&gt; {         if (response) {           return response;         } else {           return fetch(event.request)             .then(res =&gt; {               return caches.open('dynamic')                 .then(cache =&gt; {                   cache.put(event.request.url, res.clone());                   return res;                 })             });         }       })     ); });<\/code><\/pre>\n<\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u0435\u0448\u0435. \u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043c\u044b \u043f\u0438\u0448\u0435\u043c caches, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u043a\u0435\u0448\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u0443 open (), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 cache.put () \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c. \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435, &#8212; \u044d\u0442\u043e URL-\u0430\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440. \u0412\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442. \u0418\u0442\u0430\u043a, \u043c\u044b \u0445\u0440\u0430\u043d\u0438\u043c \u0442\u043e\u0447\u043d\u044b\u0439 \u043a\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d, \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u0430, \u043d\u043e \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0445 \u0432 \u043a\u0435\u0448\u0435. \u0412\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u0435\u0448\u0430. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 xhr. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b css \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0ca\/ed2\/c08\/0caed2c083936702e6dcd40f1ad1fc77.png\" width=\"1536\" height=\"725\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0424\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443. \u0422\u0430\u043a \u043a\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0437\u0430 \u043a\u0443\u043b\u0438\u0441\u0430\u043c\u0438? \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SW \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 &#8212; \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0432 indexedDB. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, SW \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443. \u0422\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0432 SW, \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u041f\u0440\u0438\u044f\u0442\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043a\u0440\u043e\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044e, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u043d\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f \u043a Service Worker\u2019y \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043b\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043e\u043a\u043d\u0435. \u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 &#8212; \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, API, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u044f \u043e\u0431\u0440\u0430\u0449\u0443\u0441\u044c \u043a \u0441\u0432\u043e\u0435\u043c\u0443 Service Worker\u2019y, \u0438 \u0442\u0430\u043c \u044f \u043c\u043e\u0433\u0443 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e ready, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e. \u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 (\u044d\u0442\u043e \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438), \u0438 \u0442\u0430\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u0438 \u044d\u0442\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0418\u0442\u0430\u043a, \u044f \u043d\u0430\u0437\u043e\u0432\u0443 \u0435\u0433\u043e \u00ab\u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438\u00bb. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u043c\u044f \u0432 Service Worker\u2019\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043d\u0435\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0433, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/943\/ad9\/30b\/943ad930b5a50f2433340d88f7ea69fc.png\" width=\"1536\" height=\"794\"><figcaption><\/figcaption><\/figure>\n<pre><code>if ('serviceWorker' in navigator &amp;&amp; 'SyncManager' in window) {       navigator.serviceWorker.ready         .then(sw =&gt; {           sw.sync.register('sync-request')         });     }<\/code><\/pre>\n<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00abPOST DATA\u00bb \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u0432 indexedDB \u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 indexedDB. \u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438. \u041f\u0435\u0440\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e &#8212; \u044d\u0442\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440. \u0412\u0442\u043e\u0440\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00absunday\u00bb, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0432\u043d\u043e 10 (\u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b :)). \u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e writeData \u0438\u0437 utility.js, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u0438\u043c\u044f \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 &#8212; \u0441\u0430\u043c\u0438 \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aa2\/b43\/7a2\/aa2b437a2f72209fa487d56b84af00fb.png\" width=\"1536\" height=\"797\"><figcaption><\/figcaption><\/figure>\n<pre><code>const syncButton = document.getElementById('sync-button');  syncButton.addEventListener('click', _ =&gt; {     if ('serviceWorker' in navigator &amp;&amp; 'SyncManager' in window) {       navigator.serviceWorker.ready         .then(sw =&gt; {           const data = {             id: new Date().getTime(),             sunday: 10           };            writeData('sync-requests', data)             .then(_ =&gt; {               sw.sync.register('sync-request')             });         });     } });<\/code><\/pre>\n<\/p>\n<p>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u043c\u0443 &#8212; \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f. \u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae4\/24a\/be3\/ae424abe3f4899af74d4b0924c443f59.png\" width=\"1536\" height=\"796\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('sync', event =&gt; {   console.log('[Service Worker] Syncing');    if (event.tag === 'sync-request') {     event.waitUntil(       readAllData('sync-requests')         .then(async data =&gt; {           const requests = [];            for (const d of data) {             requests.push(fetch('https:\/\/simple-pwa-8a005.firebaseio.com\/data.json', {               method: 'POST',               headers: {                 'Content-Type': 'application\/json',                 'Accept': 'application\/json'               },               body: JSON.stringify({                 sunday: d.sunday               })             }));           }            const results = await Promise.all(requests);            results.map((response, index) =&gt; {             if (response.ok) {               deleteItemFromData('sync-requests', data[index].id);             }           })         })     );   } });<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0442\u0435\u0433 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e event.waitUntil (), \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043d\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 indexedDB (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u0437 utility.js), \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0445, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c post \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0445 \u0438\u0437 indexedDB, \u0435\u0441\u043b\u0438 \u043c\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0438\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abPOST DATA\u00bb \u0438 \u0437\u0430\u0442\u0435\u043c \u0441\u043d\u043e\u0432\u0430 \u0432\u044b\u0439\u0442\u0438 \u0432 \u043e\u043d\u043b\u0430\u0439\u043d.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1f5\/fa6\/d1f\/1f5fa6d1fb0fd627019dfdda917f4d38.png\" width=\"1536\" height=\"722\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00abPOST DATA\u00bb, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0435 \u0432 \u0441\u0435\u0442\u0438, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c41\/448\/ca5\/c41448ca5445f50de28e6e746b634bae.png\" width=\"1536\" height=\"722\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u0418 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043d\u0430\u0448 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u0435\u0448\u0430 \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u041e\u041b\u0423\u0427\u0418\u0422\u042c \u0414\u0410\u041d\u041d\u042b\u0415\u00bb.&nbsp;<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c8\/6d5\/dce\/4c86d5dcee1411239e6002785e09dd6f.png\" width=\"1536\" height=\"724\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043a\u0430 \u0432\u0441\u0435. \u0423\u0432\u0438\u0434\u0438\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041c\u043e\u0439 \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 github: https:\/\/github.com\/Draakan\/simplePWA<\/p>\n<\/div>\n<p> \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\/post\/532516\/\"> https:\/\/habr.com\/ru\/post\/532516\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e Service Workers (SW). SW \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443. \u041e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f. SW \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u043e \u0435\u0441\u0442\u044c Service Workers \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u042d\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e Service Worker\u2019a.<\/p>\n<p><em>(\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 SW, \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c JS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c JS, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u044b\u0435 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Angular, React \u0438\u043b\u0438 Vue)<\/em><\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b sw.js \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 app.js \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043b\u0438 SW \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0442\u043e\u0440\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043b\u0438 SW \u0434\u0430\u043d\u043d\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e SW \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 navigator.serviceWorker.register (), \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0448 SW, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Promise. \u0418\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>if ('serviceWorker' in navigator) {   navigator.serviceWorker     .register('\/sw.js')     .then(event =&gt; {       console.log('Service worker registered', event);     }); }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e SW, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043b, SW \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041d\u043e \u044f \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a SW, \u043c\u044b, \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 self, \u0447\u0442\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u044c \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a SW\u00bb, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 addEventListener (). SW \u043d\u0430\u0434\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 Service Worker\u2019a. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0438 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043d\u0430\u0448 Service Worker \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('install', event =&gt; {   console.log('Installing [Service Worker]', event); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0424\u0430\u0437\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Service Worker\u2019a &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f. \u0412 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u044b \u043f\u0438\u0448\u0435\u043c caches, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u043a\u0435\u0448\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u0435\u0442\u043e\u0434 open (), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0430\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u0435\u0448. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c event.waitUntil (). \u041e\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0436\u0434\u0435\u0442, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443. \u0412 \u0431\u043b\u043e\u043a\u0435 then \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u0435\u0448\u0443 \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 cache.addAll () \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('install', event =&gt; {   console.log('Installing [Service Worker]', event);    event.waitUntil(     caches.open('static')       .then(cache =&gt; {         console.log('[Service Worker] Precaching App Shell');         cache.addAll([           '\/',           '\/index.html',           '\/favicon.ico',           '\/src\/js\/app.js',           '\/src\/js\/chart.js',           '\/src\/js\/materialize.js',           '\/src\/js\/materialize.min.js',           '\/src\/css\/materialize.css',           '\/src\/css\/materialize.min.css',           '\/src\/css\/style.css',           'https:\/\/fonts.googleapis.com\/icon?family=Material+Icons',           'https:\/\/code.jquery.com\/jquery-2.1.1.min.js',           'https:\/\/cdn.jsdelivr.net\/npm\/chart.js@2.8.0'         ]);       })); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0432 \u043a\u0435\u0448-\u043f\u0430\u043c\u044f\u0442\u044c.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u043a\u0435\u0448\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c, &#8212; \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438. Fetch \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u044b css \u0438 js \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b xhr. \u0418\u0442\u0430\u043a, \u0432 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 fetch Service Worker\u2019a \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('fetch', event =&gt; {   event.respondWith(     caches.match(event.request)       .then(response =&gt; {         if (response) {           return response;         } else {           return fetch(event.request);         }       })     ); });<\/code><\/pre>\n<\/p>\n<p>\u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 event.respondWith () \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e Service Worker\u2019\u0435 \u043a\u0430\u043a \u043e \u0441\u0435\u0442\u0435\u0432\u043e\u043c \u043f\u0440\u043e\u043a\u0441\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 fetch. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 Service Worker, \u043a\u0430\u043a \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c, \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 cashes.match () \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u0443\u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u043e\u043d \u0432\u0435\u0440\u043d\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u041c\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043d\u0435 \u0432\u044b\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0438 \u0432\u0438\u0434\u0438\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u043d\u043e \u0432 \u043a\u0435\u0448\u0435 \u0438 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c, \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u0435\u0448\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0438\u043b\u0438 \u0433\u0434\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0440\u0442\u0430\u0435\u043c fetch (event.request). \u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435.&nbsp;<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041f\u041e\u041b\u0423\u0427\u0418\u0422\u042c \u0414\u0410\u041d\u041d\u042b\u0415\u00bb \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0436\u0430\u0432 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u0438\u0445 \u043d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0442\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u0441\u0435\u0442\u0438\u043b\u0438 \u043d\u0430\u0448 \u0441\u0430\u0439\u0442. \u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0437\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>     Object.keys(pureData).forEach(key =&gt; tmp[sorter[key.toLowerCase()]] = { key, value: pureData[key] });      tmp.forEach(obj =&gt; orderedData[obj.key] = obj.value);      const ctx = document.getElementById('myChart').getContext('2d');      new Chart(ctx, {       type: 'line',       data: {           labels: Object.entries(orderedData).map(([key, _]) =&gt; key),           datasets: [{               label: 'Users',               backgroundColor: '#26a69a',               borderColor: '#26a69a',               fill: false,               data: Object.entries(orderedData).map(([_, value]) =&gt; value),           }]       }     });   }); };<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<pre><code>self.addEventListener('fetch', event =&gt; {   event.respondWith(     caches.match(event.request)       .then(response =&gt; {         if (response) {           return response;         } else {           return fetch(event.request)             .then(res =&gt; {               return caches.open('dynamic')                 .then(cache =&gt; {                   cache.put(event.request.url, res.clone());                   return res;                 })             });         }       })     ); });<\/code><\/pre>\n<\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0442\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u0435\u0448\u0435. \u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043c\u044b \u043f\u0438\u0448\u0435\u043c caches, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u043a\u0435\u0448\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u0443 open (), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0435\u0448\u0430. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 cache.put () \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c. \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0435, &#8212; \u044d\u0442\u043e URL-\u0430\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440. \u0412\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442. \u0418\u0442\u0430\u043a, \u043c\u044b \u0445\u0440\u0430\u043d\u0438\u043c \u0442\u043e\u0447\u043d\u044b\u0439 \u043a\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d, \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u0430, \u043d\u043e \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0445 \u0432 \u043a\u0435\u0448\u0435. \u0412\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u0435\u0448\u0430. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 xhr. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b css \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u0412 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0424\u043e\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443. \u0422\u0430\u043a \u043a\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0437\u0430 \u043a\u0443\u043b\u0438\u0441\u0430\u043c\u0438? \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SW \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 &#8212; \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0432 indexedDB. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, SW \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443. \u0422\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0432 SW, \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u041f\u0440\u0438\u044f\u0442\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043a\u0440\u043e\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0445\u043e\u0447\u0443 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044e, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u043d\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f \u043a Service Worker\u2019y \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043b\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<\/div>\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-314718","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/314718","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=314718"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/314718\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=314718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=314718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=314718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}