diff options
author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/api/service_worker_api | |
parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/api/service_worker_api')
-rw-r--r-- | files/ru/web/api/service_worker_api/index.html | 12 | ||||
-rw-r--r-- | files/ru/web/api/service_worker_api/using_service_workers/index.html | 38 |
2 files changed, 25 insertions, 25 deletions
diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html index 7d52ed2334..f7b0bbb1cd 100644 --- a/files/ru/web/api/service_worker_api/index.html +++ b/files/ru/web/api/service_worker_api/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Service_Worker_API <h2 id="Концепция_и_использование_Service_Worker">Концепция и использование Service Worker</h2> -<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).</p> +<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведёт себя в определённых ситуациях (например, когда сеть не доступна).</p> <p>Service worker запускается в контексте воркеров, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>, в Service Worker'е использовать нельзя.</p> @@ -55,7 +55,7 @@ translation_of: Web/API/Service_Worker_API <p>Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service воркером для этой страницы/сайта.</p> -<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.</p> +<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного её завершения — активация.</p> <p>Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние <em>в ожидании</em>. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет <em>активным воркером</em>). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.</p> @@ -63,7 +63,7 @@ translation_of: Web/API/Service_Worker_API <p>Есть также событие <code>activate</code>. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.</p> -<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p> +<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на своё усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p> <div class="note"> <p><strong>Заметка</strong>: Так как выполнение <code>oninstall</code>/<code>onactivate</code> может занять время, спецификация service worker предоставляет метод <code>waitUntil</code>, который возвращает промис, когда вызывается <code>oninstall</code> или <code>onactivate</code>. Функциональные события не отправляются service worker, пока промис не завершится успешно.</p> @@ -78,7 +78,7 @@ translation_of: Web/API/Service_Worker_API <ul> <li>Фоновая синхронизация данных</li> <li>Ответ на запросы от других источников</li> - <li>Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li> + <li>Получение централизованного обновления для данных использующих тяжёлые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li> <li>Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки</li> <li>Подписка на фоновые сервисы</li> <li>Кастомная шаблонизация, основанная на определённых паттернах URL</li> @@ -90,7 +90,7 @@ translation_of: Web/API/Service_Worker_API <ul> <li><a href="https://github.com/slightlyoff/BackgroundSync">Фоновой синхронизации</a>: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.</li> <li><a href="/en-US/docs/Web/API/Push_API">Реакции на пуш-сообщения</a>: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.</li> - <li>Реакции на определенное время и дату</li> + <li>Реакции на определённое время и дату</li> <li>Введение гео-ограничений</li> </ul> @@ -100,7 +100,7 @@ translation_of: Web/API/Service_Worker_API <dt>{{domxref("Cache") }}</dt> <dd>Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.</dd> <dt>{{domxref("CacheStorage") }}</dt> - <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.</dd> + <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создаёт главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имён соответствующего объекта {{domxref("Cache")}}.</dd> <dt>{{domxref("Client") }}</dt> <dd>Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным воркером.</dd> <dt>{{domxref("Clients") }}</dt> diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index bab45149a6..4fc2235590 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -83,7 +83,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>В первом примере код, идущий за вызовом функции <code>myFunction()</code>, будет ждать завершения вызова и возврата значения. Во втором примере <code>myFunction()</code> возвращает промис для <code>value</code>, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу <code>then</code>, будет выполнен асинхронно.</p> -<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать <code>.complete</code>, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p> +<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнём их слушать? Мы могли бы использовать <code>.complete</code>, но оно все ещё ненадёжно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p> <p>Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере <a href="https://github.com/mdn/promises-test">Promises test</a> или взглянуть на <a href="https://mdn.github.io/promises-test/">живое демо</a>.)</p> @@ -111,9 +111,9 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers }); }</pre> -<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p> +<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешён или отклонён, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p> -<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> +<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> <pre class="brush: js notranslate">let body = document.querySelector('body'); let myImage = new Image(); @@ -126,7 +126,7 @@ imgLoad('myLittleVader.jpg').then((response) => { console.log(Error); });</pre> -<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещенный в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p> +<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаём две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещённый в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p> <p>Все это происходит асинхронно.</p> @@ -141,14 +141,14 @@ imgLoad('myLittleVader.jpg').then((response) => { <h2 id="Демонстрация_Service_Workers">Демонстрация Service Workers</h2> -<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p> +<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также ещё регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p> <p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> <br> Вы можете посмотреть <a href="https://github.com/mdn/sw-test/">исходный код на GitHub</a>, а также <a href="https://mdn.github.io/sw-test/">этот живой пример</a>. Единственное, что мы тут рассмотрим, это промис (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js строки 22-47</a>), модифицированная версия того, о котором вы читали выше в разделе <a href="https://github.com/mdn/promises-test">Тестовая демонстрация промисов</a>. Разница в следующем:</p> <ol> - <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li> + <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаём JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li> <li>Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js строки 31-34</a>). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.</li> <li>Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js строки 60-64</a>). По началу это может выглядеть немного странно, но именно так и работают промисы.</li> </ol> @@ -182,7 +182,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускаете код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.</p> -<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p> +<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнёт работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p> <div class="note"> <p><strong>На заметку</strong>: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.</p> @@ -192,7 +192,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><strong>На заметку</strong>: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.</p> </div> -<h4 id="Почему_мой_сервис-воркер_не_прошел_регистрацию">Почему мой сервис-воркер не прошел регистрацию?</h4> +<h4 id="Почему_мой_сервис-воркер_не_прошёл_регистрацию">Почему мой сервис-воркер не прошёл регистрацию?</h4> <p>Это может произойти по следующим причинам:</p> @@ -222,7 +222,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><strong>На заметку</strong>: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, или можете хранить ресурсы в <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> </div> -<p>Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> +<p>Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> <pre class="brush: js notranslate">self.addEventListener('install', (event) => { event.waitUntil( @@ -246,12 +246,12 @@ imgLoad('myLittleVader.jpg').then((response) => { <ol> <li>Здесь мы добавляем обработчик события <code>install</code> к сервис-воркеру (отныне <code>self</code>), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри <code>waitUntil()</code>, не завершится с успехом.</li> <li><span style="line-height: 1.5;">Внутри <code>waitUntil()</code> мы используем метод </span><a href="/en-US/docs/Web/API/CacheStorage/open">caches.open()</a>, чтобы создать новый кеш, который назовём <code>v1</code>, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод <code>addAll()</code>, который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.</li> - <li>Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li> + <li>Если промис будет отклонён, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li> <li>После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).</li> </ol> <div class="note"> -<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.</p> +<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещён в сервис-воркерах.</p> </div> <div class="note"> @@ -264,7 +264,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p> -<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).</p> +<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадёт в сервис-воркер).</p> <p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p> @@ -322,7 +322,7 @@ event.request.body</pre> <h2 id="Восстановление_неудачных_запросов">Восстановление неудачных запросов</h2> -<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p> +<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдёт, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p> <p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p> @@ -334,9 +334,9 @@ event.request.body</pre> ); });</pre> -<p>Если промис будет отклонен, функция <code>catch()</code> вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p> +<p>Если промис будет отклонён, функция <code>catch()</code> вернёт обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p> -<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:</p> +<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:</p> <pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { event.respondWith( @@ -351,11 +351,11 @@ event.request.body</pre> ); });</pre> -<p>Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.</p> +<p>Здесь мы возвращаем обычный сетевой запрос, который возвращён вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передаётся браузеру, который передаёт его странице, которая запросила ресурс.</p> -<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p> +<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранён в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p> -<p>У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> +<p>У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> <pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { event.respondWith( @@ -406,7 +406,7 @@ event.request.body</pre> <h3 id="Удаление_старого_кеша">Удаление старого кеша</h3> -<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p> +<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все ещё работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жёсткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p> <p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p> |